什么是浏览器缓存?
浏览器缓存是将先前请求的文件存储在浏览器的本地缓存中的过程,以帮助减少加载时间。文件存储在本地后,向服务器发送的请求更少,下载的数据也更少。
为了正确利用浏览器缓存,必须启用某些组件。例如,您必须确保指定一个缓存验证器来帮助浏览器确定是否仍可以从本地缓存中检索文件,或者是否必须向服务器发出请求。此外,您必须为资产正确设置 Expires 或 Cache-Control 标头。两者都使用是多余的。此外,Gtmetrix 更喜欢 Expires 而不是 Cache-Control,因为它得到了更广泛的支持。因此,本文将重点介绍在演示如何利用浏览器缓存时使用 Expires 标头。
缓存控制
Cache-Control 允许我们对浏览器缓存有更多的控制,许多人发现一旦设置它就更容易使用。
# 1 Year for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
Gzip 压缩(对 Magento 有用)
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl|asp|html)$
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>
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
根据您网站的文件,您可以设置不同的到期时间。
如果某些类型的文件更新得更频繁,您可以为它们设置更早的到期时间(即 CSS 文件) .
打开你的 .htaccess 文件。(聪明点:复制你原来的 .htaccess 文件,以防你不小心犯了一个错误而需要恢复)。
现在是时候在 Apache 中启用 Expires 标头模块了(将“ExpiresActive”设置为“On”),因此请将其添加到您的 .htaccess 文件中:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
</IfModule>
为默认到期日期添加“默认指令”可能会很有用,这就是您现在要添加的 2 行:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
</IfModule>
这就是基础。现在为您的每个文件类型添加所有行(您知道,您之前为 favicon、images、CSS 和 Javascript)。你最终会得到一个看起来像这样的代码 sn-p:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year”
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access 1 month”
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
现在用 GTmetrix 运行另一个测试并比较结果。这是我的测试站点在实现 Expires 标头后的结果:
建议
- 积极缓存所有静态资源
- 至少 1 个月到期(推荐:访问权限加 1 年)
- 不要提前一年以上设置缓存!
使用 WordPress 插件的浏览器缓存
W3 Total Cache:
最好的缓存插件之一,具有许多功能,如缓存、CDN 集成(如 MaxCDN),可提高您的网站性能。
注意
- 确保在您的 Apache Web 服务器上启用了
mod_rewrite,
如果没有,请联系您的 Web 服务器技术团队以启用它,因为完成缓存操作需要重写模块
.
-
警告!如果您为某项设置了一个遥远的未来到期日期,然后更新其中一个文件,则必须更改文件的名称
以便浏览器重新获取它。
示例:如果您将 javascript 设置为 1 年,并且您更新了一个 javascript 文件,则必须重命名实际文件。
一个很好的方法是通过版本控制,即 myfile_v1.2.js,但是
更简单的方法是小心你的 Expires 标头(设置
10 年的东西从来都不是 IMO 的好选择)。
您是否注意到您的网站有任何改进?以上是否处理了“利用浏览器缓存”和“添加过期标头”下列出的所有文件?请在下面的 cmets 中告诉我。