Agregar encabezados Expires

¿Cómo agrego encabezados Expires al archivo .htaccess?

¿GTmetrix o Pingdom muestran el error «Agregar encabezados Expires»?

¿Qué es el encabezado Expires?

¿Cuáles son los pasos para agregar encabezados caducados a .htaccess?

¿Cuándo es el momento adecuado para que caduquen los archivos y la caché?

Explicó de manera comprensible cómo agregar encabezados Expires al archivo .htaccess.

Uno de los mensajes de error más comunes al probar el sitio web en Pingdom o GTmetrix es: Agregar encabezados de Caducidad.

El mensaje de error dice que aumente el tiempo dedicado a los archivos (imágenes, HTML, CSS y JavaScript) que permanecen en la caché de su sitio. El almacenamiento en caché tiene un impacto directo en el tiempo de carga de su sitio web. La velocidad del sitio web es una optimización SEO muy importante. Google califica la velocidad del sitio web como un factor de clasificación significativo. Los operadores de sitios web que no hayan optimizado la velocidad de carga de su sitio web no lograrán una buena clasificación en los resultados de búsqueda en Google en tiempos de «mobile first». Los sitios web que no estén optimizados para dispositivos móviles en 2019 y que no tengan tiempos de carga rápidos difícilmente se encontrarán en los primeros puestos de los motores de búsqueda.

Cuando un usuario visita su sitio web en la web, el navegador descarga automáticamente una serie de archivos. Cada uno de estos archivos tiene una fecha de caducidad y permanece en la caché durante un tiempo determinado. Si el usuario decide volver a visitar otras páginas de su sitio web o sitio web, no es necesario volver a cargar todos los archivos. Si el tiempo para que los archivos caduquen es demasiado corto, aparecerá el error «Agregar encabezados de vencimiento».

¿Cómo funciona el encabezado Expires?

Los encabezados caducados le dan al navegador el comando para descargar y guardar estos archivos. La razón de esto es reducir la cantidad de envío y recepción entre la computadora y el servidor (es decir, el sitio web) y utilizar los datos almacenados en la caché.

Como resultado, se tarda un poco más en cargar un sitio web al que se accede recientemente que cuando se llama repetidamente. Dependiendo del sitio web, hay diferentes archivos como HTML, CSS, JavaScripts, gráficos, imágenes, PDF y otros archivos que forman parte de la funcionalidad del sitio web y deben cargarse.

Por lo tanto, cada vez que un nuevo usuario visita su sitio web, todos estos archivos se solicitan al servidor. Cada solicitud (para cada archivo individual) requiere un tiempo de carga diferente dependiendo de la recepción del archivo. Sin embargo, cuando ciertos archivos se colocan en la memoria, el número de solicitudes disminuye. Esto hará que el sitio web se cargue más rápido.

# ¿Cuánto tiempo deben permanecer los datos en la caché del navegador?

Para evitar que los usuarios vuelvan a descargar archivos compartidos, se debe definir una fecha de caducidad para estos archivos. La fecha de caducidad definida indica al navegador qué archivo solicitar al servidor y qué archivo solicitar a la caché.

¿Qué archivos se almacenan en caché?

El primer paso es determinar qué archivos se actualizan con frecuencia y cuáles se actualizan con poca frecuencia.

Archivos que rara vez se actualizan:
Fotos
Videos
Audio
El favicon
Webfonts, fuentes

Archivos que se actualizan con más frecuencia:
Javascript y CSS
Mensaje de texto

¿Cómo agrego encabezados Expires al archivo .htaccess para evitar el error «agregar encabezados Expires»?

Agregue el encabezado Expires al archivo .htaccess:
El archivo .htaccess suele ser un archivo oculto en el directorio raíz. Asegúrese de hacer una copia de seguridad de este archivo antes de realizar cualquier cambio. Si algo sale mal, puede restaurar el archivo guardado.

1. Descarga tu archivo .htaccess. Si el archivo está oculto, activa Mostrar archivos ocultos en tu FTP.

2. Abra su archivo .htaccess en un editor (Bloc de notas o Bloc de notas ++) y agregue su código con las fechas de vencimiento. Esto se puede determinar individualmente de acuerdo con sus requisitos.

Por ejemplo, nosotros usamos el siguiente código, puedes copiarlo y usarlo adaptado para tu .htaccess:

# Expires headers (for better cache control)
<ifmodule mod_expires.c>
        ExpiresActive on
        # Perhaps better to whitelist expires rules? Perhaps.
        ExpiresDefault                              "access plus 1 month"
        # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
        ExpiresByType text/cache-manifest           "access plus 0 seconds"
        # Your document html
        ExpiresByType text/html                     "access plus 0 seconds"
        # Data
        ExpiresByType text/xml                      "access plus 0 seconds"
        ExpiresByType application/xml               "access plus 0 seconds"
        ExpiresByType application/json              "access plus 0 seconds"
        # Feed
        ExpiresByType application/rss+xml           "access plus 1 hour"
        ExpiresByType application/atom+xml          "access plus 1 hour"
        # Favicon (cannot be renamed)
        ExpiresByType image/x-icon                  "access plus 1 week"
        # Media: images, video, audio
        ExpiresByType image/gif                     "access plus 4 months"
        ExpiresByType image/png                     "access plus 4 months"
        ExpiresByType image/jpeg                    "access plus 4 months"
        ExpiresByType image/webp                    "access plus 4 months"
        ExpiresByType video/ogg                     "access plus 1 month"
        ExpiresByType audio/ogg                     "access plus 1 month"
        ExpiresByType video/mp4                     "access plus 1 month"
        ExpiresByType video/webm                    "access plus 1 month"
        # HTC files  (css3pie)
        ExpiresByType text/x-component              "access plus 1 month"
        # Webfonts
        ExpiresByType font/ttf                      "access plus 4 months"
        ExpiresByType font/otf                      "access plus 4 months"
        ExpiresByType font/woff                     "access plus 4 months"
        ExpiresByType font/woff2                    "access plus 4 months"
        ExpiresByType image/svg+xml                 "access plus 1 month"
        ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
        # CSS and JavaScript
        ExpiresByType text/css                      "access plus 1 year"
        ExpiresByType application/javascript        "access plus 1 year"
</ifmodule>
## EXPIRES END

Una breve explicación de esto:

< La consulta IfModule mod_expires.c> comprueba si está instalado el módulo de servidor necesario.

ExpiresActive On activa el módulo de su sitio web, seguido de la información sobre qué tipos de archivos deben almacenarse en caché y durante qué período de tiempo. El tiempo se especifica en la forma «desde el último acceso para el período X», en el ejemplo «acceso más 1 semanas», es decir, «desde el acceso durante una semana». Una vez que haya expirado el período establecido, el archivo en la caché del navegador será reemplazado por la versión actual de su sitio web.

Asegúrate de que el tiempo esté siempre definido en plural, es decir, que haya una «s» al final (semanas, meses, …). Puede averiguar qué valores son posibles como especificación de tiempo en la documentación oficial del servidor web Apache: http://httpd.apache.org/docs/2.0/mod/mod_expires.html#AltSyn

3. Una vez que haya realizado los cambios en el archivo .htaccess, no olvide guardarlo y volver a cargarlo en el directorio raíz de su sitio web, a menos que haya realizado un cambio directo en el servidor.

¿Cuánto tiempo se debe establecer el tiempo de caducidad de los archivos?

La duración de la caché se puede establecer en años, meses, semanas, días, horas e incluso segundos.

La fecha de caducidad de cada archivo debe establecerse en función del momento en que se utiliza/solicita.

La fecha de caducidad de las imágenes se puede establecer en aproximadamente un año, ya que generalmente no se cambian y la carga de las imágenes tarda la mayor parte del tiempo.

Es más probable que HTML, CSS y JavaScript se actualicen regularmente. La fecha de vencimiento se puede establecer en un mes o menos.