En esta guía te explicaré cómo configurar la caché del navegador en WordPress.
Una tecnología que hará mucho más rápida tu web, sobre todo a visitantes recurrentes.
Y de las tareas más importantes para tener un hosting optimizado para WordPress.
Vamos a ello.
🚀 Descarga nuestra checklist WPO WordPress gratuita, con más de 100 puntos clave a optimizar, para tener una web WordPress ultrarrápida.
¡Lo quiero!¿Qué es la caché del navegador?
La caché del navegador sirve para que el navegador almacene los archivos estáticos de la web, como imágenes, scripts, fuentes y demás.
Esto hace que estos archivos no se tengan que descargar una y otra vez en las siguientes URLs de la web que visite el usuario, ya sea el mismo día un otro.
Es importante indicarle al navegador el tiempo de caché, para que estos archivos caduquen y no sirvan archivos antiguos o modificados.
Porque además del tiempo de almacenamiento, el tiempo de caché también indica el tiempo de la última modificación, lo que le dice al navegador, que debe de descargarlo de nuevo.
Nos da las siguientes ventajas:
- La web carga más rápida en las segundas visitas.
- Ahorra recursos del hosting.
- Ahorra recursos del CDN.
- Soluciona en PageSpeed el error de "Publica recursos estáticos con una política de caché eficaz".
¿Cómo solucionar la caché del navegador en WordPress?
Vas a ver qué sencillo es solucionar la caché del navegador en WordPress.
Tiempos de cachés recomendados
Antes de nada, hay que saber qué tiempos de caché son recomendados para cada tipo de archivo, en el caso de esperar a descargarlos de nuevo, si estos no sufren modificación alguna.
Aunque esto depende de la web y del uso que se le dé, yo recomiendo los siguientes:
- HTML, XML y JSON: 0 tiempo.
- CSS y JS: 1 año.
- Imágenes de todo tipo: 3 meses.
- Fuentes: 3 meses.
Cabeceras de caché
Hay 3 cabeceras importantes para el tema de caché de archivos estáticos:
- Date: La fecha en la que el navegador descarga el archivo.
- Expires: Indica cuando expira este archivo en el navegador y es cuando este se lo debería de descargar de nuevo.
- Last-modified: Indica la fecha de su última modificación. Si este no ha sido modificado, el navegador no debe de descargarlo de nuevo.
Puedes ver estas cabeceras, analizando una petición en cualquier navegador o herramienta de medición que tenga gráfico de carga como GTMetrix.
Activar caché del navegador en el hosting
Lo primero que debes saber, es que el hosting debería de tener esta tecnología activa.
¿Debes ir antes de nada a perdírsela? No.
Antes sigue el resto de tutorial, porque seguramente lo tenga activo y solo en caso de tener problemas, hay que ir a activarlo.
Eso sí, recuerda que se debe activar para todo tipo de archivos.
Activar la caché del navegador con plugins
La mejor forma de hacerlo es activar la caché del navegador con plugins, porque te olvidas de la gestión.
En mi caso recomiendo hacerlo con WP Rocket, que es de los pocos plugins de caché que te lo pone nada más activarlo.
Te añadirá lo siguiente en el archivo htaccess:
# Expires headers (for better cache control) <IfModule mod_expires.c> ExpiresActive on # Perhaps better to whitelist expires rules? Perhaps. ExpiresDefault "access plus 1 month" # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5) ExpiresByType text/cache-manifest "access plus 0 seconds" # Your document html ExpiresByType text/html "access plus 0 seconds" # Data ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" # Feed ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/atom+xml "access plus 1 hour" # Favicon (cannot be renamed) ExpiresByType image/x-icon "access plus 1 week" # Media: images, video, audio ExpiresByType image/gif "access plus 4 months" ExpiresByType image/png "access plus 4 months" ExpiresByType image/jpeg "access plus 4 months" ExpiresByType image/webp "access plus 4 months" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # HTC files (css3pie) ExpiresByType text/x-component "access plus 1 month" # Webfonts ExpiresByType font/ttf "access plus 4 months" ExpiresByType font/otf "access plus 4 months" ExpiresByType font/woff "access plus 4 months" ExpiresByType font/woff2 "access plus 4 months" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" # CSS and JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" </IfModule>
Activar la caché del navegador con código
Puedes activar la caché del navegador con código, simplemente copiando el código anterior y pegándolo en el archivo htaccess.
Puedes hacerlo o desde el editor de archivos del hosting, desde FTP o si usas Yoast SEO, desde herramientas - editor de archivos - htaccess.
No te olvides de guardar los cambios y vaciar la caché de plugin después.
Ojo, solo si no usas otro plugin de caché o de optimización que ya lo haya agregado, así que ten cuidado.
Activar la caché del navegador con el CDN
También puedes activar la caché del navegador con el CDN, pero no lo recomiendo, a no ser que no sea posible hacerlo en el hosting o mediante plugins.
Si usas un CDN, estos también pueden cambiar las fechas de caducidad de los archivos, pero lo ideal es que el CDN respete las fechas que el servidor le manda, para que no haya líos.
Por un lado, el tiempo que el CDN almacena los archivos, y por otro, la fecha de caducidad de estos en el navegador.
Yo por ejemplo, indico en BunnyCDN que en esos dos se respete lo que diga la web.
Caché del navegador en archivos externos
Seguramente te encuentres archivos externos que no cumplan con esta directiva.
Lamentablemente no podrás solucionarlo, puesto que esta directiva es a nivel de servidor y tú no alojas esos archivos.
Una solución es alojar los archivos localmente, cosa que puedes hacer muchos de ellos.
Conclusión
Como has podido ver, la caché del navegador puede ser un calentamiento de cabeza si no sabes optimizarlo, pero sencillo de hacer cuando ya sabes de qué se trata.
Espero que la guía te sea de utilidad y si tienes alguna duda, déjame un comentario.