Una de las características de un sitio web fácil de usar es que no hace esperar demasiado a los visitantes mientras se carga. Almacenar recursos estáticos en caché es fundamental para mejorar el rendimiento del sitio, pero no basta con configurarlo y olvidarse. Sin una política eficiente de caché de WordPress, puede resultar difícil ofrecer tiempos de carga rápidos.
Por suerte, aprender a aprovechar la caché del navegador en WordPress es más fácil de lo que imaginas. Puedes configurar la caché del navegador manualmente, y el sistema de gestión de contenidos (CMS) también te permite utilizar herramientas que lo hagan por ti.
En este artículo explicaremos cómo funciona la caché del navegador y cuáles son sus ventajas. También te mostraremos cómo comprobar si la caché está activada en tu sitio y veremos distintas formas de habilitarla.
¿Qué es la caché del navegador?
La caché del navegador es un proceso que guarda copias de los elementos de un sitio web en tu ordenador. Cuando visitas un sitio, el navegador descarga distintos tipos de contenido, como imágenes y texto. En lugar de descargarlo cada vez que visitas el sitio, el navegador «guarda en caché» o almacena parte de ese contenido por si lo necesitas más adelante.
La próxima vez que visites el sitio, el navegador comprobará qué elementos están almacenados localmente. Después, los cargará desde la caché en lugar de solicitarlos al servidor del sitio. Esto puede hacer que la página se cargue mucho más rápido, según la cantidad de recursos almacenados en caché.
Si revisaras ahora mismo la caché de tu navegador, probablemente encontrarías en ella varios cientos de megabytes de archivos. La mayoría de los navegadores modernos te permiten consultar un resumen de los archivos almacenados en caché desde los ajustes de privacidad.
El navegador no puede decidir por sí solo qué debe guardar en caché. Para aprovechar la caché del navegador en WordPress, tendrás que configurar tu sitio web o servidor para que se lo indique. Esto significa que tu sitio controla qué recursos almacena el navegador en caché y durante cuánto tiempo.
¿Qué ventajas tiene almacenar recursos estáticos en caché?
La principal ventaja de la caché del navegador es que puede ayudar a los visitantes a cargar las páginas más rápido cuando vuelven a tu sitio. Hablamos de «recursos estáticos» porque no es posible almacenar en caché todos los elementos de un sitio web.
Los recursos dinámicos son elementos que cambian cada vez que cargas una página. Por ejemplo, si inicias sesión en una aplicación que muestra un feed de publicaciones en tiempo real, como Twitter o Instagram, esos recursos son dinámicos.
Como los recursos dinámicos pueden cambiar con frecuencia, almacenarlos en caché podría no servir de nada. Al fin y al cabo, la próxima vez que inicies sesión en Twitter o Instagram verás publicaciones completamente nuevas.
La caché ofrece los mejores resultados cuando se limita a los recursos estáticos. Aprender a servir recursos estáticos con una política de caché eficiente en WordPress puede aportar varias ventajas:
- Reducción del uso del ancho de banda. Como los recursos almacenados en caché se cargan desde el almacenamiento local, se transfieren menos datos entre el servidor y el dispositivo del visitante. Esto ayuda a quienes tienen planes de Internet limitados a reducir el consumo de datos.
- Reducción de la carga del servidor. Cuando los navegadores utilizan recursos almacenados en caché, el servidor recibe menos solicitudes de esos archivos. Esto reduce su carga de trabajo y puede ayudar a evitar que se sobrecargue durante los periodos de mucho tráfico.
- Navegación parcial sin conexión. En algunos casos, almacenar recursos estáticos en caché permite a los visitantes acceder a ciertas partes de un sitio web incluso sin conexión. Si el navegador ya ha guardado los archivos necesarios en caché, puede mostrar el contenido sin necesidad de una conexión activa a Internet.
Almacenar recursos estáticos en caché te permite aprovechar mejor los recursos del servidor y mejorar la experiencia de los visitantes. Para ello, se indica al servidor qué recursos debe pedir a los navegadores que guarden en caché.
Cómo comprobar si la caché del navegador está activada en tu sitio
La forma más sencilla de comprobar si un sitio web utiliza la caché es recurrir a las herramientas para desarrolladores del navegador, como las de Firefox y Google Chrome. Este método requiere examinar algo de código, pero no necesitas ser desarrollador para entenderlo.
Para hacerlo en Google Chrome, visita el sitio web que quieras comprobar, haz clic con el botón derecho en cualquier parte de la página y selecciona la opción Inspeccionar. Se abrirá la pestaña de herramientas para desarrolladores del navegador, que debería tener este aspecto:
Haz clic en la pestaña Red. Si aparece una lista vacía, tendrás que volver a cargar la página con la pestaña de herramientas para desarrolladores abierta. La pestaña Red mostrará todas las solicitudes y recursos que carga el navegador al acceder a la página.
El elemento que nos interesa debería ser el primero de la lista. En nuestro caso, es Jetpack.com, y contiene los encabezados de la página. Selecciona ese archivo para abrir una nueva pestaña a la derecha que te llevará directamente a la sección Encabezados.
Algunos encabezados indican si el sitio utiliza la caché y cómo está implementada. Son los siguientes:
- Cache-Control. Este encabezado especifica directivas de caché, como max-age (el tiempo máximo durante el que un recurso se considera reciente) o no-cache (obliga a las cachés a enviar la solicitud al servidor de origen para validarla antes de proporcionar una copia almacenada).
- Expires. Este encabezado proporciona una fecha y hora de caducidad para el recurso. A partir de ese momento, el recurso se considera obsoleto y el navegador vuelve a validarlo.
- ETag. Este encabezado es un identificador de una versión concreta de un recurso. Cuando el recurso cambia, la ETag también lo hace, lo que permite a los navegadores determinar si un recurso almacenado en caché sigue siendo válido.
- Last-Modified. Este encabezado indica la fecha de la última modificación del recurso. Los navegadores pueden utilizar esta información para comprobar si su versión almacenada en caché sigue estando actualizada.
Si encuentras estos encabezados en el archivo, el sitio web utiliza la caché. Ten en cuenta que la configuración concreta puede variar de un sitio a otro. Algunos sitios indican a los navegadores que almacenen los archivos estáticos durante un día, mientras que otros lo hacen durante meses o periodos más largos.
Cómo aprovechar la caché del navegador con un plugin
La forma más sencilla de aprovechar la caché del navegador en un sitio de WordPress es utilizar un plugin. Hay muchos plugins de caché disponibles. Uno de los mejores plugins de caché para WordPress es WP Super Cache.
Una vez que hayas instalado y activado WP Super Cache en tu sitio, puedes implementar la caché de varias formas. La más sencilla es ir a Ajustes → WP Super Cache y seleccionar la opción Caché activada situada junto a Caché.
Los ajustes predeterminados del plugin activan la caché para los visitantes que no han iniciado sesión y establecen una duración de 30 minutos para los recursos almacenados. Si quieres modificarlos, tendrás que ir a la pestaña Avanzado.
En ella puedes decidir para qué visitantes activar la caché, si quieres habilitar la caché dinámica, si el plugin debe vaciar la caché al actualizar páginas y mucho más. El plugin te ayuda recomendándote las opciones más eficaces.
Si no entiendes bien cómo funciona la caché, quizá sea mejor mantener los ajustes predeterminados. Configurarla sin comprender del todo su funcionamiento puede causar problemas en tu sitio web.
Cómo aprovechar la caché del navegador sin un plugin
Si no quieres utilizar un plugin, puedes activar manualmente la caché del navegador en tu sitio web. Este proceso puede requerir trabajar con código en el servidor o en el propio sitio, según el método de implementación que elijas.
1. Añade los encabezados «Cache-Control» y «Expires» en NGINX
Para añadir los encabezados «Cache-Control» y «Expires» en NGINX, tendrás que modificar el archivo de configuración del servidor. Este archivo suele llamarse nginx.conf, y se encuentra en el directorio principal de nginx.
La forma más sencilla de conectarte al servidor de tu sitio es utilizar un cliente del protocolo de transferencia de archivos (FTP). Después, tendrás que localizar el archivo nginx.conf que debería encontrarse en una de estas rutas:
/etc/nginx/nginx.conf o /etc/nginx/sites-available/default.
Abre el archivo con un editor de texto y busca el bloque de código server dentro de nginx.conf. Añadiremos en él el siguiente bloque de código, que especifica qué archivos debe indicar el servidor a los navegadores que guarden en caché y cuánto tiempo debe conservarse esa caché antes de caducar:
location ~* \.(jpg|jpeg|png|gif)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}Este código incluye los encabezados «Cache-Control» y «Expires». Puedes modificar tanto el periodo de caducidad como los tipos de archivo que deben almacenar los navegadores en caché.
Si no sabes qué tipos de archivo almacenar en caché, consulta el contenido de la carpeta de medios de WordPress. Conviene guardar en caché cualquier archivo estático al que accedan los visitantes con frecuencia. En cuanto al encabezado de caducidad, 30 días suele ser un plazo adecuado para la mayoría de los sitios web.
Después de añadir el código, guarda los cambios en el archivo y cierra el editor. Tendrás que reiniciar NGINX para aplicarlos.
2. Añade los encabezados «Cache-Control» y «Expires» en Apache
Para utilizar los encabezados «Cache-Control» y «Expires» en Apache, debes activar sus módulos correspondientes. Abre el terminal y ejecuta los siguientes comandos:
sudo a2enmod expires
sudo a2enmod headers
sudo systemctl restart apache2El último comando reinicia Apache con ambos módulos activos. A continuación, tendrás que modificar el archivo de configuración de Apache, que suele llamarse httpd.conf o apache2.conf.
Puedes encontrar este archivo en /etc/httpd/conf/httpd.conf, /etc/apache2/apache2.conf o
/etc/apache2/sites-available/000-default.conf, según la configuración del servidor.
Después, busca el bloque <Directory> en el archivo de configuración de Apache y añade dentro el siguiente código:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpg|jpeg|png|gif)$">
Header set Cache-Control "public, no-transform"
</FilesMatch>
</IfModule>La primera parte del código controla los ajustes de caducidad de los archivos almacenados en caché. La segunda indica qué tipos de archivo deben guardar los navegadores. Al igual que con NGINX, puedes modificar estos ajustes según los archivos que quieras que almacenen.
Cuando termines, guarda los cambios en el archivo de configuración de Apache y ciérralo. Tendrás que reiniciar Apache para que los cambios surtan efecto.
3. Utiliza una red de distribución de contenido (CDN)
Una red de distribución de contenido (CDN) es una red de servidores que puedes utilizar para almacenar copias en caché de tu sitio web en regiones clave. Las CDN suelen ser servicios de pago y proporcionan las copias almacenadas desde el servidor más cercano geográficamente al visitante.
Este método reduce la carga de tus propios servidores. Además, las CDN suelen estar optimizadas para ofrecer el máximo rendimiento y normalmente se distribuyen por todo el mundo, por lo que pueden servir los sitios web desde la mejor ubicación posible para cada visitante.
Jetpack CDN es una opción que se integra perfectamente con WordPress, es fácil de usar y muy eficaz.
Y lo mejor de todo es que es una gratuita CDN que almacena imágenes y otros tipos de recursos estáticos de tu sitio web. Una vez que la instales y actives, puedes activar la CDN accediendo a Jetpack → Ajustes en el panel de administración de WordPress.
Después, busca los ajustes de Rendimiento y velocidad y activa la opción Activar el acelerador del sitio.
4. Aloja localmente los scripts y recursos de terceros siempre que sea posible
Los scripts de terceros son elementos como código de sitios externos, píxeles de seguimiento, fuentes y otros recursos que deben cargarse para funcionar. Cuantos más scripts y recursos cargues desde fuentes externas, más tardará el proceso, lo que puede ralentizar tu sitio.
Lo ideal es eliminar todos los scripts y recursos de terceros que no utilices. Como alternativa, puedes alojar el código y los recursos en tu servidor local para reducir los tiempos de carga.
Puedes identificar los scripts de terceros y el JavaScript sin usar mediante PageSpeed Insights. Esta herramienta destaca oportunidades para mejorar el rendimiento del sitio, como listas de código sin utilizar y scripts de terceros que puedes eliminar de tus páginas.
Puedes eliminar de forma segura cualquier script de terceros que no se utilice en tu sitio web. En el caso de los scripts importantes, quizá te interese alojarlos localmente.
Último paso: instala un plugin gratuito para mejorar las Core Web Vitals
Aprender a aprovechar la caché del navegador en WordPress es un paso fundamental para mejorar el rendimiento del sitio. Por suerte, no es lo único que puedes hacer para ofrecer una experiencia de usuario mejor.
Google mide la calidad de la experiencia de usuario de un sitio con un conjunto de métricas llamado Core Web Vitals. Entre las principales métricas de rendimiento se incluyen:
- Largest Contentful Paint (renderizado del mayor elemento con contenido, LCP). Esta métrica mide cuánto tarda en cargarse el recurso más grande de una página. Por lo general, es un buen indicador del tiempo de carga total de la página.
- First Input Delay (latencia de la primera interacción, FID). Existe un intervalo entre la carga de una página y el momento en que pasa a ser interactiva. Puede parecer que una página ha terminado de cargarse, pero, si todavía no te permite interactuar con elementos como formularios o enlaces, es posible que tenga un FID alto.
- Cumulative Layout Shift (cambio de diseño acumulado, CLS). Mientras se carga una página, su diseño puede desplazarse y mover elementos en el navegador. Cuantos más elementos se muevan, mayor será la puntuación CLS. Lo ideal es que sea cero.
Hay muchas formas de mejorar las Core Web Vitals en WordPress. El método más sencillo es utilizar un plugin que optimice todas las variables que influyen en estas métricas.
Jetpack Boost puede ayudarte a aplicar varias estrategias para mejorar las Core Web Vitals. Puedes optimizar la entrega de CSS, aplazar el JavaScript no esencial y activar la carga diferida.
Por lo general, necesitarías utilizar varios plugins para implementar estas configuraciones o hacerlo manualmente, lo que convierte a Jetpack Boost en un plugin esencial para todos los sitios de WordPress. Después de instalar y activar Jetpack Boost, puedes activar fácilmente todos los ajustes accediendo a Jetpack → Boost y activando las opciones correspondientes.
Preguntas frecuentes sobre la caché del navegador en WordPress
Aunque hemos explicado los aspectos esenciales de la caché del navegador en WordPress, quizá todavía tengas algunas preguntas sobre el proceso. Veamos las más habituales.
¿Es segura la caché del navegador?
La caché del navegador es muy segura. Probablemente, la mayoría de los sitios web que visitas utilizan algún tipo de política de caché para mejorar el rendimiento que ofrecen a sus visitantes. Como visitante, ni siquiera lo notarás, salvo que examines los encabezados del sitio web o necesites vaciar la caché.
La caché del navegador solo podría resultar insegura si se implementa mal. Si no está configurada correctamente, los navegadores no podrán almacenar los recursos de la forma adecuada o una página podría no cargarse, aunque esto último es muy poco frecuente.
Caché del navegador y caché del servidor: ¿en qué se diferencian?
La caché del navegador y la del servidor funcionan de forma muy parecida. La única diferencia es que un método almacena los archivos localmente, mientras que el otro lo hace en el servidor.
El mejor ejemplo del funcionamiento de la caché del servidor es una CDN. Con las CDN puedes guardar copias de tu sitio en caché en un servidor de terceros o en un conjunto de ellos. Cuando los visitantes intentan acceder al sitio web, la CDN intercepta esa conexión y proporciona la copia almacenada.
En ese caso, los visitantes también pueden almacenar contenido estático en la caché de sus navegadores. La experiencia de los usuarios finales no debería cambiar, salvo porque las CDN suelen ofrecer tiempos de carga mucho mejores que los servidores tradicionales.
¿Qué más puedo hacer para mejorar el rendimiento de mi sitio?
Puedes hacer muchas cosas para mejorar el rendimiento de tu sitio, además de aprovechar la caché del navegador. Entre otros cambios, puedes eliminar los recursos que bloquean el renderizado, minificar el CSS, utilizar una CDN, reducir las solicitudes HTTP y disminuir el TTFB y los tiempos de respuesta del servidor.
En lo que respecta al rendimiento del sitio, algunos cambios son más eficaces que otros. Mejorar los tiempos de carga puede tener un impacto considerable en la experiencia de usuario, lo que puede aumentar la tasa de conversión de tu negocio.
Empieza a servir recursos estáticos en tu sitio de WordPress
Aprovechar la caché del navegador en WordPress es una de las formas más eficaces de mejorar los tiempos de carga. Una estrategia eficiente se centra en los archivos estáticos y los configura para que vuelvan a cargarse periódicamente. De este modo, los visitantes no se quedan con elementos obsoletos.
La forma más sencilla de implementar la caché del navegador en WordPress es utilizar un plugin como WP Super Cache. Este plugin te permite aprovechar la caché del navegador con un conjunto de configuraciones predeterminadas o controlar manualmente cada ajuste. Además, es gratuito.
Además, al instalar Jetpack Boost, puedes mejorar aún más el rendimiento de tu sitio. ¡Consulta el plugin para obtener más información!
Jetpack 