Uno de los errores comunes que vemos que cometen los propietarios de sitios de WordPress es pasar por alto el almacenamiento en caché del navegador. Su sitio web puede estar perdiendo visitantes debido a tiempos de carga de página lentos. Incluso después de optimizar imágenes y actualizar el hosting, su sitio aún puede sentirse lento hasta que agregue encabezados Expires.
Los encabezados Expires funcionan indicando a los navegadores de los visitantes que almacenen los archivos de su sitio, como imágenes, CSS y JavaScript, durante un período de tiempo específico. Esto significa que cuando alguien visita varias páginas de su sitio, su navegador no tiene que descargar todo de nuevo.
El resultado son tiempos de carga significativamente más rápidos para los visitantes recurrentes, lo que mejora la experiencia del usuario y puede aumentar sus clasificaciones de búsqueda.
Hemos implementado encabezados Expires en muchos sitios de WordPress y hemos refinado el proceso a dos métodos confiables que funcionan en cualquier configuración de hosting. Ya sea que se sienta cómodo editando código o prefiera una solución de plugin, le mostraremos cómo agregar encabezados Expires a su sitio de WordPress.
¿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:
- Agregar cabeceras de expiración con el plugin de WordPress WP Rocket
- Agregar cabeceras de expiración en WordPress usando código
- Preguntas frecuentes sobre cabeceras de expiración en WordPress
- Tutorial en video
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. En este caso, el sitio se está ejecutando en un servidor Nginx.
Ahora que sabes qué servidor web está utilizando tu sitio, usa los enlaces a continuación para saltar adelante:
Cómo agregar encabezados expires en Apache
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.
Nota: A veces, el archivo .htaccess puede estar oculto. Si necesitas ayuda para encontrarlo, consulta nuestra guía sobre por qué no puedes encontrar el archivo .htaccess en tu sitio de WordPress.
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/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 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.
La forma en que editas y accedes a este archivo depende de tu host, por lo que puedes contactar a tu proveedor de hosting si necesitas ayuda para acceder al archivo.
Luego, necesitas agregar el siguiente código:
location ~* \.(jpg|jpeg|gif|png|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
Esperamos que este tutorial te haya ayudado a aprender cómo agregar encabezados expires en WordPress. También te puede interesar ver nuestra guía sobre cómo solucionar fácilmente la advertencia 'Aprovechar el almacenamiento en caché del navegador' en WordPress o nuestra selección experta de los mejores servicios de CDN para WordPress.
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.
Mohan Hridoy
El primer método es muy fácil. Gracias wpbeginner por este tutorial
Soporte de WPBeginner
Glad to hear and you’re welcome!
Administrador
Dennis Muthomi
¡Gracias por esta guía completa sobre cómo agregar encabezados expires en WordPress! He estado buscando formas de mejorar el rendimiento de mi sitio, y este artículo proporciona pasos claros y accionables.
Aprecio particularmente la explicación de cómo funcionan las cabeceras de expiración y su impacto en los tiempos de carga. Los dos métodos que has descrito se adaptan a diferentes niveles de habilidad, lo cual es genial. Para mí, el plugin WP Rocket parece una solución excelente.
¡Estoy implementando estas técnicas AHORA MISMO!
Jiří Vaněk
Me gustaría preguntar dónde podría estar el error. Tengo los encabezados Expire configurados en htacess. Las directivas están bien. Aun así, AIO SEO me sigue diciendo que no están configurados. ¿Dónde debo buscar ahora?
Soporte de WPBeginner
Te recomendaríamos que te pongas en contacto con el soporte de AIOSEO para asegurarte de que no haya un problema de detección con la configuración específica de tu sitio.
Administrador
Jiří Vaněk
Gracias por el consejo. Me he puesto en contacto con el soporte de AIO SEO porque todavía no he resuelto el problema, y a pesar de tener la configuración correcta, el plugin sigue reportando un error. Espero que puedan identificar la raíz del problema. Gracias por tomarte el tiempo de ayudarme con mi inconveniente.
Ivan Gneiding
Agregué el código en .htaccess (servidor apache) pero pingdom.com sigue quejándose de las cabeceras de expiración. ¿Qué más debería hacer?
Gracias de antemano.
Arthur Morehead
Las herramientas de desarrollador no revelaron mi servidor
Greg Murch
Me encanta el código para el .htaccess, es menos probable que ralentice el sitio con más plugins.
Lasha
Mucha gente tiene problemas con las cabeceras de expiración y esta es una gran guía. Pero para este tipo de cosas, siempre prefiero los plugins a las inyecciones de código manuales.