Aumentar la puntuación de tu web en PageSpeed Insights
Mientras creamos un blog, ya sea con WordPress o con cualquier otro CMS, uno de los apartados que más nos tiene que preocupar es el rendimiento de nuestra página, no solo para el usuario, cuya conexión influye, sino el hecho de como está escrito el código del tema (ya sea nuestro o de un tercero), lo cual influye en el rendimiento general de la página.
Una de las herramientas más potentes para puntuar el rendimiento de nuestra página es el PageSpeed Insights de Google, un analizador muy estricto el cual mide el rendimiento por separado en móviles y ordenadores. Al realizar el test se puntuará nuestra página de 0 a 100, siendo 85 el valor mínimo para que la página tenga un rendimiento bueno. Aumentar esta puntuación muchas veces es arduo pero con esta serie de consejos lo conseguirás:
JS y CSS
Es uno de los problemas más comunes, PageSpeed nos indica que JS y CSS bloquea la visualización. Para el analizador lo que debería ocurrir es que en nuestra página no se carguen archivos CSS y JS hasta que todo el HTML esté cargado. Recomienda pues localizar las etiquetas <link> y <script> al final de la página justo antes de cerrar la etiqueta </html>.
Problema
El problema llega que hasta que los estilos no se carguen, nuestra web se mostrará sin estilo por lo que no queda bonito de cara al usuario. Para ello podríamos presentar las siguientes soluciones:
Solución
Podrías insertar el código CSS más importante y básico mediante la etiqueta <style> para mostrar tu página de forma correcta hasta que se carguen los estilos más avanzados. Para los archivos JS puede colocarlos en el <head> solo si utilizas el atributo async el cual indicará al navegador que no cargue ese JS hasta el final de la página.
Habilitar compresión
Para habilitar la compresión podemos (y es recomendable) hacerlo a través del .htaccess. Para ello utilizaremos este código:
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_item_include file .html$
mod_gzip_item_include file .php$
mod_gzip_item_include file .css$
mod_gzip_item_include file .js$
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include handler ^application/x-httpd-php
</IfModule>
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xmlNo todos los servidores disponen del compresor gzip por lo que primeramente utilizamos un <IfModule> cuyo contenido solo se leerá si tenemos dicho módulo. En caso contrario tenemos Deflate, otro compresor que viene por defecto con Apache.
Especificar caché de navegador
Utilizamos el caché para aumentar la velocidad de carga de nuestra web ya que esta se guarda en el ordenador. Suena muy bien pero es uno de los apartados más delicados y es que especificar el caché no siempre es bueno. Si tenemos un blog en el que cada día se publican cuatro posts si tenemos la página almacenada en el caché, un usuario cuando entre no verá los cuatro posts de hoy sino los de la última vez que entró.
Personalmente pondría este código en tu .htaccess como base:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 month"
</IfModule>En caso que el tema que estes utilizando sea una versión final añadiría:
ExpiresByType text/css "access 1 month"
ExpiresByType text/x-javascript "access 1 month"Si tu web es estática añadiría por último:
ExpiresByType text/html "access 1 month"En caso de que nuestra web utilizara fuentes (sea en archivo .woff como en cualquier otro) añadiría este código antes del IfModule del caché:
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
# Compress compressible fonts
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
ExpiresActive on
# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
# Fuente del código: http://stackoverflow.com/questions/13429540/setting-expire-headers-for-fonts-not-workingMinificar
Cuando escribimos un archivo, .css por ejemplo, este está lleno de espacios que aunque parece que no es lo que hace aumentar el tamaño del archivo. Para ello existe minificar que consiste en eliminar todo espacio en blanco y mostrar el código en una linea. Aunque hay plugins para minificar, no funcionan del todo bien y lo más recomendable es siempre utilizar un minifcador online.
Refresh-SF
Personalmente recomiendo Refresh-SF ya que es una herramienta muy completa ya que puedes minificar archivos HTML, CSS y JS.
Recursos utilizados: GoogleEsSimple | Juan Luis Mora