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

Cómo agregar un campo personalizado debajo del título de una entrada
Cómo agregar un campo personalizado debajo del título de una entrada
En ocasiones puede resultar útil agregar un campo personalizado adicional justo debajo del título de una entrada o página, por cuestiones de usabilidad y experiencia…
Optimizando el código y las consultas a base de datos para mejorar el rendimiento
Optimizando el código y las consultas a base de datos para mejorar el rendimiento
Optimizar el código y las consultas a base de datos es algo fundamental para cualquier desarrollo web, sobretodo si estás desarrollando un proyecto para sitios…
Evitar la enumeración de usuarios en WordPress: bola extra
Evitar la enumeración de usuarios en WordPress: bola extra
Hace unos meses escribí en dos entradas cómo evitar la enumeración de usuarios o user enumeration (parte 1 y parte 2). Ahora viene la bola extra:…
WP-CLI Parte 1, instalación y primeros pasos
WP-CLI Parte 1, instalación y primeros pasos
1. Instalación y primeros pasos 2. Instalando WordPress y primeros pasos y configuraciones 3. Trabajando con posts 4. Trabajando con usuarios 5. Trabajando con la…