[SOLUCIONADO] Aumentar la velocidad cuando has reducido todo

Uncontroled_Duck · #1 (**permalink**) 08/06/2015, 01:27

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,

lauser · #2 (**permalink**) 08/06/2015, 01:46

Cita:

- Cacheado en el servidor.
- Habilitada la compresión desde el servidor.

Presupongo que recurriste a:

Código Apache:

Ver original<ifModule mod_expires.c>
<ifModule mod_headers.c>

Y más o menos, así:

Código Apache:

Ver original<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 604800 seconds"
ExpiresByType text/html "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
</ifModule>
 
<ifModule mod_headers.c>
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|svg|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch "\\.(js)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>
<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=604800, public, must-revalidate"
</filesMatch>
<filesMatch "\\.(html|htm|php)$">
Header set Cache-Control "max-age=1, private, must-revalidate"
</filesMatch>
</ifModule>
 
Header unset Pragma
Header unset ETag
FileETag None

Uncontroled_Duck · #3 (**permalink**) 08/06/2015, 02:09

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<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml
 
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
 
Header append Vary User-Agent env=!dont-vary
</IfModule>
 
 
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 600 seconds"
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType image/jpg "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>
<ifmodule mod_headers.c>
<filesmatch "\.(ico|svg|jpg|jpeg|png|gif|woff)$">
Header set Cache-Control "max-age=604800, public"
</filesmatch>
<filesmatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesmatch>
<filesmatch "\.(js)$">
Header set Cache-Control "max-age=604800, private"
</filesmatch>
<filesmatch "\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</filesmatch>
</ifmodule>
 
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,

lauser · #4 (**permalink**) 08/06/2015, 03:37

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 originalRewriteCond %{HTTP_USER_AGENT} libwww-perl.* 
RewriteRule .* &#8211; [F,L]
 
<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?$1
</IfModule>
 
RewriteCond %{HTTP_HOST} ^(IPdelServer(.+)$)
RewriteRule ^(.*)$ http://www.tuweb.es/$1 [R=301,L]
 
<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
  AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
  AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
  AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
  AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifModule>
 
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 300 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType image/ico "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/jpg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
 
Header set Connection keep-alive
 
<ifModule mod_headers.c> 
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|svg|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch "\\.(js)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>
<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=604800, public, must-revalidate"
</filesMatch>
<filesMatch "\\.(html|htm|php)$">
Header set Cache-Control "max-age=1, private, must-revalidate"
</filesMatch>
</ifModule>
 
Header unset Pragma
Header unset ETag
FileETag None
 
php_flag apc.cache_by_default On

Uncontroled_Duck · #5 (**permalink**) 08/06/2015, 06:03

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 originalAddType application/vnd.ms-fontobject eot
AddType application/x-font-woff woff
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!!

Tedel · #6 (**permalink**) 08/06/2015, 08:51

Solo te quedaría reducir el número de peticiones.

Uncontroled_Duck · #7 (**permalink**) 08/06/2015, 09:08

Cita:

Iniciado por Tedel

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,

franciscomarin · #8 (**permalink**) 08/06/2015, 09:11

También puedes unificar las imágenes mediante sprites.

Uncontroled_Duck · #9 (**permalink**) 08/06/2015, 09:20

Cita:

Iniciado por franciscomarin

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,

franciscomarin · #10 (**permalink**) 08/06/2015, 10:22

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.

lauser · #11 (**permalink**) 08/06/2015, 10:49

Una pregunta Uncontroled_Duck.
Manejas tu propio server o es un hosting?

Uncontroled_Duck · #12 (**permalink**) 08/06/2015, 12:22

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...

lauser · #13 (**permalink**) 08/06/2015, 12:38

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á......

Uncontroled_Duck · #14 (**permalink**) 08/06/2015, 12:49

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,