如何设置CSS，JS和图片的过期标头？

38

我最近在Firebug上使用Pagespeed插件分析了我的网站。它建议我设置CSS，JS和图像文件的到期时间。

我想知道我该怎么做？

— 库尔·卡宾
source

37

更新您的Apache配置，以将以下指令作为核心配置的一部分：

# 
# 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>

— 约翰·康德
source

将其放入我的.htaccess文件时，我得到500内部服务器错误

— KoolKabin 2010年

您的Apache设置可能不支持上面列出的所有选项。我将尽快更新此答案，以帮助解决此问题。

— 约翰·孔德

我的Drupal包含javascript / css参考，例如：www.example.com/misc/jquery.js?v=1.4.4或www.example.com/sites/all/modules/nice_menus/css/nice_menus.css?mtu293，似乎不适用于此类文件。从今天开始更新吗？

— AgA

2

@JohnConde为什么同时到期和标头？另外，例如在更新图像或CSS时，是否需要重命名文件？或对于CSS文件，版本控制有效：test.css？123？

— 升起

14

您可以将其放在htaccess中：

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

它将以具有这些扩展名的文件（ico，flv，jpg等）为目标，并将Expires标头设置为访问时间（A）加30天（2592000秒）。如果可以访问，也可以在服务器级别添加它。

— 心怀不满的山羊
source

2

这取决于主机和服务器处理这些事情的方式。选项1）如果您控制服务器，则使apache在响应中添加到期标头选项2）如果您不控制Web服务器，或者您对images / js / css / etc进行服务器管理，则可以从脚本中设置这些标头服务器他们

请记住，这些提示是可取的，但不是绝对的真理。它们不仅可以节省带宽，还可以加快网站访问速度。因此，如果您的网站访问量很少，则不必为此担心太多。

— 伊莲·伊利耶夫（Ilian Iliev）
source

我使用选项2。如何从脚本中设置这些标头。脚本是指php还是哪个？

— KoolKabin 2010年

您可以检查stackoverflow.com/questions/2185449/…这是一个python示例，但是如果您熟悉编程，我想您会明白的。在php中，您将必须使用headers（）。但是请记住，在这种情况下，必须通过脚本为所有“静态”文件提供服务，这会增加您的CPU配额。现在我想到了第三个选择。对这些文件使用CDN。

— Ilian Iliev

2

在Lightspeed Web Server中设置过期

登录到管理控制台，然后>服务器->常规->过期设置->按类型过期

添加以下内容：

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是到期的秒数，它应为您的需要，因为它的168小时为7天。另外，Light Speed Server确实使用htaccess，您需要添加以下行：

ExpiresActive On

或者，如果您没有管理控制台访问权限，请尝试以下.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

— 西蒙·海特
source