htaccess利用浏览器缓存图像和CSS

时间:2012-10-23 11:00:48

标签: apache .htaccess

我正在尝试为我的网站创建一个htaccess文件,而pageSpeed洞察已经显示有图像和一个没有过期的css文件。

我不知道从哪里开始或如何做到这一点,我从在线教程获得此代码,并想知道这是否足够工作。

<IfModule mod_expires.c>
ExpiresActive On
############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>
</IfModule>

或者这段代码是否符合我的要求?

由于

4 个答案:

答案 0 :(得分:44)

尝试类似

的内容
<IfModule mod_expires.c> 
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 1 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 86400 seconds"
  ExpiresByType application/x-javascript "access plus 86400 seconds"
</IfModule>

<FilesMatch "\.(?i:gif|jpe?g|png|ico|css|js|swf)$">

  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>

</FilesMatch>

答案 1 :(得分:25)

我知道这是迟来的答案,但上述内容对我不起作用。相反,我使用了以下内容:

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|html|htm|xml|txt|xsl|css)$">
Header set Cache-Control "max-age=31536050"
</FilesMatch>

答案 2 :(得分:10)

以上回答对我有用,但我也希望在.htaccess中添加其他文件扩展名。下面的代码给我一个很好的解决方案

传递Google PageSpeed Insight的完整.htaccess代码:

  1. 启用压缩
  2. 利用浏览器缓存
  3. # Enable Compression
    <IfModule mod_deflate.c>
      AddOutputFilterByType DEFLATE application/javascript
      AddOutputFilterByType DEFLATE application/rss+xml
      AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
      AddOutputFilterByType DEFLATE application/x-font
      AddOutputFilterByType DEFLATE application/x-font-opentype
      AddOutputFilterByType DEFLATE application/x-font-otf
      AddOutputFilterByType DEFLATE application/x-font-truetype
      AddOutputFilterByType DEFLATE application/x-font-ttf
      AddOutputFilterByType DEFLATE application/x-javascript
      AddOutputFilterByType DEFLATE application/xhtml+xml
      AddOutputFilterByType DEFLATE application/xml
      AddOutputFilterByType DEFLATE font/opentype
      AddOutputFilterByType DEFLATE font/otf
      AddOutputFilterByType DEFLATE font/ttf
      AddOutputFilterByType DEFLATE image/svg+xml
      AddOutputFilterByType DEFLATE image/x-icon
      AddOutputFilterByType DEFLATE text/css
      AddOutputFilterByType DEFLATE text/html
      AddOutputFilterByType DEFLATE text/javascript
      AddOutputFilterByType DEFLATE text/plain
    </IfModule>
    <IfModule mod_gzip.c>
      mod_gzip_on Yes
      mod_gzip_dechunk Yes
      mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
      mod_gzip_item_include handler ^cgi-script$
      mod_gzip_item_include mime ^text/.*
      mod_gzip_item_include mime ^application/x-javascript.*
      mod_gzip_item_exclude mime ^image/.*
      mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    </IfModule>
    
    # Leverage Browser Caching
    <IfModule mod_expires.c>
      ExpiresActive On
      ExpiresByType image/jpg "access 1 year"
      ExpiresByType image/jpeg "access 1 year"
      ExpiresByType image/gif "access 1 year"
      ExpiresByType image/png "access 1 year"
      ExpiresByType text/css "access 1 month"
      ExpiresByType text/html "access 1 month"
      ExpiresByType application/pdf "access 1 month"
      ExpiresByType text/x-javascript "access 1 month"
      ExpiresByType application/x-shockwave-flash "access 1 month"
      ExpiresByType image/x-icon "access 1 year"
      ExpiresDefault "access 1 month"
    </IfModule>
    <IfModule mod_headers.c>
      <filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
      Header set Cache-Control "max-age=2678400, public"
      </filesmatch>
      <filesmatch "\.(html|htm)$">
      Header set Cache-Control "max-age=7200, private, must-revalidate"
      </filesmatch>
      <filesmatch "\.(pdf)$">
      Header set Cache-Control "max-age=86400, public"
      </filesmatch>
      <filesmatch "\.(js)$">
      Header set Cache-Control "max-age=2678400, private"
      </filesmatch>
    </IfModule>
    

    还有一些针对各种Web服务器的配置,请参阅here 希望这有助于获得100/100分。

答案 3 :(得分:0)

关于马修·约翰逊上面的答案,因为它在我的Laravel5.2网站上对我不起作用但是我在列表中添加了“php”并且它有效!!谢谢Matthew Johnson

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|html|htm|xml|php|txt|xsl)$">
Header set Cache-Control "max-age=31536050"
</FilesMatch>