En junio de 2021, Google comenzó a implementar actualización del algoritmo básico diseñado para brindar a los usuarios la mejor experiencia posible al posicionar páginas que ofrecen un alto rendimiento en primer lugar. Esta actualización aborda varias señales de calidad del sitio web, incluidas las métricas web centrales.
Core Web Vitals es un conjunto de métricas centradas en diferentes aspectos de la experiencia del usuario, incluidos los tiempos de carga. Esto no es sorprendente. La velocidad de la página ha sido un factor de clasificación de Google para computadoras de escritorio desde 2010 y para dispositivos móviles desde 2018.
Si posee un sitio de WordPress, probablemente siempre esté buscando más formas de acelerar su sitio. Una forma es agregar encabezados caducados. Echemos un vistazo a qué son estos encabezados y cómo puede agregarlos en WordPress, con o sin un complemento.
¿Qué son los encabezados de vencimiento?
Los encabezados de caducidad son un tipo de encabezado HTTP que indica cuánto tiempo expirarán las copias almacenadas en caché de los recursos de su sitio. Antes de esta fecha y hora, el navegador puede recuperar los recursos del sitio del caché. Después de la fecha y la hora, los recursos ya no estarán disponibles en la memoria caché del navegador y, por lo tanto, deben solicitarse al servidor.
Este encabezado HTTP ayuda a garantizar que los visitantes que regresan no vean contenido desactualizado cuando visitan su sitio web. También ayuda a acelerar el tiempo de carga. Para comprender cómo hacer esto, primero debe comprender el almacenamiento en caché del navegador.
Cuando visita un sitio web, su navegador se comunica con el servidor web para solicitar y descargar los archivos necesarios para mostrar el sitio web. Dependiendo de la complejidad del sitio web, esto podría significar que se transfieren muchos archivos entre el navegador y el servidor.
Por ejemplo, en la imagen a continuación, el navegador debe solicitar cuatro recursos estáticos del servidor para mostrar una página web:
La buena noticia es que si se establecen encabezados de caducidad para estos archivos, la próxima vez que visite esta página, su navegador puede recuperar los archivos disponibles del caché en lugar de volver a solicitarlos y recuperarlos del servidor.
En la siguiente ilustración, tenga en cuenta que el navegador puede obtener la mayoría de los recursos del caché y solo necesita solicitar uno del servidor:
Por lo tanto, agregar encabezados que caducan ofrece dos beneficios: no solo reduce la cantidad de solicitudes HTTP enviadas al servidor, sino que también reduce la cantidad de archivos que deben descargarse. El resultado son tiempos de carga más rápidos.
Ahora que entendemos los beneficios de los encabezados que caducan, pasemos a cómo formatear este tipo de encabezado.
El formato del encabezado caduca
El encabezado expira tiene dos formatos diferentes. Están:
- Caduca por tipo: use este formato para aplicar el período de vencimiento a diferentes tipos de archivos. La sintaxis de este encabezado es ExpiresByType [file name] «acceso [time interval]».
- Caduca por defecto: utilice este formato para aplicar el período de caducidad de forma predeterminada a todos los recursos de su sitio. La sintaxis de este encabezado es ExpiresDefault «acceso [time interval]».
Lo mejor es establecer encabezados ExpiresByType para la mayoría de los recursos de su sitio, incluidos HTML, CSS, JavaScript y XML archivos e imágenes y otros archivos multimedia. Luego, puede establecer ExpiresDefault como catch-all para el resto del contenido.
Las imágenes y los archivos multimedia suelen tener los períodos de validez más largos (normalmente alrededor de un año), mientras que otros archivos tienen períodos de validez más cortos (normalmente alrededor de un mes).
Ahora echemos un vistazo a cómo agregar encabezados de vencimiento a su sitio de WordPress.
Cómo agregar encabezados Expires en WordPress
Para agregar encabezados de vencimiento en WordPress, puede modificar los archivos del servidor o usar un complemento. El primero es mejor para usuarios avanzados, ya que cometer un error al modificar los archivos del servidor puede dañar su sitio. Si no tiene tanta experiencia técnica, es mejor que use un enchufe.
Agregue encabezados que caducan en WordPress sin el complemento
El proceso de agregar manualmente encabezados que caducan en WordPress depende del servidor que esté utilizando. A continuación, describimos los pasos para Apache y Nginx.
Agregar encabezados que caducan en el servidor Apache
1. Conéctese a su servidor a través del panel de alojamiento o cliente FTP.
2. Navegar a public_html.
3. Encuentra tu archivo .htaccess. Nota: Esto puede revelar archivos ocultos.
4. Abra .htaccess en el editor de archivos del panel de alojamiento o descargue el archivo y ábralo en el editor de código.
5. Agregue el siguiente fragmento de código antes de la línea #END WordPress:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month”
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year”
ExpiresByType image/gif "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month”
ExpiresByType application/xhtml+xml "access 1 month""
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 4 days"
</IfModule>
Recuerde que los diferentes tipos de archivos tienen diferentes períodos de validez. Puede cambiarlos y el encabezado ExpiresDefault para que se adapten mejor a su contenido.
6. Guarde el archivo (y vuelva a enviarlo a través de FTP si es necesario).
Agregue encabezados que caducan en el servidor Nginx
1. Abra el archivo de configuración (conf) en el editor del panel del servidor o en el editor de código. Nota: La forma de acceder y editar este archivo varía según el host, por lo que puede comunicarse con su proveedor de alojamiento para obtener ayuda para acceder al archivo.
2. Agregue el siguiente fragmento de código en el bloque del servidor:
location ~* .(jpeg|jpg|png|svg|gif)$ {
expires 365d;
}
Esto hará que sus activos gráficos caduquen después de un año. Para establecer diferentes períodos de caducidad para diferentes tipos de archivos, pegue este código en la misma sección nuevamente, reemplace los nombres de las extensiones de archivo e inserte un período diferente. Esto es lo que debe agregar para configurar los archivos HTML, CSS y JavaScript para que caduquen después de 30 días:
location ~* .(html|css|js)$ {
expires 30d;
}
3. Después de realizar estos cambios, guarde el archivo de configuración y reinicie Nginx.
Agregue encabezados que caducan en WordPress usando un complemento
Si no tiene ganas de modificar los archivos del servidor, puede usar el complemento de Wordpless para habilitar los encabezados de vencimiento en su sitio. Si bien hay muchos complementos disponibles, los complementos de almacenamiento en caché son la opción perfecta. Este tipo de complemento le permite habilitar el almacenamiento en caché del navegador y caduca los encabezados con solo unos pocos clics. Sigamos el proceso con Caché total W3.
1. haga clic aquí Actuación > Caché de navegador.
2. Desplácese hasta el subcampo General.
3. Marque «Establecer encabezados que caducan».
Fuente de imagen
4. Ahora desplácese hacia abajo hasta la sección CSS y JS, marque la casilla junto a «Establecer caducidad del encabezado» e ingrese el valor de vigencia del encabezado Caduca en segundos. De forma predeterminada, este valor es 31 536 000 segundos o 365 días. Puede cambiar esto según sea necesario.
5. Repita este paso para las secciones HTML y XML, y Media y otros archivos.
6. haga clic aquí Guardar todas las configuraciones.
Agregar encabezados Expires a su sitio de WordPress
Los encabezados Expires ayudan a controlar cómo se almacenan en caché y se comparten con los visitantes los diferentes tipos de archivos. No solo pueden ayudar a reducir el tiempo de carga de los usuarios que regresan, sino que también pueden garantizar que solo vean contenido nuevo. Por lo tanto, son importantes para la velocidad del sitio y la experiencia general del usuario.
