¿Cómo configuro los encabezados de caducidad para CSS, JS e imágenes?

38

Recientemente he analizado mi sitio web con el complemento de velocidad de página en firebug. Me sugirió establecer la caducidad en CSS, JS y archivos de imagen.

Me pregunto cómo hago esto.

css javascript cache page-speed KoolKabin
fuente

Respuestas:

37

Actualice su configuración de Apache para incluir las siguientes directivas como parte de su configuración principal :

# 
# associate .js with "text/javascript" type (if not present in mime.conf)
# 
AddType text/javascript .js

# 
# configure mod_expires
# 
# URL: http://httpd.apache.org/docs/2.2/mod/mod_expires.html
# 
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 seconds"
    ExpiresByType image/x-icon "access plus 2692000 seconds"
    ExpiresByType image/jpeg "access plus 2692000 seconds"
    ExpiresByType image/png "access plus 2692000 seconds"
    ExpiresByType image/gif "access plus 2692000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2692000 seconds"
    ExpiresByType text/css "access plus 2692000 seconds"
    ExpiresByType text/javascript "access plus 2692000 seconds"
    ExpiresByType application/x-javascript "access plus 2692000 seconds"
    ExpiresByType text/html "access plus 600 seconds"
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>

# 
# configure mod_headers
# 
# URL: http://httpd.apache.org/docs/2.2/mod/mod_headers.html
# 
<IfModule mod_headers.c>
    <FilesMatch "\\.(ico|jpe?g|png|gif|swf|css|js)$">
        Header set Cache-Control "max-age=2692000, public"
    </FilesMatch>
    <FilesMatch "\\.(x?html?|php)$">
        Header set Cache-Control "max-age=600, private, must-revalidate"
    </FilesMatch>
    Header unset ETag
    Header unset Last-Modified
</IfModule>
John Conde
fuente
Recibo un error de 500 servidores internos cuando lo
coloco
Es posible que su configuración de Apache no sea compatible con todas las opciones enumeradas anteriormente. Actualizaré esta respuesta en breve para ayudar a resolver este problema.
John Conde
Mi Drupal contiene referencias de javascript / css como: www.example.com/misc/jquery.js?v=1.4.4 o www.example.com/sites/all/modules/nice_menus/css/nice_menus.css?mtu293, it no parece funcionar para tales archivos. ¿Se actualiza a partir de hoy?
AgA
2
@JohnConde ¿Por qué caduca y encabezados? Además, al actualizar una imagen o CSS, por ejemplo, ¿se debe cambiar el nombre del archivo? O para un archivo CSS, el control de versiones funciona: test.css? 123?
contra el
14

Puedes poner esto en tu htaccess:

<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault A2592000
</FilesMatch>

Apuntará a los archivos con esas extensiones (ico, flv, jpg, etc.) y configurará el encabezado Expira como tiempo de acceso (A) más 30 días (2592000 segundos). También puede agregar esto a nivel del servidor si tiene acceso a eso.

Cabra descontento
fuente
2

Depende del host y de la forma en que sirva estas cosas. Opción 1) si controla el servidor, haga el apache para agregar encabezados de caducidad en la respuesta Opción 2) si no controla el servidor web o si almacena las imágenes / js / css / etc., puede configurar estos encabezados desde el script que servidor ellos

Tenga en cuenta que estas sugerencias son recomendables pero no la verdad absoluta. Son más para ahorrarle un ancho de banda que para acelerar su sitio web. Entonces, si tiene poco tráfico a su sitio, no se preocupe demasiado por esto.

Ilian Iliev
fuente
Estoy con la opción 2. ¿Cómo configuro estos encabezados desde el script? Script significa php o cuál?
KoolKabin
Puede consultar stackoverflow.com/questions/2185449/... este es un ejemplo de Python, pero si está familiarizado con la programación, creo que obtendrá la idea. En php deberás usar encabezados (). Pero tenga en cuenta que en este caso todos los archivos "estáticos" tendrán que ser servidos a través del script que aumentará su cuota de CPU. Ahora se me ocurre que hay una tercera opción. Use CDN para estos archivos.
Ilian Iliev
2

La configuración caduca en el servidor web Lightspeed

Inicie sesión en la Consola de administración y luego> Servidor-> General-> Caduca configuración-> Caduca por tipo

Agregue lo siguiente:

text/css=A604800, text/javascript=A604800, application/javascript=A604800, application/x-javascript=A604800, application/x-shockwave-flash=A604800, image/gif=A604800, image/jpg=A604800, image/jpeg=A604800, image/png=A604800, image/ico=A604800, image/icon=A604800

604800 son los segundos del vencimiento, lo que debería ser adecuado para sus necesidades, ya que son 168 horas, que son 7 días. Además, Light Speed ​​Server utiliza un htaccess al que debe agregar la siguiente línea:

ExpiresActive On

Alternativamente, si no tiene acceso a la consola de administración, intente lo siguiente con el archivo .htaccess:

  ExpiresByType image/png A604800
  ExpiresByType image/gif A604800
  ExpiresByType image/jpg A604800
  ExpiresByType image/jpeg A604800
  ExpiresByType text/javascript A604800
  ExpiresByType application/x-javascript A604800
  ExpiresByType text/css A604800
Simon Hayter
fuente