Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
google pagespeed insights

Mejora la puntuación de Google PageSpeed Insights: Especificar caché de navegador

 

Tercera entrada sobre cómo mejorar la puntuación en PageSpeed Insights. En esta ocasión hablaremos sobre cómo especificar caché de navegador.

Para el ejemplo que estoy utilizando y que expuse en la primera entrada, el resultado del test de PageSpeed es el siguiente:

Especificar caché de navegador
Establecer una fecha de caducidad o una edad máxima en las cabeceras HTTP de los recursos estáticos indica al navegador que cargue los recursos descargados previamente del disco local en lugar de hacerlo a través de la red.
Aprovechar el almacenamiento en caché del navegador de estos recursos almacenables en caché:
• https://midominio.com/css/bootstrap.css (no se ha especificado el tiempo de expiración)
• https://midominio.com/css/font-awesome.css (no se ha especificado el tiempo de expiración)
• https://midominio.com/css/styles.css (no se ha especificado el tiempo de expiración)
• https://midominio.com/img/vialactea2.jpg (no se ha especificado el tiempo de expiración)
• https://midominio.com/js/bootstrap.js (no se ha especificado el tiempo de expiración)
• https://midominio.com/js/jquery-3.1.1.js (no se ha especificado el tiempo de expiración)
Fuente: Google PageSpeed Insights

Parafraseando a mi amigo Fernando Puente: La caché funciona la segunda vez. Es decir, el almacenamiento de recursos estáticos en caché de navegador puede ahorrarle al usuario tiempo de carga si este visita tu sitio en más de una ocasión. La primera vez se descarga y se cachea, y a partir de la segunda visita el recurso viene de la caché del navegador.

Podemos indicar al navegador que cachee los recursos estáticos de tu web como: CSS, JS, imágenes, PDFs, archivos multimedia, etc…

 

¿Cómo cacheamos los recursos estáticos?

En WordPress existen multitud de plugins de caché, que entre otras muchas cosas, especifican caché de navegador para nuestros recursos estáticos como pueden ser W3TC, o WP Super Cache.

Por ejemplo, W3TC lo que hace es escribir en el archivo .htaccess las siguientes reglas:

Aun así, es posible que sigamos sin pasar esta regla en PageSpeed, ya que es muy probable que en nuestro sitio estemos cargando recursos externos como pueden ser imágenes de gravatar, el código de Google Analytics, banners de afiliados, etc…

recursos externos

No tenemos control sobre estos archivos ya que no están en nuestro servidor, y como puede verse en el ejemplo, la imagen de gravatar expira cada 5 minutos, y el código de google analytics cada 2 horas.

Podemos descargarnos estos archivos a nuestro servidor o utilizar un plugin como CAOS Complete Analytics Optimization Suite para Analytics ó FV Gravatar Caché para la imagen de Gravatar, y ya estarían bajo nuestras reglas.

Puede que también te interese

Creando un plugin para WordPress parte 3: Escribiendo el plugin
Creando un plugin para WordPress parte 3: Escribiendo el plugin
1. Creando un plugin para WordPress: Planificación y planteamiento 2. Creando un plugin para WordPress: Estilo del Código 3. Creando un plugin para WordPress: Escribiendo…
Seguridad WordPress: cambiar el prefijo wp_ de la base de datos
Seguridad WordPress: cambiar el prefijo wp_ de la base de datos
Siguiendo la máxima de no dar facilidades a un posible atacante, una recomendación antes de instalar un WordPress es cambiar el prefijo de la base…
Cómo solucionar la pantalla blanca de la muerte en WordPress
Cómo solucionar la pantalla blanca de la muerte en WordPress
La WSOD (White Screen of Death o pantalla blanca de la muerte) es uno de los errores más comunes en WordPress. Identificaremos que nos encontramos…
Crea tu propio motor de búsqueda para WordPress
Crea tu propio motor de búsqueda para WordPress
En este artículo vamos a ver cómo personalizar la búsqueda en WordPress, creando nuestro propio motor de búsqueda para adaptarlo a nuestras necesidades. Por defecto el…