【问题标题】:htaccess leverage browser caching for images and csshtaccess 利用浏览器缓存图像和 css
【发布时间】:2012-10-13 07:10:57
【问题描述】:

我正在尝试为我的网站创建一个 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>

或者这段代码是否做了我需要它做的事情?

谢谢

【问题讨论】:

    标签: apache .htaccess


    【解决方案1】:

    试试类似的东西

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

    【讨论】:

    • 谢谢,我可以在 标签之间添加这个,因为我尝试了这个,它仍然显示为过期未设置
    • 不要在&lt;IfModule mod_expires.c&gt;&lt;/IfModule&gt;中添加这个你可以在这个之前或之后添加这个
    • 我已经在你上面给出的代码中添加了“ExpiresActive On to ExpiresByType application/x-javascript "access plus 86400 seconds"' 这就是我在 .htaccess 文件中的全部内容,但它不起作用,请你帮忙。谢谢
    • 是你在 Apache 中的过期模块
    • 我将webspace中的文件添加到我的网页目录中,有什么需要配置的吗?
    【解决方案2】:

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

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

    【讨论】:

    • @MatthewJohnson 与第一个答案有何不同? ://
    • @AwRak 它缓存更多的文件类型是一个区别。另一个是 Cache-Control 没有“public, must-revalidate”。 “必须重新验证”更好地解释 here 公共/私人信息可以找到 here。抱歉,这就是我对此的了解程度!
    • Pingdom 和 Google Page Insights 都希望缓存 CSS 文件。将它添加到这个答案可能会很好,特别是因为它是 OP 原始问题的一部分。
    • @clayRay 已添加,谢谢!我不会更新太多其他内容,但应该注意的是,对 CSS 文件的更改将需要某种缓存清除。
    【解决方案3】:

    关于上面 Matthew Johnson 的回答,它在我的 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>
    

    【讨论】:

    • 鉴于这为浏览器设置了缓存,为什么要在列表中添加诸如 PHP 之类的服务器端脚本类型?
    • 可能存在通过 php 脚本提供文件的极端情况,所以虽然很奇怪,但这对某些人来说确实有意义。
    【解决方案4】:

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

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

    1. 启用压缩
    2. 利用浏览器缓存
    # 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 的分数。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-11-12
      • 1970-01-01
      • 2014-07-29
      • 1970-01-01
      • 2013-09-26
      • 1970-01-01
      • 2011-10-15
      相关资源
      最近更新 更多