Optimizar nuestra web almacenar en caché

Fecha Publicación:       24 de Mayo de 2020
Fecha Modificación:       15 de Abril de 2023

¿Qué es la caché?

 →  La caché es un almacenamiento que se usa para guardar contenidos que se van a usar más veces, para poder acceder a ellos de manera más rápida. Si mi navegador no tiene que ir a Internet a buscar ciertos contenidos, la navegación por la página será más rápida.

 →  Existe caché del servidor, y caché del navegador. Esta última es la que nos interesa hoy, y se guarda en los ordenadores de cada usuario. Dentro de lo que se guarda, en este caso nos vamos a centrar en los contenidos estáticos, es decir principalmente imágenes, ficheros de estilo (css) y ficheros con scripts (javascript).

 →  En pocas palabras, el almacenamiento en caché del navegador permite que tu sitio le diga al navegador de un visitante que guarde ciertos archivos en el ordenador local del visitante  ( Imagenes ,Videos, Fonts , CSS, JavaScript ,etc) y cargue esos archivos locales para las siguientes visitas, en lugar de descargarlos de tu servidor en cada carga de la página.

 →  Una caché es una capa de almacenamiento que almacena copias temporales de datos o archivos de una solicitud, para que las futuras solicitudes puedan acceder a ese contenido más rápidamente.

Al eliminar la necesidad de descargar el archivo cada vez, puedes acelerar los tiempos de carga de tu sitio y reducir el uso del ancho de banda.

Veamos un ejemplo…

Supongamos que quieres controlar el comportamiento de la caché del navegador para los archivos de imagen PNG en tu sitio. Si establece las cabeceras de caducidad para los archivos PNG igual a un mes, esto significa que el navegador de un visitante hára lo siguiente:

  • Cargar la versión ya descargada desde la caché durante un mes después del acceso/descarga inicial.
  • Volver a descargar ese archivo del servidor después de un mes.

Puedes establecer diferentes cabeceras de caducidad para diferentes tipos de archivos, lo que te da un control granular sobre el almacenamiento en caché del navegador de tu sitio.

Saber qué archivos web en un sitio web se almacenan en caché y cuáles no y comprobar por qué método se almacenan en caché estos archivos y cuál es el tiempo de caducidad de los archivos almacenados en caché

→  La herramienta online cache checker     Esta herramienta enumera qué archivos web en un sitio web se almacenan en caché y cuáles no. Además, comprueba por qué método se almacenan en caché estos archivos y cuál es el tiempo de caducidad de los archivos almacenados en caché.

→  https://www.giftofspeed.com/       Es otra herramienta que nos ofrece la misma empresa para medr la velocidad ¿Qué tan rápido es su sitio web y qué se puede mejorar?    

Analizando la web con Google PageSpeed Insights

Cuando hacemos un test en Google PageSpeed Insights  , nos indica la siguiente recomendación sobre las mejoras de contenido estático:

Publica recursos estáticos con una política de caché eficaz 
Publica elementos estáticos con una política de caché eficaz

 

 

Google se está quejando que esta caché, para estos ficheros, no está configurada de manera óptima.

Especificar correctamente los tiempos que se guardan estos ficheros es importante. Porque si no se definen estás obligando al usuario a ir a buscarlos a la web cada vez que se necesitan (lento e innecesario). Si los defines con un tiempo demasiado grande no se renovarán y los usuarios no verán cambios en tu web.

 

Una duración en caché más larga puede aumentar el número de visitas repetidas a tu página. Más información

En realidad lo que nos quiere decir es que para mejorar la experiencia de usuario a la hora de cargar la web, el contenido estático como imágenes, hojas de estilo y javascript le podemos indicar una fecha de expiración para que no se cargue cada vez que el usuario accede a la página. hay dos opciones, desde PHP o desde htacces. La primera opción te va permitir decir que páginas quieres que se aplique, en la segunda y más recomendable se aplicará a todo el conjunto de páginas.

Herramientas en las que puedes cambiar la configuración de la caché en WordPress

Cómo Añadir cache de Caducidad con CDN Cloudflare

Nota: Cache Analytics de Cloudflare solo está disponible en sus planes pagos: Pro, Business y Enterprise.

Este CDN es uno de los más conocidos y tiene su propio vencimiento de la caché del navegador donde puedes cambiar la configuración. Solo tienes que seguir estos pasos:

  • Iniciar sesión en Cloudflare
  • Dirígete a Caching y posteriormente selecciona Browser Cache TTL
  • Una vez ahí cambia la configuración a 6 meses

Cómo Añadir Cabeceras de Caducidad con un Plugin de WordPress

Si ya tienes la caché resuelta y solo quieres un plugin más específico, dos buenos plugins gratuitos son:

→  El plugin Leverage Browser Caching no tiene ninguna configuración – solo tienes que activarlo y empieza a funcionar de inmediato.

→  El plugin Add Expires Headers te permite controlar las cabeceras de caducidad para diferentes tipos de archivos – puedes hacer estas elecciones desde la nueva área Add Expires Headers en tu panel de control de WordPress:

Cómo Añadir cache de Caducidad con el archivo htacces

CSS en cache, js en cache, imagenes en cache

<IfModule mod_expires.c>
  ExpiresActive On

 # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/webm "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # Fonts
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/otf "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"

  # Others
  ExpiresByType application/pdf "access plus 1 year"
  ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

Referencia: https://gtmetrix.com/serve-static-assets-with-an-efficient-cache-policy.html

Concepto:

  • ExpiresActive: Por defecto su valor es off, con el valor ‘on’ activamos el módulo mod_expires.
  • ExpiresDefault: Definimos el tiempo por defecto a cachear y que no haya sido cacheado con otra regla de ExpiresByType.
  • ExpiresByType: Definimos el tipo de contenido con su cacheo propio

En la directiva ExpiresDefault se puede definir los siguientes tiempos:

  • ExpiresDefault A3600           una hora
  • ExpiresDefault A604800       para una semana
  • ExpiresDefault A2592000     para un mes
  • ExpiresDefault A9030400     para un Año

El tiempo se expresa en AXXX, donde XXX son los segundos que posee el intervalo.

* Otra manera es usando los siguientes intervalos:  years, months, weeks, days, hours, minutes, seconds

  • ExpiresDefault  "access plus 0 seconds"         
  • ExpiresDefault  "access plus 2 weeks"
  • ExpiresDefault  "access plus 2 months"
  • ExpiresDefault  "access plus 6 months"
  • ExpiresDefault  "access plus 1 year"

Nota : si ponemos 0 segundos de chaché  (no cachear),  

¿Qué se considera una política de caché eficiente?

→  Establecer  una política de caché de poco más de 3 meses.

→ Si sus archivos estáticos no cambian (o tiene una estrategia adecuada para la prevención de caché), le recomendamos que establezca su política de caché en 6 meses o 1 año.

→  Para sitios web completos, cosas como archivos CSS/JS globales, logotipos, imágenes, etc., generalmente no cambian mucho, por lo que 6 meses o 1 año es una buena caducidad de caché para trabajar.

→  Por supuesto, si cambia los archivos estáticos anteriores con frecuencia, puede optar por una caducidad de caché más baja siempre que sea superior a 3 meses.

Referencia : https://gtmetrix.com/serve-static-assets-with-an-efficient-cache-policy.html

¿Cómo comprobar el resultado de los cambios realizados?

Para comprobar si tus cabeceras de caducidad están bien configuradas, puedes utilizar esta herramienta gratuita de GiftOfSpeed. Una vez que introduzcas la URL de tu sitio, la herramienta te dirá dos cosas:

  • La duración de la caché para todos los archivos de tu sitio.
  • El tipo de caché (debería decir Cabeceras de Caducidad, ya que este es el método que usaste, pero también podrías ver cache-control dependiendo de la configuración de tu sitio).

También puedes ejecutar tu sitio a través de cualquier herramienta de prueba de velocidad que estés utilizando (por ejemplo, GTmetrix) y comprobar si sigues viendo el mensaje «Añadir Cabeceras de Caducidad».

Cómo Añadir Cabeceras de Caducidad para Scripts Externos

Los métodos que te mostramos anteriormente te permitirán controlar las cabeceras de caducidad de todos los archivos del servidor de tu sitio WordPress. Sin embargo, estos métodos no te permiten controlar las cabeceras de caducidad de los scripts de terceros que puedas cargar, como Google Fonts, Google Analytics, etc.

Por esta razón, algunas herramientas de prueba de velocidad podrían marcar esto como un problema potencial incluso si ya has implementado las cabeceras de caducidad a través de los métodos anteriores.

Aquí tienes algunas soluciones para los scripts más comunes de terceros…

Cómo Añadir Cabeceras de Caducidad a Google Fonts

Muchos sitios de WordPress dependen de Google Fonts para las fuentes personalizadas. Esto suele implicar la carga de las fuentes desde el CDN de Google, lo que significa que no podrás establecer las cabeceras de caducidad a través de la configuración de tu servidor.

Una solución fácil es alojar los archivos de fuentes localmente, en lugar de depender del CDN de Google. Para ello, puedes utilizar el plugin gratuito Optimize My Google Fonts (OMGF) en WordPress.org.

También puedes consultar nuestra guía completa sobre el alojamiento local de fuentes en WordPress para saber más sobre los pros y los contras de este enfoque.

Cómo Añadir Cabeceras de Caducidad a Google Analytics

Si observas problemas relacionados con el almacenamiento en caché del navegador y con Google Analytics, también puedes considerar la posibilidad de alojar localmente el script de Google Analytics, tal y como te mostramos con Google Fonts.

Aquí tienes algunos plugins de WordPress que facilitan la tarea:

JavaScript inyectado de Cloudflare

Me sorprendió mientras miraba un sitio que usaba Cloudflare CDN para ver una pieza de JavaScript analizandolo con GTMetrix  ,  que no había encontrado antes:

Serve static assets with an efficient cache policy

/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js

→ Ver el tutorial completo  JavaScript inyectado de Cloudflare

Nota : si esta usando Cloudflare no te olvide de limpiar cache cuando implementes una politica de cache Limpiar cache en cdn cloudflare    https://www.youtube.com/watch?v=fYb7KqHCg9c

 

Referencia:

https://ayudawp.com/caches-wordpress/

https://kinsta.com/es/base-de-conocimiento/anadir-cabeceras-expiradas-wordpress/

https://gtmetrix.com/serve-static-assets-with-an-efficient-cache-policy.html

 

 

Articulo : 3012 - Veces Leidas
Compartir Articulo: