Aspectos destacados
- Los encabezados de caducidad mejoran la velocidad del sitio de WordPress al habilitar el almacenamiento en caché del navegador para archivos estáticos.
- Herramientas como GTmetrix, PageSpeed Insights y Lighthouse ayudan a identificar los encabezados faltantes o mal configurados.
- Puede agregar encabezados de vencimientos a través de complementos, .htaccess (Apache) o configuración del servidor Nginx.
- Bluehost simplifica el almacenamiento en caché con funciones integradas, almacenamiento SSD, integración de CDN y compatibilidad con complementos.
- Evite errores comunes de almacenamiento en caché con las mejores prácticas, como el control de versiones, las pruebas y el uso de entornos de ensayo.
Introducción
Su sitio web puede verse muy bien, pero si se carga como si estuviera atascado en 2005, los visitantes no se quedarán para admirarlo.
La velocidad no es negociable, y una de las formas más fáciles de aumentar el rendimiento es agregar encabezados de vencimientos en WordPress. Este poderoso ajuste permite el almacenamiento en caché del navegador, lo que permite que los archivos estáticos como imágenes, hojas de estilo y scripts se almacenen localmente para visitas repetidas más rápidas.
¿El resultado? Tiempos de carga más rápidos, menor estrés del servidor y una experiencia de usuario más fluida, todo con unos sencillos pasos.
En esta guía, aprenderás cómo agregar encabezados de caducidad usando plugins, editando tu archivo .htaccess y configurando tu servidor web (Apache o Nginx). También hablaremos de cómo evitar errores comunes que ralentizan tu sitio.
Cómo añadir encabezados de caducidad en WordPress: Guía paso a paso
Hay diferentes formas de añadir encabezados de caducidad en WordPress, dependiendo de la configuración de tu alojamiento, el tipo de servidor y el nivel de comodidad técnica. Exploremos cada método uno por uno:
Método 1: Agregar encabezados de vencimientos usando un complemento
Si no te sientes cómodo con el código, la forma más fácil de añadir encabezados de caducidad en WordPress es utilizando un plugin de almacenamiento en caché. Estos complementos manejan el almacenamiento en caché del navegador automáticamente y le permiten configurar los tiempos de vencimiento sin editar los archivos del servidor.
W3 Total Cache y WP Super Cache son los dos plugins más populares que puedes utilizar. Para este método, usamos W3 Total Cache como referencia:
- Ve al panel de control de WordPress.
- Haga clic en ‘Plugins’> ‘Añadir nuevo plugin’ y busque W3 Total Cache. A continuación, haz clic en «Instalar» y en «Activar».
- Vaya a la pestaña ‘Rendimiento’ y luego haga clic en ‘Caché del navegador’.
- Localice ‘Establecer encabezado de vencimiento’ y marque su casilla.
- Desplázate hacia abajo hasta la sección «CSS y JS» y luego marca la opción «Establecer encabezado de caducidad».
- Ingresa tu valor de vida útil preferido en segundos.
- De forma predeterminada, se establece en 31536000 segundos (igual a 365 días), pero puede ajustarlo en función de su estrategia de almacenamiento en caché.
- Repita los mismos pasos para HTML y medios.
- Después de ajustar la configuración, haga clic en la flecha desplegable del botón ‘Guardar configuración’ y haga clic en ‘Guardar configuración y purgar cachés’.
Método 2: Agregue manualmente los encabezados de vencimiento editando el archivo .htaccess (servidor Apache)
Si su sitio se ejecuta en un servidor web Apache, puede agregar manualmente encabezados de caducidad modificando el archivo .htaccess. A continuación, se explica cómo agregar encabezados de vencimiento manualmente:
- Acceda al directorio raíz de su sitio a través de FTP o Administrador de archivos en el panel de control de su alojamiento. Los usuarios de Bluehost encontrarán su ‘Administrador de archivos’ en ‘Enlaces rápidos’.
- Localice el archivo .htaccess (asegúrese de que los archivos ocultos estén visibles). Obtendrá un archivo .htaccess dentro de la carpeta ‘public_html’.
- Agregue el siguiente fragmento de código antes de la línea # END de WordPress:
<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> - Guarde y cargue el archivo.
Esto indica al navegador que almacene en caché diferentes tipos de archivos durante períodos definidos, lo que reduce los tiempos de carga futuros.
Método 3: Configurar Nginx para encabezados de vencimiento
Si tu sitio está alojado en un servidor web Nginx, el método .htaccess no se aplicará. En su lugar, deberá editar el archivo de configuración del servidor.
location ~* \.(jpg|jpeg|gif|png|css|js|woff2)$ {
expires 30d;
add_header Cache-Control "public";
} Agregue esto a su bloque de configuración del sitio Nginx, que generalmente se encuentra en
‘/etc/nginx/sites-available/yourdomain.conf’. ¿Cómo comprobar si tu sitio web necesita encabezados caducados?
Muchos complementos de almacenamiento en caché, CDN o entornos de alojamiento pueden implementar encabezados de vencimiento de forma predeterminada. Pero no siempre de la manera más optimizada. Una comprobación adecuada garantiza que no se están duplicando esfuerzos ni se pierden oportunidades para aprovechar el almacenamiento en caché del navegador para obtener un rendimiento más rápido.
Aquí hay tres herramientas confiables para ayudarlo a identificar si a su sitio web le faltan encabezados de vencimiento:
1. GTmetrix
GTmetrix es una popular herramienta de prueba de velocidad del sitio que proporciona recomendaciones detalladas para optimizar el rendimiento de su sitio web. GTmetrix analiza cómo se cargan sus páginas y marca los encabezados que faltan o caduca mal configurados.
Estos son los pasos para verificar si su sitio web necesita encabezados de vencimiento usando GTmetrix:
- Vaya a GTmetrix.com, ingrese la URL de su sitio web y haga clic en ‘Probar ahora’.
- Haga clic en la pestaña ‘Estructura’ después de completar el escaneo.
- Busque problemas como:
- ‘Agregar encabezados de caducidad’ o
- «Aprovechar el almacenamiento en caché del navegador» en la lista de auditoría
Lo que significa:
Si ve estas advertencias, normalmente significa que sus archivos estáticos (por ejemplo, .jpg, .css .js) no se almacenan en caché de manera eficiente. GTmetrix también mostrará qué archivos se ven afectados, ayudándote a decidir dónde agregar encabezados.
Lea también: Optimice su sitio: pruebe la velocidad del sitio web Consejos de GTmetrix
2. Información de Google PageSpeed
Es una herramienta proporcionada por Google que analiza la velocidad de la página y el rendimiento general de su sitio web. Proporciona datos de rendimiento del mundo real, incluidos los problemas de almacenamiento en caché relacionados con los encabezados de caducidad en WordPress.
A continuación, te explicamos cómo comprobar si tu sitio web necesita encabezados de caducidad con PageSpeed Insights:
- Visita pagespeed.web.dev.
- Ingresa la URL de tu sitio de WordPress y ejecuta la prueba.
3. Desplácese hacia abajo hasta la sección ‘Diagnóstico’.
4. Busque advertencias como:
- «Servir activos estáticos con una política de caché eficiente»;
- ‘Reducir JavaScript no utilizado’ (a menudo vinculado a un almacenamiento en caché deficiente)
Lo que significa:
Esta advertencia indica que algunos recursos no están usando encabezados de expiración efectivos. Recibirás una lista de las URL afectadas, los tipos de archivos y sugerencias para corregirlos. Puede aplicar las reglas de almacenamiento en caché adecuadas mediante un complemento, CDN o directamente en su archivo .htaccess o configuración del servidor web.
3. Prueba de rendimiento de Lighthouse (a través de Chrome DevTools)
Lighthouse es una sólida herramienta de auditoría integrada en Google Chrome. Ofrece pruebas de rendimiento avanzadas, incluida una mirada profunda al uso de su sitio del almacenamiento en caché del navegador y los encabezados de vencimiento.
Estos son los pasos para verificar si su sitio web necesita encabezados de vencimiento utilizando la prueba de rendimiento de Lighthouse:
- Abre tu sitio web en Google Chrome.
- Haga clic con el botón derecho en cualquier parte de la página y haga clic en ‘Inspeccionar’.
- Navega a la pestaña ‘Faro’.
- Selecciona ‘Rendimiento’ (también puedes incluir ‘SEO’ y ‘Mejores prácticas’).
- Haga clic en ‘Analizar la carga de la página’ y espere a que se complete la prueba.
Lo que significa:
En los resultados, busque señales de alerta en la sección «Rendimiento», como:
- «Servir activos estáticos con una política de caché eficiente»;
- ‘Reducir los tiempos de respuesta del servidor (TTFB)’
Esto comprueba si tu sitio está almacenando el contenido en caché correctamente y muestra si falta algún encabezado de caducidad o si necesita corrección.
Al usar las tres herramientas, obtendrá una imagen completa de cómo su sitio web maneja el almacenamiento en caché del navegador y si es necesario agregar u optimizar los encabezados de vencimiento. Si estas herramientas muestran advertencias de almacenamiento en caché, no te preocupes, estás a solo unos pasos de solucionarlo.
¿Cómo ayuda Bluehost a mejorar el rendimiento del sitio web?
Bluehost entiende que la velocidad es una necesidad. Es por eso que ofrecemos planes de alojamiento de WordPress, que están construidos desde cero teniendo en cuenta el rendimiento. Desde el almacenamiento en caché a nivel de servidor hasta la fácil integración con complementos que mejoran la velocidad, Bluehost ayuda a los usuarios de WordPress a implementar optimizaciones esenciales sin ninguna configuración técnica avanzada.
Ya sea que esté ejecutando un blog, un portafolio o un sitio comercial, nuestros planes de alojamiento de WordPress ofrecen la velocidad, la seguridad y la escalabilidad que los creadores necesitan para crecer con confianza.
Nos encargamos de la complejidad del back-end para que puedas centrarte en hacer crecer tu sitio y ofrecer una experiencia fluida a tus visitantes. Así es como mejoramos el rendimiento de su sitio web:
Mecanismos de almacenamiento en caché incorporados
Nuestro entorno de alojamiento incluye funciones integradas de almacenamiento en caché diseñadas para reducir los tiempos de carga al almacenar los datos a los que se accede con frecuencia más cerca de sus usuarios. Esto significa que los visitantes habituales experimentan cargas de página más rápidas, lo que mejora su experiencia de navegación general.
Puedes encontrar esta configuración en el panel de control de WordPress en la pestaña Bluehost.
Almacenamiento NVMe para un acceso más rápido a los datos
Utilizamos almacenamiento NVMe (Non-Volatile Memory Express) de alto rendimiento en nuestros servidores, lo que garantiza una recuperación de datos más rápida y una mejor capacidad de respuesta del sitio web. El almacenamiento NVMe acelera los procesos de lectura y escritura, lo cual es vital para el contenido dinámico y los sitios basados en bases de datos.
Lea también: Alojamiento de WordPress NVMe: aumente la velocidad y el rendimiento del sitio
Integración de la red de entrega de contenido (CDN)
Para aumentar aún más la velocidad de tu sitio a nivel mundial, ofrecemos una integración perfecta con Cloudflare CDN. Una CDN distribuye el contenido estático de su sitio web a través de una red de servidores en todo el mundo, lo que permite a los usuarios descargar datos desde la ubicación del servidor más cercana. Esto reduce la latencia y garantiza tiempos de carga más rápidos para los visitantes, independientemente de su ubicación geográfica.
Herramienta PageSpeed Insights
Comprender el rendimiento de su sitio web es clave para la optimización. Dentro de su Administrador de cuentas de Bluehost, tiene acceso a la función PageSpeed Insights. Esta herramienta evalúa la velocidad de tu sitio y proporciona recomendaciones prácticas para mejorar el rendimiento. Al aprovechar estos conocimientos, puede tomar decisiones informadas para optimizar aún más los tiempos de carga de su sitio web.
Soporte para complementos de almacenamiento en caché
Para los usuarios de WordPress, ofrecemos compatibilidad con complementos de almacenamiento en caché populares como W3 Total Cache y WP Super Cache. Estos plugins proporcionan capacidades avanzadas de almacenamiento en caché, lo que te permite ajustar la configuración de rendimiento de tu sitio para satisfacer tus necesidades específicas.
Apoyo de expertos
Nuestro equipo de soporte dedicado está disponible las 24 horas del día, los 7 días de la semana para ayudarlo con cualquier consulta relacionada con el rendimiento. Ya sea que necesite orientación sobre cómo configurar los ajustes de almacenamiento en caché, implementar encabezados de vencimientos o solucionar problemas de rendimiento, nuestros expertos están aquí para ayudarlo.
Si su sitio exige más velocidad, tiempo de actividad y escalabilidad, considere actualizar al alojamiento en la nube. A diferencia de los entornos compartidos, el alojamiento en la nube distribuye los recursos a través de múltiples servidores, lo que ayuda a que su sitio se mantenga rápido y confiable incluso durante los picos de tráfico.
Con almacenamiento en caché incorporado, escalado automático y recursos aislados, el alojamiento en la nube de Bluehost es ideal para sitios de alto tráfico, empresas de comercio electrónico y marcas de rápido crecimiento.
¿Cómo evitar errores relacionados con el almacenamiento en caché?
Si bien agregar encabezados de vencimiento y habilitar el almacenamiento en caché del navegador puede mejorar significativamente la velocidad de su sitio, las configuraciones incorrectas pueden provocar problemas inesperados. Estas son algunas cosas clave que debe tener en cuenta para evitar errores relacionados con el almacenamiento en caché:
1. Tenga cuidado con los tiempos de caducidad prolongados
Establecer fechas de caducidad demasiado largas (por ejemplo, 1 año) para activos como CSS o JavaScript puede hacer que los visitantes vean contenido obsoleto. Si realizas cambios frecuentes en tu sitio, considera la posibilidad de utilizar técnicas de eliminación de caché.
2. Prueba después de aplicar los cambios
Después de configurar los encabezados de caducidades, ya sea a través de un complemento, un archivo .htaccess o la configuración del servidor web, siempre borre la caché de su sitio y la caché del navegador antes de realizar la prueba.
3. Esté atento a los conflictos de complementos
El uso de varios complementos de almacenamiento en caché o la combinación de reglas de almacenamiento en caché manual con la configuración del complemento a veces puede generar conflictos. Estos pueden anularse entre sí, causar estilos/scripts rotos o incluso evitar que las actualizaciones se muestren a los usuarios.
4. Comportamiento específico del servidor
El comportamiento del almacenamiento en caché puede variar en función de si utiliza Apache, Nginx o un host administrado. Asegúrese de que está aplicando la sintaxis correcta para su entorno.
5. Utilice entornos de ensayo para las pruebas
Antes de implementar cambios en tu sitio en vivo, principalmente si estás editando archivos de servidor o reglas de almacenamiento en caché, usa un entorno de prueba.
Reflexiones finales
A estas alturas, ya has aprendido exactamente cómo añadir encabezados de caducidad a tu sitio de WordPress, y por qué es importante. Esta técnica simple pero poderosa ayuda a mejorar la velocidad y el rendimiento de su sitio web al habilitar el almacenamiento en caché del navegador para archivos estáticos.
En Bluehost, sabemos que el rendimiento no es solo una característica, es una base. Es por eso que hemos creado nuestra plataforma de alojamiento para respaldar su sitio de WordPress con almacenamiento SSD ultrarrápido, herramientas de almacenamiento en caché integradas, integración perfecta de CDN y compatibilidad con complementos con un solo clic. Tú céntrate en tu contenido y en tu audiencia, nosotros nos encargamos del backend.
No dejes que un sitio lento te detenga. Elija el alojamiento de WordPress Bluehost y desbloquee un rendimiento ultrarrápido hoy.
Preguntas frecuentes
Los encabezados de caducidad son encabezados de respuesta HTTP que le dicen a un navegador cuánto tiempo debe almacenar en caché un archivo antes de volver a solicitarlo al servidor. Ayudan a mejorar el rendimiento del sitio web al permitir el almacenamiento en caché del navegador de archivos estáticos como imágenes, CSS y JavaScript.
Puedes añadir encabezados de caducidad en WordPress utilizando un plugin de almacenamiento en caché como WP Super Cache o W3 Total Cache. Estos complementos le permiten establecer reglas de almacenamiento en caché sin editar el código. Alternativamente, puede agregar encabezados de vencimientos manualmente a través del archivo .htaccess (Apache) o la configuración de su servidor Nginx.
Agregar encabezados de vencimientos ayuda a acelerar su sitio web al decirle a los navegadores que almacenen en caché el contenido estático durante un tiempo determinado. Esto reduce el tiempo de carga de la página, disminuye las solicitudes del servidor y mejora el SEO y la experiencia del usuario.
El archivo .htaccess se encuentra en el directorio raíz de su instalación de WordPress, normalmente en /public_html/. Es posible que esté oculto de forma predeterminada: asegúrese de que su administrador de archivos o cliente FTP esté configurado para mostrar archivos ocultos.
La mayoría de los servidores web modernos, como Apache y Nginx, admiten encabezados que caducan, pero el método de configuración difiere. Apache utiliza el archivo .htaccess y mod_expires módulo, mientras que Nginx requiere cambios en el archivo de configuración del sitio.
Puedes comprobar si hay encabezados caducados utilizando herramientas como GTmetrix, Google PageSpeed Insights o Lighthouse. Estas herramientas resaltarán si a tu sitio le faltan encabezados de almacenamiento en caché y ofrecerán sugerencias para mejorar.
Los encabezados Expires usan una fecha fija para el almacenamiento en caché, mientras que Cache-Control usa tiempo relativo (por ejemplo, max-age=86400). Ambos se utilizan para controlar el almacenamiento en caché del navegador y es común usarlos juntos para una mejor administración de la caché.
