Caché en WordPress: cómo optimizarla, borrarla y mejores plugins
Optimizar el rendimiento de tu sitio en WordPress es clave para mejorar tanto la velocidad de carga como la experiencia del usuario. Si alguna vez te has preguntado cómo gestionar la caché de tu WordPress, en este artículo te explico las mejores prácticas y plugins para configurarlas sin ser un experto
Ya sea que estés comenzando o que tengas algo de experiencia, te aseguro que aprenderás todo lo necesario para mejorar el rendimiento de tu WordPress.
Qué es la caché
La caché es un sistema que almacena versiones estáticas del contenido de nuestras webs, lo que evita que el servidor tenga que generar la página desde cero cada vez que un usuario accede a ella.
La versión cacheada de una página web generalmente se sirve en HTML estático. Esto permite que, cuando otro usuario solicita la misma página, el servidor entregue esta versión pre-generada en lugar de volver a ejecutar los procesos dinámicos, como consultas a la base de datos o generación de contenido dinámico a través de lenguajes como PHP.
Ventajas de usar la caché
Al implementar un sistema de caché en WordPress conseguimos mejorar la experiencia del usuario y optimizar el rendimiento de tu servidor. 2 ventajas como consecuencia de las siguientes mejoras:
- Reducción de la carga del servidor: cuando habilitamos la caché, ahorramos recursos en el hosting. Esto no solo aligera el trabajo del servidor, sino que previene caídas o saturaciones en momentos de picos de tráfico. Y sí, es fundamental si te enfrentas a una caída por un exceso de visitas.
- Mejora directa en las Core Web Vitals: Google tiene muy en cuenta la velocidad y con la caché bien configurada podemos atacar directamente esas métricas que tienen un peso brutal en SEO: LCP (Largest Contentful Paint), FID (First Input Delay), y CLS (Cumulative Layout Shift). Al entregar una versión estática y cargada previamente, reducimos, por ejemplo, el tiempo en el que tu contenido "grande" se renderiza en la pantalla.
- Caché de objetos y fragmentos dinámicos: a veces no todo en una página es estático, hay bloques que cambian con frecuencia. Aquí es donde entra el uso inteligente del caché de objetos o fragmentos. De esta forma, podemos cachear solo lo necesario, sin comprometer la actualización de ciertos elementos dinámicos, como carritos de compra o notificaciones. Esto es oro puro para tiendas online que requieren eficiencia y dinamismo al mismo tiempo.
Tipos de caché
Una vez comprendidas las ventajas, vamos a empezar a indagar en este mundo más a fondo. Y para ello, debemos comprender primero los diferentes tipos de caché.
Caché del servidor
La caché del servidor es un mecanismo que permite crear y guardar versiones estáticas de los recursos de una página web (como HTML, imágenes, archivos CSS o JavaScript) directamente en el servidor. El objetivo principal de esta caché es reducir la carga en el servidor y mejorar los tiempos de respuesta, evitando la necesidad de generar contenido dinámico o realizar consultas a la base de datos cada vez que un usuario solicita una página.
Tipos de caché del servidor
Si alguna vez has hablado con tu proveedor de hosting, te habrán contado que usan tecnología Varnish o LiteSpeed, por ejemplo. Pues bien, estos son justamente los sistemas de caché del servidor, que varían en función de la naturaleza del mismo:
- LiteSpeed Cache es un sistema de caché integrado en el servidor web LiteSpeed. Funciona a nivel de servidor y es compatible con contenido dinámico y estático, lo que lo hace especialmente útil para sitios que utilizan WordPress, Magento, y otros CMS populares. Además de almacenar en caché las páginas, LiteSpeed Cache ofrece funciones adicionales como la minificación de CSS/JS, optimización de imágenes y precarga de caché, proporcionando una solución completa para mejorar el rendimiento del sitio web sin demasiada configuración.
- Varnish Cache, por otro lado, es un acelerador HTTP que opera como un proxy inverso entre el cliente y el servidor web. Está diseñado para servir contenido estático de manera extremadamente rápida, siendo ideal para sitios web de alto tráfico. Varnish utiliza su propio lenguaje de configuración, VCL, para gestionar las reglas de caché, lo que permite un control detallado sobre el contenido que se cachea.
- NGINX es un servidor web y proxy inverso que también ofrece capacidades de caché. Funciona de manera similar a Varnish al almacenar versiones cacheadas de contenido HTTP para servirlas rápidamente. NGINX es muy flexible, permitiendo configuraciones avanzadas para caché, y es ideal para sitios de alto tráfico. Además, es popular como proxy inverso que puede cachear contenido dinámico con configuraciones adicionales.
Caché de páginas
Sistema que almacena versiones estáticas de páginas dinámicas generadas por lenguajes como PHP. Esto evita que el servidor tenga que ejecutar el código cada vez que alguien accede a la página. Por ejemplo, una página de WordPress generada dinámicamente con PHP puede ser guardada como una versión estática en HTML y servida rápidamente desde la caché.
Caché de objetos
La caché de objetos es una técnica avanzada que se utiliza para almacenar resultados de consultas de bases de datos o elementos de código que requieren un procesamiento complejo, de manera que no se tengan que volver a generar repetidamente.
Por ejemplo, si en un e-commerce siempre se consulta la información de productos desde la base de datos, la caché de objetos guarda estos datos para que no haya que hacer esa consulta constantemente. De esta manera, si otro usuario pide la misma información, el servidor entrega el contenido cacheado, ahorrando tiempo de procesamiento.
Este tipo de caché es ideal para situaciones donde los elementos dinámicos se actualizan con menos frecuencia o cuando las consultas a la base de datos son costosas en términos de recursos.
Caché de archivos
Sistema que guarda copias de archivos estáticos como imágenes, hojas de estilo (CSS), y scripts (JavaScript) para que no tengan que ser procesados o recuperados repetidamente del disco o generados cada vez que son solicitados.
La caché del navegador es una técnica que permite que los navegadores web (como Chrome, Firefox, Safari, etc.) almacenen copias locales de ciertos archivos estáticos de un sitio web, como imágenes, archivos CSS, JavaScript y otros recursos. El propósito principal es mejorar la velocidad de carga y la experiencia del usuario, reduciendo la necesidad de descargar repetidamente los mismos archivos desde el servidor cada vez que se visita una página.
El funcionamiento del sistema es el siguiente: tu visitas una página web por primera vez y el navegador descarga todos los recursos necesarios (imágenes, hojas de estilo, scripts, etc.) desde el servidor. Tras ello, en futuras visitas o al navegar entre páginas del mismo sitio, el navegador puede cargar los archivos directamente desde el almacenamiento local, en lugar de volver a solicitarlos al servidor.
Caché dinámica
La caché dinámica se refiere a una técnica en la que se almacena el contenido generado dinámicamente por el servidor, en lugar de solo páginas estáticas. En este caso, la página puede tener elementos que cambian según la interacción del usuario o datos específicos, como carritos de compra, perfiles de usuario, o resultados de búsquedas personalizadas.
La caché dinámica puede convertir las páginas PHP generadas dinámicamente en WordPress, junto con sus consultas SQL a bases de datos, en versiones HTML estáticas.
Caché móvil
La caché móvil es la optimización del almacenamiento de contenido específico para dispositivos móviles, permitiendo que una versión del sitio adaptada a estos dispositivos se guarde en el servidor o en el navegador del usuario para ser cargada más rápidamente en futuras visitas.
Actualmente, no tiene sentido guardar separadamente los archivos para dispositivos móviles ya que los temas de WordPress, como ASAPTheme, son responsive. Este sistema se usaba antes cuando con temas que tenían un diseño propio para smartphone. Además, te aumenta el espacio ocupado en el hosting con esta nueva caché.
Caché de usuario
La caché de usuarios es una técnica que se utiliza para almacenar versiones personalizadas de páginas web o contenido para usuarios específicos, de modo que puedan servirse rápidamente en futuras solicitudes.
Esto es complejo de configurar y si no se hace bien puedes ocultar contenidos de un usuario a otro. Como alternativa menos arriesgada, puedes optimizar el JS y optimizar el CSS de tu sitio web.
Caché del CDN (Content Delivery Network)
Sistema que almacena archivos estáticos en servidores distribuidos geográficamente. Cuando un usuario accede a un sitio web, los archivos estáticos se cargan desde el servidor más cercano a su ubicación, reduciendo la latencia.
Cloudflare o Akamai son ejemplos de servicios CDN que almacenan y entregan contenido desde ubicaciones más cercanas a los usuarios.
Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.
¡Comienza mi curso de Screaming Frog gratis hoy!
Mejores plugins de caché para WordPress
Actualmente hay hostings que ya aplican caché mediante sistemas como Varnish. No obstante, no hacen exclusiones, ni tienen precarga de caché, por lo que es aquí donde puede venir bien implementar un plugin de caché en WordPress.
- WP Rocket (de pago pero muy potente): nos permite hacer exclusiones incluso durante la precarga de caché, lo que es útil para evitar que ciertas páginas con contenido muy dinámico se cacheen. También tiene opciones avanzadas para optimizar la caché y el rendimiento del sitio: minificación de CSS y JavaScript, carga diferida de imágenes, etc. Pero ojo, si hay una página que no se cachea, no se optimizará, lo que es algo a tener en cuenta en sitios con muchas páginas dinámicas.
- WP Super Caché (gratis y simple): es una opción excelente si buscas una solución de caché sencilla. Lo mejor de todo es que puedes hacer exclusiones de ciertas páginas para que no se cacheen, ideal para áreas dinámicas como carritos de compra o páginas de usuarios logueados. Además, tiene una función de precarga de caché, que genera automáticamente las páginas antes de que el usuario las visite, acelerando aún más la carga.
- LiteSpeed Cache (gratuito, pero depende de tu hosting): es una de las mejores opciones si tu servidor utiliza LiteSpeed. Permite hacer exclusiones de páginas que no quieres cachear, y al igual que WP Super Caché, también ofrece precarga de caché.
En relación a los plugins de caché para WordPress existe mucha controversia, por lo que me gustaría mostrar en este punto este video de Álvaro Fontela, ya que aclara muy bien este aspecto.
Activar la caché en WordPress
La caché normalmente se activa automáticamente al instalar el plugin, ya sea de WP Rocket o Lite speed. No obstante, si usas otro tipo de plugin de caché de WordPress te aconsejo verificar si hay alguna casilla de activación ya que plugins web como WP Super Caché si tienen una pestaña de activación.
Vida util de una cache
La vida útil de la caché (también conocida como TTL – Time to Live) es el período durante el cual un archivo o recurso almacenado en caché se considera válido y es utilizado por el servidor o navegador antes de que se invalide y tenga que ser generado nuevamente.
Lo podemos implementar con WP Rocket desde Ajustes > WP Rocket > Reglas avanzadas > Vida útil de la caché.
Podemos, utilizar herramientas como Cache-Control con max-age y otros atributos para definir estos tiempos de manera granular y adaptada a las necesidades de cada recurso
En cuanto al tiempo como tal para almacenar la caché, no existen un número bonito y universal sino que depende de la tipología de web. Por ejemplo, en webs más estáticas como una página corporativa, podría ser 30 días, mientras que en un E-Commerce o membresía no debería ser más de las 24 horas. De igual forma, para un blog que publique artículos semanalmente puede ser cada semana.
Excluir de la cache
Existen ciertas páginas que no debemos poner en caché ya que requieren dinamismo como el login, registro, carrito, pago y cuenta. Esto lo podemos implementar con WP Rocket desde Ajustes > WP Rocket > Reglas avanzadas > Vida útil de la caché.
Precargar la caché (precaching)
Precargar la caché (también conocida como precaching) es una técnica que consiste en generar y almacenar versiones cacheadas de las páginas o recursos antes de que sean solicitados por los usuarios.
Me explico: imagina que un usuario llega a tu web, éste visualiza el contenido sin cachear ya que es el primero. Y es en este momento cuando se produce el cacheo de la página. Tras ello, llega otro usuario para ver la misma web y justamente este segundo usuario ya ve la página cacheada, con un tiempo de carga menor.
¿Que buscamos con la precarga de la caché?
Conseguir que, en lugar de esperar a que un usuario acceda a una página para que se genere y se guarde en la caché, el sistema precargue esos recursos de manera proactiva. Esto significa que, cuando un usuario finalmente solicita la página, esta ya esté almacenada en la caché y se puede entregar instantáneamente, mejorando considerablemente el rendimiento.
Lo podemos implementar con WP Rocket desde Ajustes > WP Rocket > Precargar > Precarga de la caché.
La precarga de caché no funcionará bien sin un cron en el hosting y consumirá muchos más recursos. La creación de css sin usar no funcionar sun un cron nativo en el hosting. Tenemos que desactivar el plugin de WordPress y activar el del hosting.
Ve al administrador de archivos y localiza el archivo wp-config.php, tras ello incluye la siguiente línea:
define('DISABLE_WP_CRON', true).
Tras ello, debemos acceder al archivo wp-cron.php e incluir la línea:
*/2 * * * * wget -q -O - https://web.com/wp-cron.php?doing_wp_cron >/dev/null 2>&1
Comprobar el borrado de la caché
La forma más fácil de ver si se ha generado la caché es ir a la propia carpeta para confirmarlo. Para ello, si estas usando el plugin de WP-Rocket puedes ir a la carpeta de public_html > tu_web > wp-content > cache > wp-rocket.
Otra forma es ir en incognito a nuestra página web y ver el código fuente (escribiendo delante el comando view-source:)
Exclusiones de la caché
Debemos excluir la caché de una web aquellos contenidos o funciones dinámicas. Algunas ejemplos de estas URLs son las de login de un membership site o un carrito, una página de pago de un E-Commerce.
Lo podemos implementar con WP Rocket desde Ajustes > WP Rocket > Reglas avanzadas > Nunca poner en caché estos URLs.
Purgar siempre URLs
Imagínate que tienes un blog en el que publicas entradas periódicamente y tienes una página que lista las entradas del blog, querrás que este se purge siempre al borrar la caché para que muestre la nueva versión. Si te encuentras en esta situación, puedes seleccionar esta opción con WP Rocket desde Ajustes > WP Rocket > Reglas avanzadas > Purgar siempre estos URLs.
Borrar la caché
Deberíamos borrar la caché cuando realicemos cambios importantes en el sitio, como actualizaciones de contenido, modificaciones en el diseño, instalación o desactivación de plugins, cambios en el código, o ajustes de configuración que no se reflejan de inmediato.
Esto lo podemos hacer para una página en concreto o para toda la web.
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!