Como definir cabeçalhos de expiração para CSS, JS e imagens?

38

Recentemente, analisei meu site com o add-in pagespeed no firebug. Ele me sugeriu definir a expiração em CSS, JS e arquivos de imagem.

Eu estou querendo saber como faço isso?

css javascript cache page-speed KoolKabin
fonte

Respostas:

37

Atualize sua configuração do Apache para incluir as diretrizes abaixo como parte da sua configuração 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
fonte
Eu recebo 500 Internal Server Error quando eu colocá-lo no meu arquivo .htaccess
KoolKabin
Sua configuração do Apache pode não suportar todas as opções listadas acima. Atualizaremos esta resposta em breve para ajudar a resolver esse problema.
John Conde
Meu Drupal contém referências javascript / css como: www.example.com/misc/jquery.js?v=1.4.4 ou www.example.com/sites/all/modules/nice_menus/css/nice_menus.css?mtu293, parece não funcionar para esses arquivos. Está atualizado a partir de hoje?
AgA 28/09
2
@JohnConde Por que ambos expiram e cabeçalhos? Além disso, ao atualizar uma imagem ou css, por exemplo, o arquivo precisa ser renomeado? Ou para um arquivo css, o controle de versão funciona: test.css? 123?
Rise Against
14

Você pode colocar isso no seu htaccess:

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

Ele direcionará os arquivos com essas extensões (ico, flv, jpg e assim por diante) e definirá o cabeçalho Expira como o tempo de acesso (A) mais 30 dias (2592000 segundos). Você também pode adicionar isso no nível do servidor, se tiver acesso a isso.

DisgruntledGoat
fonte
2

Depende do host e da maneira como você administra essas coisas. Opção 1) se você controla o servidor, faça com que o apache adicione cabeçalhos de expiração na resposta Opção 2) se você não controla o servidor da Web, ou as imagens / js / css / etc, você pode definir esses cabeçalhos a partir do script que servidor deles

Tenha em mente que essas dicas são recomendáveis, mas não a verdade absoluta. São mais para economizar uma largura de banda do que para acelerar seu site. Portanto, se você tem pouco tráfego no seu site, não se preocupe muito com isso.

Ilian Iliev
fonte
Estou com a opção 2. Como faço para definir esses cabeçalhos no script. Script significa php ou qual?
KoolKabin 11/11/2010
Você pode verificar stackoverflow.com/questions/2185449/… este é um exemplo de python, mas se você estiver familiarizado com a programação, acho que você entenderá. No php você terá que usar headers (). Mas lembre-se de que, neste caso, todos os arquivos "estáticos" terão que ser exibidos através do script que aumentará sua cota de CPU. Agora me ocorre que existe uma terceira opção. Use CDN para esses arquivos.
Ilian Iliev
2

A configuração expira no servidor Web Lightspeed

Entre no Console de administração e, em seguida,> Servidor-> Geral-> Expira configurações-> Expira por tipo

Adicione o seguinte:

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 são os segundos do vencimento, que devem ser adequados às suas necessidades desde as 168 horas, que são 7 dias. Além disso, o Light Speed ​​Server usa um htaccess que você precisa adicionar a seguinte linha:

ExpiresActive On

Como alternativa, se você não tiver acesso ao console administrativo, tente o seguinte arquivo .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
fonte