使用有效的缓存策略提供静态资产 - Google PageSpeed Insights答案

【问题标题】：Serve static assets with an efficient cache policy - Google PageSpeed Insights使用有效的缓存策略提供静态资产 - Google PageSpeed Insights
【发布时间】：2021-07-23 11:58:17
【问题描述】：

我正在使用 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 看起来是唯一需要考虑的问题）并在它们发生变化时采用缓存破坏技术。从给定的文件中我看不到任何其他内容。
@GrahamRitchie 感谢您的回复和反馈。那么我需要全部更改为“1 个月”吗？
将所有“1 个月”更改为至少 6 个月或最好是一年。但这仅适用于静态资产（因此 HTML 可以更短，rss 可以更短等）。将静态资产视为位于文件系统中的任何东西，而不是通过代码生成 - 所有这些都应该有 1 年的缓存。
你也有一些重复 - 例如<FilesMatch "\.(js|css|swf)$"> 所以你可能想在你把它们都设置得更远的时候删除它，所以它们应该被覆盖。
嗯，从您的网站响应看来，您的图片没有任何缓存内容，请确保您的 mod_headers 已启用

标签： .htaccess amazon-s3 octobercms pagespeed-insights

【解决方案1】：

但它仍然使用 77 个资源保持此错误。

请记住，其中一些资源位于您无法控制的外部域中。

如the linked document from the PageSpeed results中所述：

如果可能，将不可变的静态资产缓存很长时间，例如一年或更长时间。

对于您的.jpg 资源.../images/rosterelftechsupport.jpg 之一，Google 的 pagespeed 洞察报告将其缓存为“30 天”，它具有以下 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 类型：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。为此，您不需要 mod_headers。换句话说，您应该删除所有 <FilesMatch ...> Header set Cache-Control ... </FilesMatch> 块（例如上面的块），因为它们与 mod_expires 指令直接冲突（即ExpiresByType）。

使用 mod_headers Header set Cache-Control ... 指令的唯一原因是您的服务器上没有 mod_expires。在这里同时使用 mod_expires 和 mod_headers 的唯一原因是，如果您在多个服务器上安装应用程序，并且预计不会在所有服务器上安装 mod_expires（不太可能）。在这种情况下，mod_headers 指令应包含在 <IfModule !mod_expires.c> 容器中（即“如果 mod_expires 不可用”），否则 mod_headers 将始终优先（如上所述）。

您需要在测试前确保浏览器和任何中间代理缓存都已清除，因为此资源已缓存“30 天”。

更新：

我已经从文件中删除了 FilesMatch，还检查了我的浏览器的“私人窗口”并打开了网站，然后运行了“Pagespeed Insights”.. 但它仍然显示了大约 56 个未缓存的资源，包括 png 图像等。

所有.jpg 和.png 图像来自您的域 不再出现在该报告中，因此它们似乎已“解决”。

其余 8 个 .png 图像仍显示在报告中并且没有 Cache-Control 或 Expires 标头直接从 s3-ap-southeast-2.amazonaws.com 提供 - 您的指令不一定会影响。您可能需要检查 S3 存储桶上的设置？

...config/176…?v=2.9.39&r=stable(connect.facebook.net)        20m

您有 7 个由您无法控制的外部 3rd 方（例如此类）提供的资源。

...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 文件所做的那样。

...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（即 1 个月）。您需要为此 mime 类型添加适当的指令。例如：

ExpiresByType application/font-sfnt "access plus 1 year"

(^*1application/font-sfnt is actually deprecated in favour of 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)$"> 吗？你能帮我吗..我对此完全空白。谢谢
@MittulAtTechnoBrave 是的，您应该删除所有 <FilesMatch ...> Header set Cache-Control ... </FilesMatch> 块，因为它们与 mod_expires 指令直接冲突（即ExpiresByType）。我已经更新了我的答案以澄清这一点。
我已经从文件中删除了FilesMatch，还检查了我浏览器的“私人窗口”并打开了网站，然后运行了“Pagespeed Insights”......但它仍然显示大约 56 个资源而不是缓存包括 png 图像等。
我还更新了我的问题中的 .htaccess 文件，以便您现在可以更好地了解文件中的内容。
我还从 htaccess 文件中删除了 Header unset ETag 部分、Header unset Last-Modified 部分，但仍然显示相同的缓存错误。