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

Question

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

Mit*_*ave 7 .htaccess amazon-s3 octobercms pagespeed-insights

我正在使用OctoberCMS，我有 apache 服务器并使用 AWS，当我进行 PageSpeed 测试时https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.rosterelf.com%2F&tab =桌面我不断收到此错误消息

通过高效的缓存策略提供静态资源

这是我的 .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 #

Run Code Online (Sandbox Code Playgroud)

但它仍然保留了 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 #

Run Code Online (Sandbox Code Playgroud)

Answer 1

MrW*_*ite 3

\n
但它仍然保留了 77 个资源的错误。
\n

\n

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

\n

正如PageSpeed 结果的链接文档中所述：

\n

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

\n

对于Google 页面速度见解报告为缓存“30 天”的您的.jpg资源之一，它具有以下 HTTP 响应标头：.../images/rosterelftechsupport.jpg

\n

\n
cache-control: max-age=2592000, public\nexpires: Thu, 12 May 2022 16:05:33 GMT\n
Run Code Online (Sandbox Code Playgroud)\n

\n

虽然expires标头规定缓存时间为 1 年，但标头max-age指令cache-control规定了 30 天（2,592,000 秒）。所有现代浏览器都会优先考虑cache-control: max-age标头，因此“30天”是缓存时间。

\n

\n
ExpiresByType image/jpeg "access 1 year"\n
Run Code Online (Sandbox Code Playgroud)\n

\n

此 mod_expires 指令设置(mime-type: ) 文件上的expires和标头。所以，这似乎是值得尊重的，因为标头设置正确，并且您没有在其他地方明确设置它。cache-control: max-age.jpgimage/jpegexpires

\n

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

Run Code Online (Sandbox Code Playgroud)\n

\n

但是，任何Header set Cache-Control(mod_headers) 指令（例如此指令）都会覆盖Cache-Controlmod_expires 设置的标头并影响缓存时间。那么，您似乎仍然有一个流氓Header指令？

\n

您当然不需要两者。如果您使用 mod_expires，则仅使用 mod_expires。为此，您不需要 mod_headers。换句话说，您应该删除所有<FilesMatch ...> Header set Cache-Control ... </FilesMatch>块（例如上面的块），因为它们与 mod_expires 指令直接冲突（即ExpiresByType）。

\n

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

\n

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

\n

更新：

\n

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

\n

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

\n
其余 8 个.png图像仍然显示在报告中，并且没有Cache-Control或没有Expires标题，而是直接从中提供服务s3-ap-southeast-2.amazonaws.com- 您的指令不一定会影响。您可能需要检查 S3 存储桶上的设置？
\n
\n
...config/176\xe2\x80\xa6?v=2.9.39&r=stable(connect.facebook.net) 20m\n
Run Code Online (Sandbox Code Playgroud)\n
\n
您有 7 个由外部第三方（例如此）提供的资源，您无法控制这些资源。
\n
\n
...industries/nonprofit.svg(www.rosterelf.com) 30 d\n\nExpiresByType image/svg+xml "access plus 1 month"\n
Run Code Online (Sandbox Code Playgroud)\n
\n
您有 22 张.svg来自您的域的图片。这些都是通过image/svg+xml内容类型提供的。正如您从上面的指令中看到的，ExpiresByType这些“仅”设置为缓存“1 个月”（即 30 天）。如果您希望这些文件缓存更长时间，请更改上述指令，就像您对 JPEG 和 PNG 文件所做的那样。
\n
\n
...js/swiper-bundle.min.js(www.rosterelf.com) 30 d\n\nExpiresByType application/javascript "access plus 1 month"\n
Run Code Online (Sandbox Code Playgroud)\n
\n
您有 11 个.js文件由您的域提供 - 所有文件均带有application/javascript内容类型。ExpiresByType如果您希望这些文件缓存更长时间，请相应地更改上述指令。
\n
但是，您应该注意 Google 的 PageSpeed 报告只是一个“建议”。仅当对您的系统有意义时才更改此设置（以及其他缓存指令）。如果在缓存过期之前需要更改这些文件，您将会遇到问题，除非您已经实现了其他一些缓存破坏技术。
\n
这也意味着以下指令是完全多余的，可以删除：
\n
\n
ExpiresByType text/javascript "access plus 1 month"\nExpiresByType text/x-javascript "access plus 1 month"\n
Run Code Online (Sandbox Code Playgroud)\n
\n
您的服务器正在发送具有正确mime 类型的.js响应，因此也不需要为和设置缓存指令。 application/javascripttext/javascripttext/x-javascript
\n
\n
...css/custom.min.css(www.rosterelf.com) 30 d\n\nExpiresByType text/css "access plus 1 month"\n
Run Code Online (Sandbox Code Playgroud)\n
\n
您有 6 个.css文件由您的域提供。上面的内容与文件相同.js。
\n
\n
... fonts/social-media-icon.ttf?lvmhu5(www.rosterelf.com) 30 d\n
Run Code Online (Sandbox Code Playgroud)\n
\n
您有 6 个.ttf（字体）文件。是的，这些当然应该缓存更长的时间。这些都带有application/font-sfnt^*1 mime/内容类型。但是，您没有明确包含涵盖此内容的指令，因此它将默认为ExpiresDefault（即 1 个月）。您需要为此 mime 类型添加适当的指令。例如：
\n
ExpiresByType application/font-sfnt "access plus 1 year"\n
Run Code Online (Sandbox Code Playgroud)\n
（^*1 application/font-sfnt实际上已被弃用，取而代之的是font/sfnt。）
\n
这可能意味着如果您不提供这些文件类型，那么以下所有（字体缓存）指令都是多余的？
\n
\n
ExpiresByType font/opentype "access plus 1 month"\nExpiresByType application/vnd.ms-fontobject "access plus 1 month"\nExpiresByType application/x-font-ttf "access plus 1 month"\nExpiresByType application/font-woff "access plus 1 month"\nExpiresByType application/font-woff2 "access plus 1 month"\nExpiresByType image/vnd.microsoft.icon "access plus 1 year"\n\n# Fonts\nExpiresByType font/ttf "access plus 1 year"\nExpiresByType font/otf "access plus 1 year"\nExpiresByType font/woff "access plus 1 year"\nExpiresByType font/woff2 "access plus 1 year"\nExpiresByType application/font-woff "access plus 1 year"\n
Run Code Online (Sandbox Code Playgroud)\n
\n
并强调我上面的评论... Google 的 PageSpeed 报告（以及任何其他 SEO 报告）的结果只是建议性的... 一个可能的建议。以较短的缓存时间来服务资源并不一定是“错误的”。这些“建议”并不意味着盲目遵循。不要为了简单地满足报告而实现较长的缓存时间。仅当对您的应用程序有意义时，才应将这些资源缓存更长时间。
\n

归档时间：	4 年，7 月前
查看次数：	17875 次
最近记录：	4 年，7 月前