¿Acabas de someter tu sitio de WordPress a una herramienta de prueba de velocidad solo para que te digan que necesitas «Añadir Cabeceras de Caducidad» a tu sitio de WordPress?
Las cabeceras de caducidad (expires headers) te ayudan a aprovechar la caché del navegador, lo que te permite acelerar los tiempos de carga de tu sitio. Además, también forman parte de las recomendaciones de rendimiento de YSlow, lo que significa que afectarán a tu «puntuación» de rendimiento en herramientas como GTmetrix.
En este artículo, explicaremos qué son las cabeceras de caducidad y cómo afectan a tu sitio. A continuación, te mostraremos paso a paso cómo añadir cabeceras de caducidad en WordPress utilizando algunos métodos diferentes.
Pero antes, tenemos que dar un pequeño rodeo para tratar otro tema: el almacenamiento en caché del navegador.
¿Qué Es la Caché del Navegador?
Antes de hablar de las cabeceras de caducidad, tenemos que introducir el concepto de caché del navegador. Esto es importante porque las cabeceras de caducidad te ayudan a controlar e implementar el almacenamiento en caché del navegador – así que si no entiendes el almacenamiento en caché del navegador, no puedes entender las cabeceras de caducidad.
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 y cargue esos archivos locales para las siguientes visitas, en lugar de descargarlos de tu servidor en cada carga de la página.
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: la imagen del logotipo de tu sitio. Tu logotipo es el mismo en todas las páginas, por lo que no tiene sentido obligar a los navegadores de los visitantes a volver a descargar el mismo archivo de logotipo en cada carga de página. Con el almacenamiento en caché del navegador, podrías almacenar ese archivo del logotipo en los ordenadores locales de los visitantes. Un visitante todavía tendría que descargar la imagen de tu logotipo en su primera visita. Pero en las siguientes visitas a la página, el archivo se cargaría desde la caché del navegador local.
¿Qué Son las Cabeceras de Caducidad?
Las cabeceras de caducidad permiten indicar al navegador de un visitante si debe cargar un determinado recurso desde la caché local del navegador (como hemos comentado anteriormente) o si debe descargar una nueva versión desde el servidor web.
Más concretamente, te permite establecer una duración para la versión en caché de diferentes tipos de archivos antes de que ese archivo «caduque» y el navegador deba descargarlo de nuevo del servidor.
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.
Cabeceras de Caducidad vs Cache-control
Aunque el uso de las cabeceras de caducidad es una forma de controlar el almacenamiento en caché del navegador en WordPress, no es la única. También existe otra técnica llamada cache-control.
Cache-control es una técnica más moderna y ofrece un poco más de flexibilidad para controlar el comportamiento de la caché. Por esa razón, muchos sitios utilizan cache-control hoy en día – incluyendo nosotros aquí en Kinsta con nuestra configuración personalizada de Nginx.
Sin embargo, las cabeceras de caducidad siguen ofreciendo todo lo que la mayoría de los sitios necesitan, por lo que son una buena opción para usar en la caché del navegador. También puedes utilizar ambas, aunque las cabeceras de cache-control tendrán prioridad en la mayoría de las situaciones. Si utilizas ambas, deberás asegurarte de establecer los mismos valores de tiempo en cada una.
Si quieres saber más sobre cómo implementar la cache-control en WordPress, consulta nuestra guía sobre cómo aprovechar la caché del navegador en WordPress.
Cómo Arreglar el Problema de «Añadir Cabeceras de Caducidad» en WordPress
Ahora, vamos a entrar en la parte de cómo hacerlo y te mostraremos cómo configurar las cabeceras de caducidad en WordPress.
Pero primero – tenemos buenas noticias. Si estás alojado en Kinsta, no tienes que preocuparte de configurar las cabeceras de caducidad porque nosotros lo hacemos automáticamente por ti. Preconfiguramos tanto nuestros servidores como nuestra red de distribución de contenidos (CDN – content delivery network) integrada para aprovechar el almacenamiento en caché del navegador, por lo que no tienes que hacer nada.
Si estás alojado en otro lugar, puedes añadir cabeceras de caducidad para tu sitio de WordPress. Puedes hacerlo utilizando tu propio fragmento de código a nivel de servidor (Nginx o Apache) o a través de algunos plugins de WordPress fáciles de usar.
Cómo Añadir Cabeceras de Caducidad con .htaccess en el Servidor Web Apache
Si tu servidor web utiliza el servidor web Apache, puedes añadir cabeceras de caducidad utilizando el archivo .htaccess, que se encuentra en la carpeta raíz de tu servidor (la misma carpeta que contiene el archivo wp-config.php).
Esto es lo que tienes que hacer:
- Conéctate a tu servidor mediante FTP en tu cliente FTP preferido
- Localiza el archivo .htaccess en la carpeta raíz
- Descarga una copia de seguridad del archivo .htaccess en tu ordenador local. De esta manera, si algo va mal, puedes volver a cargar tu copia de seguridad para solucionar cualquier posible problema.
- Añade el siguiente fragmento de código cerca de la parte superior del archivo
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##Aunque los valores por defecto deberían funcionar bien para la mayoría de los sitios, puedes ajustar los periodos de tiempo para los diferentes tipos de archivos en el fragmento de código según tus necesidades.
Cómo Añadir Cabeceras de Caducidad con el Archivo Config en el Servidor Web Nginx
Si tu host utiliza el servidor web Nginx, puedes controlar las cabeceras de caducidad editando el archivo de configuración de tu servidor. La forma de editar este archivo dependerá de tu host; puedes ponerte en contacto con el soporte de tu host si necesitas ayuda.
Kinsta utiliza el servidor web Nginx – pero recuerda que ya configuramos las cosas por ti, así que no necesitas añadir ningún código tú mismo.
Este es el código que debes utilizar:
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Puede ajustar los tiempos de caducidad para los diferentes tipos de archivos según sea necesario
Cómo Añadir Cabeceras de Caducidad con un Plugin de WordPress
Si no te sientes cómodo añadiendo el código de las cabeceras de caducidad por ti mismo, también puedes encontrar algunos plugins de WordPress que pueden hacer el trabajo por ti. Algunos de estos plugins añaden cabeceras de caducidad, mientras que otros utilizan cache-control. De cualquier manera, el resultado final es que tu sitio de WordPress puede beneficiarse de la caché del navegador.
Una solución es utilizar un plugin de almacenamiento en caché, si tu host no ha implementado ya el almacenamiento en caché para ti. Una gran opción es WP Rocket, que es totalmente compatible con Kinsta. Tan pronto como actives el plugin WP Rocket, este habilitará automáticamente el almacenamiento en caché del navegador por ti – no hay necesidad de configurar ningún otro ajuste.
Aquí tienes otros plugins de almacenamiento en caché que pueden ayudarte a implementar cabeceras de caducidad y/o almacenamiento en caché del navegador:
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 Comprobar Si las Cabeceras de Caducidad Funcionan
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 Probar las Cabeceras de Caducidad con Terminal
Si prefieres probar las cabeceras de caducidad con una opción más técnica, puedes hacer una petición curl en Terminal a un activo estático de tu sitio, e inspeccionar las cabeceras HTTP directamente. Por ejemplo, si tu regla de caducidad o control de caché cubre los archivos CSS, puedes hacer una petición curl como la siguiente.
curl -I https://kinstalife.com/wp-includes/css/dist/block-library/style.min.cssEn nuestro caso, la petición de curl al archivo style.min.css proporciona la respuesta siguiente.
HTTP/2 200
server: nginx
date: Wed, 27 Jan 2021 01:11:05 GMT
content-type: text/css; charset=UTF-8
content-length: 51433
last-modified: Tue, 12 Jan 2021 20:17:48 GMT
vary: Accept-Encoding
etag: "5ffe03ec-c8e9"
expires: Thu, 31 Dec 2037 23:55:55 GMT
cache-control: max-age=315360000
access-control-allow-origin: *
accept-ranges: bytes
x-edge-location-klb: HaIXowU1oNczJ391oDE9zVvZ7279840b5d30a89472f57253756b3e63Como puedes ver, la respuesta incluye las cabeceras de expires y cache-control. En concreto, la cabecera cache-control muestra un max-age de 315360000 segundos, lo que indica un tiempo de caducidad de un año.
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.
Resumen
Para recapitular, las cabeceras de caducidad te ayudan a controlar el comportamiento de la caché del navegador para diferentes tipos de archivos en tu sitio de WordPress.
Hoy en día, muchos sitios confían en las cabeceras cache-control en lugar de las de caducidad porque cache-control es una opción más moderna que proporciona más flexibilidad. Sin embargo, las cabeceras de caducidad siguen funcionando bien para la mayoría de los sitios y también se pueden utilizar tanto las cabeceras de caducidad como las cache-control al mismo tiempo.
Además, algunas herramientas de pruebas de velocidad reducirán la puntuación de tu sitio si no implementas cabeceras de caducidad, lo que podría ser tu principal motivación para establecer esta táctica.
Si alojas tu sitio de WordPress en Kinsta, no necesitas preocuparte por las cabeceras de caducidad porque nosotros nos encargamos de todo por ti. Sin embargo, si tu sitio está alojado en otro lugar, puedes añadir cabeceras de caducidad a WordPress utilizando los fragmentos de código que proporcionamos o uno de los plugins que presentamos.
