Cómo agregar encabezados Expires en WordPress (2 métodos)

¿Tu sitio de WordPress se siente lento? Un sitio web lento es la forma más rápida de perder visitantes y caer en los rankings de búsqueda.

Incluso si tienes un hosting rápido, es posible que te falte una optimización crítica: el almacenamiento en caché del navegador.

En WPBeginner, usamos encabezados de expiración para decirle a los navegadores exactamente qué archivos guardar. Esto asegura que nuestras páginas se carguen instantáneamente para los lectores recurrentes.

En esta guía, te mostraremos cómo agregar encabezados de expiración en WordPress para acelerar tu sitio web.

¿Cómo se utilizan los encabezados Expires en WordPress?

La primera vez que alguien visita una página web en su sitio web de WordPress, todos los archivos se cargan uno por uno. Todas estas solicitudes HTTP entre el navegador y su servidor de hosting de WordPress aumentan el tiempo de carga de la página web.

El almacenamiento en caché del navegador almacena algunos o todos esos archivos en la computadora del visitante. Eso significa que la próxima vez que visiten la página, los archivos se pueden cargar desde su propia computadora, aumentando el rendimiento de su sitio web de WordPress y mejorando la experiencia del usuario.

Ahora, quizás se esté preguntando cómo los navegadores saben qué archivos guardar y cuánto tiempo conservarlos. Ahí es donde entran las 'cabeceras de expiración'.

Las reglas sobre qué archivos guardar y por cuánto tiempo se establecen utilizando cabeceras de expiración o cabeceras de control de caché. En este artículo, nos centraremos en las cabeceras de expiración porque son más sencillas de configurar para la mayoría de los usuarios.

Las cabeceras de expiración establecen una fecha de caducidad para cada tipo de archivo almacenado en la caché del navegador. Después de esa fecha, los archivos se recargarán desde su servidor para ofrecer a los visitantes la versión más reciente de la página.

Le mostraremos cómo agregar cabeceras de expiración utilizando dos métodos diferentes. El primer método es más fácil y se recomienda para la mayoría de los usuarios. Puede hacer clic en los enlaces a continuación para saltar a su sección preferida:

Método 1: Agregar cabeceras de expiración con el plugin de WordPress WP Rocket

WP Rocket es el plugin de rendimiento de WordPress más fácil de usar para principiantes en el mercado. Una vez activado, funciona de inmediato para mejorar la velocidad de su sitio web sin tener que lidiar con configuraciones complicadas como muchos otros plugins de caché.

WP Rocket es un plugin premium, pero lo mejor es que todas las funciones están incluidas en su plan más económico.

Lo primero que debes hacer es instalar y activar el plugin WP Rocket. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez instalado y activado, WP Rocket activará automáticamente la caché del navegador. Por defecto, agrega cabeceras de expiración y cabeceras de control de caché con la mejor configuración para acelerar su sitio de WordPress.

Eso es todo lo que necesita hacer. Si desea obtener más información sobre el plugin, consulte nuestra guía sobre cómo instalar y configurar correctamente WP Rocket en WordPress.

Si prefieres usar un plugin de caché gratuito para agregar encabezados de expiración a tu sitio web, te recomendamos que le eches un vistazo a W3 Total Cache.

W3 Total Cache ofrece algunas de las mismas funciones que WP Rocket, pero no es tan amigable para principiantes. Tampoco ofrece todas las funciones que obtienes en un plugin de rendimiento todo en uno como WP Rocket. Tendrás que habilitar manualmente los encabezados de expiración, ya que no los habilita automáticamente.

Método 2: Agregar encabezados de expiración en WordPress usando código

El segundo método para agregar encabezados expires en WordPress implica agregar un fragmento de código a tus archivos de WordPress. No lo recomendamos para principiantes, ya que un error en el código podría causar errores graves y dañar tu sitio.

Antes de realizar estos cambios, te recomendamos que primero hagas una copia de seguridad de tu sitio de WordPress. Para más detalles, consulta nuestra guía sobre cómo hacer una copia de seguridad y restaurar tu sitio de WordPress.

Dicho esto, veamos cómo agregar encabezados expires agregando código a WordPress.

Determina si tu sitio web está ejecutando Apache o Nginx

Primero, necesitas averiguar si tu sitio web está utilizando servidores Apache o Nginx. Debes navegar a tu sitio web, hacer clic derecho en la página y luego seleccionar la opción 'Inspeccionar'.

A continuación, debes hacer clic en la pestaña 'Network' (Red) en la parte superior de la página.

Es posible que necesites actualizar la página para que los resultados se carguen.

Después de eso, puedes hacer clic en el nombre de tu dominio en la parte superior de la columna 'Name' (Nombre).

Luego, debes desplazarte hacia abajo hasta la sección 'Response Headers' (Encabezados de respuesta) y buscar un elemento llamado 'server'.

Esto te mostrará qué servidor web se está utilizando. Si ves 'Apache' o 'LiteSpeed', puedes usar el primer método a continuación. Si ves 'Nginx', deberías usar el segundo método.

Si no te sientes cómodo usando el inspector del navegador, puedes simplemente contactar al equipo de soporte de tu proveedor de hosting de WordPress y preguntarles si tu sitio usa Apache o Nginx.

Ahora que sabes qué servidor web está utilizando tu sitio, usa los enlaces a continuación para saltar adelante:

• Cómo agregar encabezados de expiración en Apache (y LiteSpeed)
• Cómo agregar encabezados expires en Nginx

Cómo agregar encabezados de expiración en Apache (y LiteSpeed)

Para agregar encabezados expires a un servidor Apache, necesitas agregar código a tu archivo .htaccess.

Para editar este archivo, necesitas conectarte a tu cuenta de hosting de WordPress con un cliente FTP o la herramienta de administrador de archivos de tu host. Encontrarás tu archivo .htaccess en la carpeta raíz de tu sitio web.

A continuación, necesitas agregar encabezados de expiración para activar el almacenamiento en caché del navegador. Esto le indica al navegador web cuánto tiempo debe almacenar los recursos de tu sitio web antes de que se eliminen.

Puedes agregar el siguiente código cerca de la parte superior de tu archivo .htaccess:

## 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/webp "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 3 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Estos valores deberían funcionar bien para la mayoría de los sitios, pero puedes ajustar los períodos de tiempo si tus necesidades son diferentes.

Observa que el código establece diferentes fechas de expiración de caché según el tipo de archivo. Las imágenes se almacenan en caché por más tiempo que HTML, CSS, Javascript y otros tipos de archivos porque generalmente no cambian.

Cómo agregar encabezados expires en Nginx

Si estás utilizando un servidor Nginx para alojar tu blog de WordPress, entonces necesitas editar el archivo de configuración del servidor para agregar encabezados de expiración.

Si estás administrando tu propio VPS o servidor dedicado, puedes agregar el siguiente código a tu archivo de configuración:

location ~* \.(jpg|jpeg|gif|png|webp|svg)$ {
  expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
  expires 3d;
}

Este código establecerá los tiempos de expiración para los diferentes tipos de archivos. Observa nuevamente que las imágenes se almacenan en caché por más tiempo que HTML, CSS, JS y otros tipos de archivos, ya que las imágenes generalmente no cambian.

Preguntas frecuentes sobre cabeceras de expiración en WordPress

A continuación, se presentan algunas de las preguntas más comunes que recibimos sobre la implementación de encabezados de expiración en sitios de WordPress. Estas deberían ayudar a aclarar cualquier duda que puedas tener sobre el proceso.

1. ¿Qué son exactamente las cabeceras Expires y por qué las necesito?

Las cabeceras Expires son instrucciones que le dicen a los navegadores web cuánto tiempo almacenar (guardar en caché) los archivos de tu sitio web localmente en la computadora de un visitante. Cuando alguien visita tu sitio, archivos como imágenes, CSS y JavaScript se descargan y se almacenan temporalmente. Con las cabeceras Expires, los visitantes recurrentes no necesitan descargar estos archivos nuevamente hasta que expiren, lo que acelera los tiempos de carga de tu sitio.

2. ¿Agregar cabeceras Expires romperá mi sitio de WordPress?

Cuando se implementan correctamente, las cabeceras Expires no romperán tu sitio. Sin embargo, si estás utilizando el método de código manual y cometes un error en tu archivo .htaccess, podría causar problemas. Es por eso que siempre recomendamos hacer una copia de seguridad de tu sitio antes de realizar cualquier cambio y usar un plugin como WP Rocket para principiantes, ya que maneja todo automáticamente sin riesgo.

3. ¿Cuánto tiempo debo configurar mis cabeceras Expires para diferentes tipos de archivo?

Recomendamos establecer tiempos de expiración más largos para archivos que cambian raramente, como imágenes (1 año), y tiempos más cortos para archivos que se actualizan con más frecuencia, como CSS y JavaScript (1 mes). Los archivos HTML deberían tener los tiempos de caché más cortos (unos pocos días) ya que tu contenido cambia regularmente. Los ejemplos de código en nuestro artículo utilizan estos plazos probados que funcionan bien para la mayoría de los sitios de WordPress.

4. ¿Puedo usar encabezados expires con cualquier proveedor de hosting de WordPress?

Sí, los encabezados expires funcionan con la mayoría de los proveedores de hosting, pero el método de implementación depende de tu tipo de servidor. La mayoría del hosting compartido utiliza servidores Apache, lo que significa que agregarás código a tu archivo .htaccess. Algunos hosts utilizan servidores Nginx, que requieren editar el archivo de configuración del servidor. Si no estás seguro de tu tipo de servidor, te mostramos cómo verificarlo en el artículo, o puedes contactar a tu proveedor de hosting para obtener ayuda.

5. ¿Necesito encabezados expires si ya estoy usando una CDN?

Si bien las CDNs (Redes de Entrega de Contenido) ayudan a acelerar tu sitio sirviendo archivos desde ubicaciones más cercanas a tus visitantes, los encabezados expires aún brindan beneficios adicionales. Trabajan junto con las CDNs para reducir aún más las solicitudes al servidor y mejorar los tiempos de carga.

Muchos servicios de CDN también tienen sus propias reglas de caché, pero establecer encabezados expires en tu servidor de origen asegura un comportamiento de caché consistente en todos los escenarios.

6. ¿Cómo puedo probar si mis encabezados expires están funcionando correctamente?

Puedes probar tus encabezados expires usando herramientas en línea como GTmetrix, Google PageSpeed Insights o Pingdom. Estas herramientas analizarán tu sitio y te mostrarán si el almacenamiento en caché del navegador está configurado correctamente. También puedes usar las herramientas de desarrollador de tu navegador para verificar los encabezados de respuesta y ver si los encabezados expires o cache-control se están enviando con tus archivos.

Tutorial en video

Recursos adicionales

Esperamos que este tutorial te haya ayudado a aprender cómo agregar encabezados de expiración en WordPress. También puedes consultar estos recursos adicionales:

• Cómo solucionar fácilmente la advertencia de caché del navegador en WordPress
• Los mejores servicios de CDN para WordPress (comparativa)
• La guía definitiva para mejorar la velocidad y el rendimiento de WordPress
• Cómo Limpiar tu Caché en WordPress (Paso a Paso)

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.