Foros del Web » Creando para Internet » Diseño web »

[SOLUCIONADO] Aumentar la velocidad cuando has reducido todo

 Estas en el tema de Aumentar la velocidad cuando has reducido todo en el foro de Diseño web en Foros del Web. Buenas a todos, A ver si me pueden dar alguna orientación de como restar algunas décimas a la velocidad de descarga de la Web. He ...
  #1 (permalink)  
Antiguo 08/06/2015, 01:27
Avatar de Uncontroled_Duck
Colaborador
  
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 12 años, 11 meses
Puntos: 261
Aumentar la velocidad cuando has reducido todo
Buenas a todos,

A ver si me pueden dar alguna orientación de como restar algunas décimas a la velocidad de descarga de la Web.

He empleado, dentro de mis conocimientos, todo lo que he podido para reducir la velocidad de descarga de la web.

- El html de salida minimificado.
- Todos los css unificados y minimificados.
- Todos los js minimificados.
- Todas las imágenes reducidas (a pesar de perder cierta calidad).
- Cacheado en el servidor.
- Habilitada la compresión desde el servidor.
- Los archivos estáticos distribuidos en subdominios para aumentar las peticiones simultáneas.
- También tiene la caché del navegador, pero no influye en la 1ª descarga lógicamente.

El resultado ha sido:
459KB
36 peticiones
La media de descarga es de entre 2,9s y 3,12s. (el grueso se descarga en 2,20s)
El archivo que más pesa es un archivo de fontello de tipo .woff con 79,4 KB.



Como nota comentar que PageSpeed Insights da una puntuación de velocidad de 98/100 móvil/ordenador. En teoría no es lenta... pero tampoco muy rápida viendo los datos.

Seguro que hay margen para seguir reduciendo, ¿Que más se podría hacer?

Gracias de antemano por los comentarios.

Saludos,
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #2 (permalink)  
Antiguo 08/06/2015, 01:46
Avatar de lauser
Moderator Unix/Linux
  
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 10 años, 9 meses
Puntos: 401
Respuesta: Aumentar la velocidad cuando has reducido todo
Cita:
- Cacheado en el servidor.
- Habilitada la compresión desde el servidor.
Presupongo que recurriste a:
Código Apache: 
Ver original
  1. <ifModule mod_expires.c>
  2. <ifModule mod_headers.c>

Y más o menos, así:
Código Apache: 
Ver original
  1. <ifModule mod_expires.c>
  2. ExpiresActive On
  3. ExpiresDefault "access plus 604800 seconds"
  4. ExpiresByType text/html "access plus 604800 seconds"
  5. ExpiresByType image/gif "access plus 604800 seconds"
  6. ExpiresByType image/jpeg "access plus 604800 seconds"
  7. ExpiresByType image/png "access plus 604800 seconds"
  8. ExpiresByType text/css "access plus 604800 seconds"
  9. ExpiresByType text/javascript "access plus 604800 seconds"
  10. ExpiresByType application/x-javascript "access plus 604800 seconds"
  11. </ifModule>
  12.  
  13. <ifModule mod_headers.c>
  14. <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|svg|swf)$">
  15. Header set Cache-Control "max-age=2592000, public"
  16. </filesMatch>
  17. <filesMatch "\\.(css)$">
  18. Header set Cache-Control "max-age=604800, public"
  19. </filesMatch>
  20. <filesMatch "\\.(js)$">
  21. Header set Cache-Control "max-age=604800, private"
  22. </filesMatch>
  23. <filesMatch "\\.(xml|txt)$">
  24. Header set Cache-Control "max-age=604800, public, must-revalidate"
  25. </filesMatch>
  26. <filesMatch "\\.(html|htm|php)$">
  27. Header set Cache-Control "max-age=1, private, must-revalidate"
  28. </filesMatch>
  29. </ifModule>
  30.  
  31. Header unset Pragma
  32. Header unset ETag
  33. FileETag None
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
  #3 (permalink)  
Antiguo 08/06/2015, 02:09
Avatar de Uncontroled_Duck
Colaborador
  
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 12 años, 11 meses
Puntos: 261
Respuesta: Aumentar la velocidad cuando has reducido todo
Hola lauser,

En primer lugar gracias por tu tiempo.

Correcto!

Sobre el cacheado en el servidor es que la salida html que genera todo el proceso de php la minimifica y lo cachea físicamente en un directorio del servidor, reduce algo por evitar re-procesar de nuevo el php en cada petición, pero cierto es que no he notado mucho la diferencia, al menos con esta estrategia.

La compresión se genera efectivamente a través del .htaccess, que lo tengo así:
Código Apache: 
Ver original
  1. <IfModule mod_deflate.c>
  2. AddOutputFilterByType DEFLATE text/plain
  3. AddOutputFilterByType DEFLATE text/html
  4. AddOutputFilterByType DEFLATE text/xml
  5. AddOutputFilterByType DEFLATE text/css
  6. AddOutputFilterByType DEFLATE application/xml
  7. AddOutputFilterByType DEFLATE application/xhtml+xml
  8. AddOutputFilterByType DEFLATE application/rss+xml
  9. AddOutputFilterByType DEFLATE application/javascript
  10. AddOutputFilterByType DEFLATE application/x-javascript
  11. AddOutputFilterByType DEFLATE application/x-httpd-php
  12. AddOutputFilterByType DEFLATE application/x-httpd-fastphp
  13. AddOutputFilterByType DEFLATE image/svg+xml
  14.  
  15. BrowserMatch ^Mozilla/4 gzip-only-text/html
  16. BrowserMatch ^Mozilla/4\.0[678] no-gzip
  17. BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
  18.  
  19. Header append Vary User-Agent env=!dont-vary
  20. </IfModule>
  21.  
  22.  
  23. <IfModule mod_expires.c>
  24. ExpiresActive On
  25. ExpiresDefault "access plus 600 seconds"
  26. ExpiresByType image/x-icon "access plus 604800 seconds"
  27. ExpiresByType image/jpg "access plus 604800 seconds"
  28. ExpiresByType image/jpeg "access plus 604800 seconds"
  29. ExpiresByType image/png "access plus 604800 seconds"
  30. ExpiresByType image/gif "access plus 604800 seconds"
  31. ExpiresByType application/x-shockwave-flash "access plus 604800 seconds"
  32. ExpiresByType text/css "access plus 604800 seconds"
  33. ExpiresByType text/javascript "access plus 604800 seconds"
  34. ExpiresByType application/x-javascript "access plus 604800 seconds"
  35. ExpiresByType text/html "access plus 600 seconds"
  36. ExpiresByType application/xhtml+xml "access plus 600 seconds"
  37. </IfModule>
  38. <ifmodule mod_headers.c>
  39. <filesmatch "\.(ico|svg|jpg|jpeg|png|gif|woff)$">
  40. Header set Cache-Control "max-age=604800, public"
  41. </filesmatch>
  42. <filesmatch "\.(css)$">
  43. Header set Cache-Control "max-age=604800, public"
  44. </filesmatch>
  45. <filesmatch "\.(js)$">
  46. Header set Cache-Control "max-age=604800, private"
  47. </filesmatch>
  48. <filesmatch "\.(x?html?|php)$">
  49. Header set Cache-Control "max-age=600, private, must-revalidate"
  50. </filesmatch>
  51. </ifmodule>
  52.  
  53. FileEtag MTime Size
Poco a poco lo voy comprendiendo mejor, pero aún desconozco muchas cosas de su funcionamiento.

Donde he notado más el aumento de velocidad ha sido al distribuir los archivos estáticos, bajó casi un segundo.

Saludos,
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #4 (permalink)  
Antiguo 08/06/2015, 03:37
Avatar de lauser
Moderator Unix/Linux
  
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 10 años, 9 meses
Puntos: 401
Respuesta: Aumentar la velocidad cuando has reducido todo
Si tu server es decente te aconsejo activar el KeepAlive. Mira estas dos imágenes, las acabo de tomar..la primera con el KeepAlive desactivado, la segunda lo tiene activado.

Desactivado


Activado


Te pongo un ejemplo completo de htaccess:
Código Apache: 
Ver original
  1. RewriteCond %{HTTP_USER_AGENT} libwww-perl.* 
  2. RewriteRule .* &#8211; [F,L]
  3.  
  4. <IfModule mod_rewrite.c>
  5.     RewriteEngine on
  6.     RewriteBase /
  7.     RewriteCond %{REQUEST_FILENAME} !-f 
  8.     RewriteCond %{REQUEST_FILENAME} !-d
  9.     RewriteRule ^(.*)$ index.php?$1
  10. </IfModule>
  11.  
  12. RewriteCond %{HTTP_HOST} ^(IPdelServer(.+)$)
  13. RewriteRule ^(.*)$ http://www.tuweb.es/$1 [R=301,L]
  14.  
  15. <ifModule mod_deflate.c>
  16.   AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
  17.   AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
  18.   AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
  19.   AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
  20.   AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
  21.   AddOutputFilterByType DEFLATE font/truetype font/opentype
  22. </ifModule>
  23.  
  24. <ifModule mod_expires.c>
  25. ExpiresActive On
  26. ExpiresDefault "access plus 300 seconds"
  27. ExpiresByType text/html "access plus 600 seconds"
  28. ExpiresByType image/gif "access plus 604800 seconds"
  29. ExpiresByType image/ico "access plus 604800 seconds"
  30. ExpiresByType image/jpeg "access plus 604800 seconds"
  31. ExpiresByType image/jpg "access plus 604800 seconds"
  32. ExpiresByType image/png "access plus 604800 seconds"
  33. ExpiresByType text/css "access plus 604800 seconds"
  34. ExpiresByType text/javascript "access plus 604800 seconds"
  35. ExpiresByType application/x-javascript "access plus 604800 seconds"
  36. ExpiresByType application/javascript "access plus 604800 seconds"
  37. ExpiresByType application/xhtml+xml "access plus 600 seconds"
  38. </ifModule>
  39.  
  40. Header set Connection keep-alive
  41.  
  42. <ifModule mod_headers.c> 
  43. <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|svg|swf)$">
  44. Header set Cache-Control "max-age=2592000, public"
  45. </filesMatch>
  46. <filesMatch "\\.(css)$">
  47. Header set Cache-Control "max-age=604800, public"
  48. </filesMatch>
  49. <filesMatch "\\.(js)$">
  50. Header set Cache-Control "max-age=604800, private"
  51. </filesMatch>
  52. <filesMatch "\\.(xml|txt)$">
  53. Header set Cache-Control "max-age=604800, public, must-revalidate"
  54. </filesMatch>
  55. <filesMatch "\\.(html|htm|php)$">
  56. Header set Cache-Control "max-age=1, private, must-revalidate"
  57. </filesMatch>
  58. </ifModule>
  59.  
  60. Header unset Pragma
  61. Header unset ETag
  62. FileETag None
  63.  
  64. php_flag apc.cache_by_default On
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
  #5 (permalink)  
Antiguo 08/06/2015, 06:03
Avatar de Uncontroled_Duck
Colaborador
  
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 12 años, 11 meses
Puntos: 261
Respuesta: Aumentar la velocidad cuando has reducido todo
Buenas,

Gracias por el aporte.

Viendo que has añadido los formatos de tipografías, he buscado para añadir un par de ellos más "eot" y "woff".
Código Apache: 
Ver original
  1. AddType application/vnd.ms-fontobject eot
  2. AddType application/x-font-woff woff
  3. AddOutputFilterByType DEFLATE application/vnd.ms-fontobject application/x-font-woff
He activado KeepAlive y hay una sensible mejoría en la reducción del tiempo de descarga de algunos archivos, y reduce de media 0,4 segundos.



Jugando un poco más con la distribución de archivos estáticos podría ganar un poco de tiempo en algunos archivos, pero afectará poco creo al resultado final, unos 0,1s, 0,15s como mucho.

¿Hay más puntos donde se pueda reducir el tiempo de descarga a parte de los ya comentados?

Muchas gracias!!
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #6 (permalink)  
Antiguo 08/06/2015, 08:51
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.744
Antigüedad: 13 años, 3 meses
Puntos: 444
Respuesta: Aumentar la velocidad cuando has reducido todo
Solo te quedaría reducir el número de peticiones.
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #7 (permalink)  
Antiguo 08/06/2015, 09:08
Avatar de Uncontroled_Duck
Colaborador
  
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 12 años, 11 meses
Puntos: 261
Respuesta: Aumentar la velocidad cuando has reducido todo
Cita:
Iniciado por Tedel Ver Mensaje
Solo te quedaría reducir el número de peticiones.
Gracias Tedel,

Le daré una vuelta a los scripts a ver cual puedo unificar para la que comentas.

Saludos,
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #8 (permalink)  
Antiguo 08/06/2015, 09:11
Avatar de franciscomarin  
Fecha de Ingreso: junio-2009
Ubicación: Terrassa, BCN, CAT
Mensajes: 2.414
Antigüedad: 14 años, 10 meses
Puntos: 327
Respuesta: Aumentar la velocidad cuando has reducido todo
También puedes unificar las imágenes mediante sprites.
  #9 (permalink)  
Antiguo 08/06/2015, 09:20
Avatar de Uncontroled_Duck
Colaborador
  
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 12 años, 11 meses
Puntos: 261
Respuesta: Aumentar la velocidad cuando has reducido todo
Cita:
Iniciado por franciscomarin Ver Mensaje
También puedes unificar las imágenes mediante sprites.
Hola franciscomarin,

Pues tengo 4 imágenes en el footer, son de las mas pequeñas que usa la Web y puede que si encajen bien con un Sprite.

A veces vamos como los burros, tengo en la cabeza Sprites==Icons y no cae uno en estos detalles.

Muchas Gracias.

Saludos,
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #10 (permalink)  
Antiguo 08/06/2015, 10:22
Avatar de franciscomarin  
Fecha de Ingreso: junio-2009
Ubicación: Terrassa, BCN, CAT
Mensajes: 2.414
Antigüedad: 14 años, 10 meses
Puntos: 327
Respuesta: Aumentar la velocidad cuando has reducido todo
En realidad no solo puedes meter en un "sprite" los iconos, también puedes meter los logos, fondos, redes sociales, banners, etc. Cualquier imagen que se repita en más de una página te vale.
  #11 (permalink)  
Antiguo 08/06/2015, 10:49
Avatar de lauser
Moderator Unix/Linux
  
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 10 años, 9 meses
Puntos: 401
Respuesta: Aumentar la velocidad cuando has reducido todo
Una pregunta Uncontroled_Duck.
Manejas tu propio server o es un hosting?
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
  #12 (permalink)  
Antiguo 08/06/2015, 12:22
Avatar de Uncontroled_Duck
Colaborador
  
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 12 años, 11 meses
Puntos: 261
Respuesta: Aumentar la velocidad cuando has reducido todo
Cita:
Iniciado por franciscomarin
En realidad no solo puedes meter en un "sprite" los iconos, también puedes meter los logos, fondos, redes sociales, banners, etc. Cualquier imagen que se repita en más de una página te vale.
En este caso tengo los logos en .svg (no he probado a hacer los sprites con svg) y los iconos de las redes son de fontello.

En el caso de los fondos, no uso muchos, pero si que se podría.

Gracias!

Cita:
Iniciado por lauser
Una pregunta Uncontroled_Duck.
Manejas tu propio server o es un hosting?
Es un Shared Hosting con espacio para 20 Sites.

Me da un poco más de margen para configurar algunas cosas, pero no tengo acceso completo.

Saludos,

PD.: Empecé con 4,8s y poco a poco va bajando



Otro poco más...
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #13 (permalink)  
Antiguo 08/06/2015, 12:38
Avatar de lauser
Moderator Unix/Linux
  
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 10 años, 9 meses
Puntos: 401
Respuesta: Aumentar la velocidad cuando has reducido todo
Cita:
Es un Shared Hosting con espacio para 20 Sites.

Me da un poco más de margen para configurar algunas cosas, pero no tengo acceso completo.
Si fuera un dedicado o vps, si que podríamos profundizar un poco más.
Otra vez será......
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
  #14 (permalink)  
Antiguo 08/06/2015, 12:49
Avatar de Uncontroled_Duck
Colaborador
  
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 12 años, 11 meses
Puntos: 261
Respuesta: Aumentar la velocidad cuando has reducido todo
Pues me pondré a afinar todo lo propuesto.

Lauser, Tedel, franciscomarin muchísimas gracias por vuestro tiempo y vuestra ayuda. Me ha servido de mucho.

Doy el tema por solucionado.

Saludos,
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight

Etiquetas: aumentar, html, todo, velocidad
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 14:25.