Optimizar nuestra web almacenar en caché
¿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).
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
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».
- Gtmetrix.
- Page Speed de Google.
Saber que archivos estan en cahce del navegador y por cuanto tiempo de caducidad - https://www.giftofspeed.com/cache-checker/
¿Qué tan rápido es su sitio web y qué se puede mejorar? - https://www.giftofspeed.com/
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:
- CAOS (Complete Analytics Optimization Suite)
- Perfmatters
- WP Rocket con suadd-on Google Tracking incluido.
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
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