Tengo muchos clientes que están muy nerviosos con este indicador, se quedan muy preocupados cuando bajan puntos. La velocidad a la que carga la web es un componente importante para el posicionamiento, y este es el indicador "oficial" de Google de si tu página es lenta o rápida. Google PageSpeed Insights lleva varios años funcionando, aunque Google cambió hace poco la herramienta con la que hace las mediciones, ahora es Lighthouse. Da rankings distintos para la versión desktop y la mobile de la web, del 1 al 100.
El problema de PageSpeed es su extraña manera de medir las cosas, que hace que con simples trucos aumentes muchos puntos en el indicador. Esto ha dado pie a que CMS tipo Wordpress, con sus pesadas plantillas premium y la sobrecarga de plugins habitual, puedan dar una nota decente en este indicador. Ya que haciendo cuatro cosas puedes subir de 12 a 60, por ejemplo, sin despeinarte.
Yo voy a dar una lista de cosas que me han funcionado personalmente y cosas que no.
Cosas que funcionan y todos ya conocemos
Imágenes con poco peso: Las plantillas actuales y la moda del full width hace que se carguen imagenes enormes. No hay mucho más que decir, hay que bajar peso en las mismas.CSS y JS minificado y a ser posible combinados en pocos ficheros (incluso solo en 2, uno para todo el css y otro para todo el js).
Usar https y habilitar varias cosas en el .htaccess: La compresión GZIP, el "Expires Caching" y el "Expires Headers".
## EXPIRES CACHING ##Solo con esos tres puntos (imagenes, minificación y htaccess) ya subes muchos puntos en el indicador sin problemas.
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=Edge,chrome=1"
<FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svg|svgz|ttf|vcf|webm|webp|woff|xml|xpi)$">
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>
## EXPIRES HEADERS ##
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 year"
# Data interchange
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
# Favicon (cannot be renamed!)
ExpiresByType image/x-icon "access plus 1 week"
# HTML components (HTCs)
ExpiresByType text/x-component "access plus 1 month"
# HTML
ExpiresByType text/html "access plus 0 seconds"
# JavaScript
ExpiresByType application/javascript "access plus 1 year"
# Manifest files
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Media
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# Web feeds
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
# Web fonts
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
</IfModule>
## GZIP ## AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Y además...
Al igual que vigilas el peso de las imagenes, habría que hacer lo propio con los "megacomponentes", como por ejemplo el Revolution Slider; si realmente quieres subir puntos, habría que sustituirlo por otro componente similar de menos peso.Ojo con las fuentes de letra, ya sean de Google o locales. Muchas plantillas traen un juego de fuentes muy amplio para que la plantilla se vea más bonita y mejor diseñada. Tanta carga de fuente penaliza. Se debe reducir lo más posible el numero de fuentes y el numero de variaciones de cada fuente. Por ejemplo:
<link href="http://fonts.googleapis.com/css?family=Poppins:400,400i,500,500i,600,600i,700,700i%7CDroid+Serif:400,400i,700,700i%7CLora:400,400italic,700,700italic" rel="stylesheet" type="text/css">Fuera todas las itálicas y los pesos intermedios. Las itálicas las va a seguir haciendo igualmente sin tener una fuente específica para ello.
<link href="http://fonts.googleapis.com/css?family=Poppins:500,700%7CDroid+Serif:500,700" rel="stylesheet" type="text/css">
Usar un buen plan de hosting. Y los caches: a los habituales de web o de servidor, puedes unir una CDN, por ejemplo Amazon CloudFront, que no deja de ser otro caché más, ya que se trata de cachés de tu web que quedan puestos a lo largo de una red mundial, lo que hace que tu web cargue muy rápido a usuarios de cualquier parte del mundo. Evidentemente, es un servicio de pago.
Para páginas con mucho texto, una técnica que permite mejorar en el ranking es tener versiones AMP de las páginas.