Cómo solucionar los errores Leverage Browser Caching en WordPress

Cuando revisas la velocidad de tu web con herramientas como GTMetrix, Pingom, Google PageSpeed o Think with Google es bastante habitual ver un aviso sobre errores de Leverage Browser Caching, con una lista de elementos que provocan tales errores, normalmente scripts.

Si no sabes cómo solucionar estos errores y, en consecuencia, acelerar tu web, vamos a ver qué son y cómo se solucionan.

¿Qué es el aviso de errores de Leverage Browser Caching?

think-with-google-leverage-browser-cache

El aviso de leverage browser caching se refiere a la cache de tu navegador, y es que cada vez que visitas una web descarga un montón de recursos, como imágenes, HTML, CSS y JavaScript en la cache local de tu navegador.

La idea, buena, es que así no tendrás que volver a descargarlos para mostrarlos cada vez que vuelvas a cargar esa página.

El error de Leverage Browser Caching lo que viene a decirte es que tu servidor, u otro, no tiene incluidas las cabeceras de HTTP correctas, o que aún estando no están bien configuradas debido a que el tiempo de almacenamiento en cache es demasiado corto.

Soluciones a los errores de Leverage Browser Caching en WordPress

gtmetrix-leverage-browser-cache

Dependiendo de los resultados de los errores observarás que hay varias cosas a solucionar.

Los errores más comunes suelen ser de servidores mal configurados, que son los fáciles de solucionar, pero por otra parte están los que nos dejan helados, como los errores por scripts de Google Analytics o de otros scripts que creemos imprescindibles, además de alguna sorpresa más.

En cualquier caso siempre es instructivo analizar los errores de Leverage Browser Caching, así que vamos a ver los más comunes y sus soluciones.

Leverage Browser Caching en el servidor

leverage-browser-caching-servidor-propio

Como he dicho, los más comunes son los errores provocados por elementos alojados en tu servidor, y se refieren normalmente a que no se ha definido la expiración.

Has de saber que a la hora de cachear contenido se suelen usar dos métodos principalmente: Cache-Control headers and Expires headers.

Cache-Control funciona en la cache del cliente y establece el recurso de la edad máxima de los recursos, mientras que Expires header se utiliza para especificar un punto específico en el tiempo a partir del cual el recurso ya no será válido.

Huelga decir (o no) que no hay que añadir ambas cabeceras, ya que sería redundante. Cache-Control es un método más nuevo y normalmente es el método recomendable, aunque hay herramientas de análisis de rendimiento, como GTMetrix, que aún comprueban las Expires Headers.

leverage-browser-caching

Así que nos toca aprender como se añaden estas cabeceras a tu servidor. Por supuesto, los códigos que vamos a ver son ejemplos, que no debes copiar tal cual, sino decidir sobre qué tipos de archivo, tiempos de expiración, etc., debes ajustar a tu web.

Importante: Por supuesto, antes de modificar el archivo config de Nginx o .htaccess de Apache haz una copia de seguridad del mismo, por si las moscas. También, si no sabes si tu servidor funciona con Ngix o Apache revisa la configuración del alojamiento o pregunta a tu proveedor.

Añadiendo la cabecera Cache-Control en Nginx

Añade lo siguiente, adaptado a tus necesidades, al archivo config de Ngix de tu servidor:

Añadiendo Expires Headers en Nginx

Para usar Expires en Nginx añade lo siguiente a tu config:

Añadiendo cabeceras Cache-Control en Apache

En este caso las añadimos al archivo .htaccess de tu servidor:

Añadiendo Expires Headers en Apache

Igualmente, lo añadimos al archivo .htaccess:

 

Para comprobar las cabeceras, y asegurarte de que ya va todo bien, puedes usar las herramientas de desarrollo o inspector de tu navegador, o echando de nuevo un vistazo a tu herramienta de análisis de velocidad favorita.

Leverage Browser Caching y Google Analytics

El otro error más común de Leverage Browser Caching suele ser Google Analytics.

Lo sé, suena casi a cachondeo que estés viendo lo optimizada que está tu web en PageSpeed de Google y precisamente sea LA herramienta de Google la que genere errores y problemas de optimización de tu web.

Pero la cuestión es ¿se puede arreglar? A fin de cuentas uno quiere saber, y Google también, quien te visita, qué hace, con qué frecuencia, etc.

Pues la única medio solución es alojar el script de Google Analytics en tu servidor, algo que a Google no le gusta, pero funcionar funciona.

Para lograrlo te puedes servir de un plugin llamado Complete Analytics Optimization Suite, que precisamente permite, entre otras cosas, que alojes localmente el archivo analytics.js de Google Analytics, actualizándolo usando wp_cron().

ajustes-plugin-caos-local-analytics

Los beneficios de alojar localmente tu script de Google Analytics es que reduces las peticiones HTTP hacia Google a la mitad, además de tener un control total del archivo, lo que significa que puedes aplicarle las reglas de cache en cabeceras que hemos visto antes.

El funcionamiento del plugin es sencillo, lo instalas y activas, le pones en los ajustes tu ID de seguimiento de Google Analytics y el plugin hace todo lo demás: añade el código de seguimiento a tu WordPress, descarga el archivo analytics.js en tu servidor y lo actualiza usando un script programado en wp_cron().

Eso sí, no uses este plugin conjuntamente con otros plugins de Google Analytics, por mucho que te gusten, o no funcionará.

Leverage Browser Caching y las redes sociales

Otros elementos que suelen dar error son los relativos a redes sociales como Facebook y Twitter, ya que rara es la web que no tiene un widget para mostrar los últimos tuits o para darle al me gusta en su página de Facebook, y claro, todos estos scripts, para mostrar los seguidores y tuits en tiempo real ralentizan la carga de tu web mientras realizan las comprobaciones.

La solución igual no te gusta pero pasa por evitar este tipo de plugins y widgets. Si quieres mostrar los seguidores pon una imagen y enlázala a tus perfiles, punto. Casi nunca merece la pena mostrar tuits en tiempo real.

Leverage Browser Caching y Google Maps

Similar, pero peor, es el caso de Google Maps, pues requiere que varios scripts identifiquen si el usuario que ve el mapa está conectado a su cuenta de Google y a cual, determina su ubicación, mapas guardados, y más cosas.

Este tipo de elementos cada vez se usan más en las webs corporativas, sobre todo en la página de contacto, pero en realidad no aportan mucho más allá del aspecto.

¿Solución? No hay arreglo directo posible, pero lo que he visto en muchos sitios, y consigue el resultado, es sustituir el script que cargue el mapa en tiempo real por una captura del mismo enlazada a la URL de Google Maps de la ubicación en cuestión.

El usuario al hacer clic abrirá la ubicación, en su aplicación de mapas incluso si es desde un móvil, con lo que ofreces la funcionalidad al mismo tiempo que optimizas la web.

¿Y el resto de scripts?

Hay otro buen montón de posibles scripts externos que puedes estar usando. Hablo de códigos de servicios de newsletters, servidores de anuncios y mil cosas más.

Aquí tendrás que decidir si la funcionalidad que te aportan merece la pena como para comprometer el rendimiento y tiempos de carga de tu web.

Resumiendo

leverage-browser-caching

Como habrás visto, es posible reducir los errores de Leverage Browser Caching, y optimizar tu web al máximo posible, pero también recuerda que no debes tomarte al pié de la letra las recomendaciones y resultados de estos analizadores de velocidad.

Y, sobre todo, que debes decidir en cada caso qué ganas y qué pierdes, antes de cambiar los tiempos de expiración de un recurso o eliminarlo.

Pero sí que es bueno que al menos apliques algunas de las técnicas aquí vistas, pues la realidad es que mejorarás el rendimiento de tu web y tu WordPress irá más rápido.

Si sabes algún otro truco para reducir errores de Leverage Browser Caching nos lo cuentas en los comentarios.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (17 votos, promedio: 4,35 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Los burócratas de la UE me exigen que te diga que si visitas este blog recibirás cookies. Aquí no hay cookies de publicidad, como las que sí te dejan Google, Amazon y otros sin avisar, pero soy yo el que te tengo que avisar. WTF!. Las cookies de este blog son para facilitarte la navegación, compartir y comentar. Si no las quieres puedes navegar en modo privado, abandonar este blog y perderte el contenido gratis que comparto a diario, o irte a una isla desierta para vivir aislado del mundo, eso sí, sin cookies. O sino, cierra esta ventana coñazo y disfruta del blog. Si tienes curiosidad sobre esto de las cookies te dejo un enlace >> MÁS INFORMACIÓN

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar