logo标签列表

使用高效的缓存策略提供静态资源 - Google PageSpeed Insights

.htaccessamazon-s3octobercmspagespeed-insights
7
我正在使用OctoberCMS，并且我有apache服务器，并且使用AWS。当我进行PageSpeed测试https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.rosterelf.com%2F&tab=desktop时，我一直收到错误提示：

使用高效的缓存策略提供静态资产

这是我的.htaccess文件代码，可以解决这个错误。

.htaccess

<IfModule mod_rewrite.c>

    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    <IfModule mod_headers.c>
        <If "%{REQUEST_SCHEME} == 'https' || %{HTTP:X-Forwarded-Proto} == 'https'">            
            Header always set Strict-Transport-Security "max-age=31536000"
        </If>
    </IfModule>

 

    ### MY OTHER DEFAULT CODE OF OCTOBERCMS WHICH IS NOT RELATED TO COMPRESSION ETC ... 

</IfModule>


# TN START GZIP COMPRESSION
<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>
# TN END GZIP COMPRESSION

# TN START DEFLATE COMPRESSION
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font" \
"application/x-font-opentype" \
"application/x-font-otf" \
"application/x-font-truetype" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/otf" \
"font/ttf" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
</IfModule>
# END DEFLATE COMPRESSION

# TN START ENABLE KEEP ALIVE
<ifModule mod_headers.c>
Header set Connection keep-alive

# WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "max-age=604800, public"
</FilesMatch>

# WEEK
<FilesMatch "\.(js|css|swf)$">
    Header set Cache-Control "max-age=604800"
</FilesMatch>

</ifModule>
# TN END ENABLE KEEP ALIVE

# TN - START EXPIRES CACHING #
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/svg "access 1 year"
ExpiresByType audio/ogg "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
ExpiresByType video/ogg "access plus 1 year"
ExpiresByType video/webm "access plus 1 year"
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/xhtml-xml "access 1 month"
ExpiresByType text/x-component "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"

# Fonts
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"

ExpiresDefault "access 1 month"
</IfModule>
# TN - END EXPIRES CACHING #

但是它仍然带有77个资源的错误。

我已经尝试了很多事情，正如您可以看到我添加了很多代码，但错误计数仍然没有减少，而且还在获取.js、.png、.css文件。

请问有人可以指导我在我的代码中缺少了什么吗？

谢谢

更新的HTACCESS文件

<IfModule mod_rewrite.c>

    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    <IfModule mod_headers.c>
        <If "%{REQUEST_SCHEME} == 'https' || %{HTTP:X-Forwarded-Proto} == 'https'">            
            Header always set Strict-Transport-Security "max-age=31536000"
        </If>
    </IfModule>

    RewriteEngine On

    ##
    ## You may need to uncomment the following line for some hosting environments,
    ## if you have installed to a subdirectory, enter the name here also.
    ##
    # RewriteBase /   


</IfModule>


# TN START GZIP COMPRESSION
<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>
# TN END GZIP COMPRESSION

# TN START DEFLATE COMPRESSION
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font" \
"application/x-font-opentype" \
"application/x-font-otf" \
"application/x-font-truetype" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/otf" \
"font/ttf" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
</IfModule>
# END DEFLATE COMPRESSION

# TN START ENABLE KEEP ALIVE
<IfModule mod_headers.c>
    Header set Connection keep-alive

</IfModule>
# TN END ENABLE KEEP ALIVE

# TN - START EXPIRES CACHING #
<IfModule mod_expires.c>
ExpiresActive On

ExpiresDefault "access plus 1 month"

ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/html "access plus 1 month"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/svg "access plus 1 year"
ExpiresByType audio/ogg "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
ExpiresByType video/ogg "access plus 1 year"
ExpiresByType video/webm "access plus 1 year"
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/xhtml-xml "access plus 1 month"
ExpiresByType text/x-component "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"

# Fonts
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"

  <IfModule mod_headers.c>
          Header append Cache-Control "public"
  </IfModule>


</IfModule>


<IfModule mod_headers.c>
  Header unset ETag
</IfModule>
FileETag None

<IfModule mod_headers.c>
  Header unset Last-Modified
</IfModule>

# TN - END EXPIRES CACHING #
只需缓存的长度-他们期望所有静态资产的最短缓存时间为6个月，理想情况下为1年。因此，只需增加它们的缓存时间（CSS、JS、SVG似乎是唯一需要关注的）并在更改时使用缓存破坏技术即可。从给定的文件中我看不到其他任何东西。 - GrahamTheDevRel
@GrahamRitchie 感谢您的回复和反馈。那么我需要将所有内容更改为“1个月”吗？ - Mittul At TechnoBrave
嗯，从您的网站响应来看，您的图像似乎没有任何缓存设置，请确保您启用了 mod_headers。 - Hardik Satasiya
@GrahamRitchie 我已经按照您的建议删除了重复项... 您能否指定列表中哪些项目应设置为1年？ - Mittul At TechnoBrave
@GrahamRitchie，你能否提供其他建议，为什么我仍然会得到大约77个带有图像、png等文件的文件？我已经在我的htaccess文件中放置了一个调用。 - Mittul At TechnoBrave
显示剩余5条评论
1个回答
3
但仍然出现了“77个资源”的错误。
请记住，其中一些资源位于您无法控制的外部域。
正如从PageSpeed结果链接的文档中所述：
尽可能长时间地缓存不可变的静态资源，例如一年或更长时间。
对于您的一个.jpg资源（.../images/rosterelftechsupport.jpg），Google的页面速度洞察报告显示其缓存了“30 d”，它具有以下HTTP响应标头： 
cache-control: max-age=2592000, public
expires: Thu, 12 May 2022 16:05:33 GMT

尽管“expires”标头指定缓存时间为1年，但“cache-control”标头的“max-age”指令指定了30天（2,592,000秒）。所有现代浏览器都将优先处理“cache-control: max-age”标头，因此“30天”是缓存时间。

ExpiresByType image/jpeg "access 1 year"
这个 mod_expires 指令设置了 .jpg（mime-type: image/jpeg）文件的 expires 和 cache-control: max-age 头部信息。因此，这似乎是被认可的，因为 expires 头部信息被正确地设置，并且您没有在其他任何地方明确设置它。 
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "max-age=604800, public"
</FilesMatch>
然而，任何Header set Cache-Control（mod_headers）指令，例如此指令，都将覆盖由mod_expires设置的Cache-Control标头并影响缓存时间。因此，似乎您仍然可能有一个不受控制的Header指令？
如果您正在使用mod_expires，则肯定不需要两者都使用。您只需要使用mod_expires即可。换句话说，应该删除所有<FilesMatch ...> Header set Cache-Control ... </FilesMatch>块（如上所述），因为它们与mod_expires指令（即ExpiresByType）直接冲突。
只有在您的服务器上没有安装mod_expires时才使用mod_headers Header set Cache-Control ...指令。在这种情况下，应该将mod_headers指令包含在<IfModule !mod_expires.c>容器中（即“如果mod_expires不可用”），否则mod_headers将始终具有优先权。
在测试之前，您需要确保浏览器和任何中间代理缓存已清除，因为此资源已被缓存了“30天”。
更新：已从文件中删除FilesMatch，并在我的浏览器的“私人窗口”中打开了网站，然后运行了“Pagespeed Insights”，但仍显示约56个未缓存的资源，包括png图像等。
来自您域的所有.jpg和.png图像都不再出现在该报告中，因此它们似乎已经“解决”了。仍显示在报告中并且没有Cache-Control或Expires标头的其余8个.png图像是直接从s3-ap-southeast-2.amazonaws.com提供的，而这些指令不一定会影响它们。您可能需要检查S3存储桶上的设置？ 
...config/176…?v=2.9.39&r=stable(connect.facebook.net)        20m

您的网站有7个来自第三方资源（例如此处）的请求，这些请求您无法控制。

...industries/nonprofit.svg(www.rosterelf.com)                30 d

ExpiresByType image/svg+xml "access plus 1 month"
您的域名中有22个.svg图像，它们都是使用image/svg+xml内容类型提供的。从上面的ExpiresByType指令可以看出，这些图像仅设置为缓存“1个月”（即30天）。如果您希望长时间缓存这些图像，则应像对JPEG和PNG文件所做的更改一样更改上述指令。请注意保留HTML标签。 
...js/swiper-bundle.min.js(www.rosterelf.com)                 30 d

ExpiresByType application/javascript "access plus 1 month"
您的域名下有11个.js文件，所有这些文件使用application/javascript内容类型进行服务。如果您想要缓存这些文件更长时间，请相应地更改上述ExpiresByType指令。但请注意，Google的PageSpeed报告只是一个“建议”。只有在对您的系统有意义时才更改此类缓存指令（以及其他缓存指令）。除非您实施了其他缓存破坏技术，否则在缓存过期之前需要更改这些文件将会出现问题。这也意味着以下指令完全是多余的，可以删除： 
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"

你的服务器以application/javascript的正确MIME类型发送.js响应，因此不需要为text/javascript和text/x-javascript设置缓存指令。

...css/custom.min.css(www.rosterelf.com)                     30 d

ExpiresByType text/css "access plus 1 month"
您的域名中有6个.css文件。对于.js文件，同样适用上述规定。 
... fonts/social-media-icon.ttf?lvmhu5(www.rosterelf.com)    30 d
您有 6 个 .ttf（字体）文件。是的，这些文件应该被缓存更长时间。所有这些文件都使用 application/font-sfnt*1 MIME/Content-Type 进行服务，但您没有显式指定相应的指令，所以它将默认为 ExpiresDefault （即一个月）。您需要为此 MIME 类型添加适当的指令。例如：
ExpiresByType application/font-sfnt "access plus 1 year"

(*1 application/font-sfnt已经被font/sfnt所取代，成为过时的标准。)

这意味着如果您不提供这些文件类型，则以下所有（字体缓存）指令都是多余的。

ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"

# Fonts
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"

强调一下我的上面的评论... Google的PageSpeed报告（以及任何其他SEO报告）的结果只是建议...可能是一个建议。使用较短的缓存时间提供资源并不一定是“错误”的。这些“建议”并不意味着要盲目遵循。只有在对您的应用程序有意义的情况下，这些资源才应该缓存更长时间。

谢谢你的回答..那么你认为我应该从我的代码中删除<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">吗？你能帮我吗..我完全不知道怎么做。谢谢 - Mittul At TechnoBrave
我已经从文件中删除了 FilesMatch，并在我的浏览器的“隐私窗口”中检查了一下，然后打开了网站并运行了“Pagespeed Insights”，但仍然显示大约56个未缓存的资源，包括png图像等。 - Mittul At TechnoBrave
我还从htaccess文件中删除了Header unset ETag部分和Header unset Last-Modified部分，但仍然显示相同的缓存错误。 - Mittul At TechnoBrave
感谢您的反馈。根据您的建议，我已经删除了ExpiresByType text/javascript "access plus 1 month"、ExpiresByType text/x-javascript "access plus 1 month"、ExpiresByType text/css "access plus 1 month"这三行，并添加了ExpiresByType application/font-sfnt "access plus 1 year"。似乎它已经减少了数量。但我仍然有一些在我控制范围内的png和svg图像错误。您能告诉我现在的原因是什么吗？谢谢。 - Mittul At TechnoBrave
我可以接受CSS和JS文件的缓存时间为1个月。是的，其中一些PNG文件是从S3存储桶中提供的。对于它们，我该怎么办？ - Mittul At TechnoBrave
显示剩余4条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接