Bg

利用浏览器缓存使您的网站更快

缓存机制在服务器和访问者的浏览器之间运行,要么在服务器端,要么在访问者的计算机上。它可以存储文件(如html/php/css/js文件、图片等)的副本或代码字符串,以便更快地访问,而不必不断从服务器请求它们。对于网站来说,缓存文件的最有效方法是利用浏览器缓存。但还有其他方法可以利用缓存来为您服务。为您的网站使用一种或多种缓存机制可以大大提高您网页的性能。

测试您的URL

使用网站速度测试或浏览器缓存测试检查您的网页文件的缓存效果。

利用浏览器缓存是什么意思?

对于页面速度来说,最重要的缓存机制是浏览器缓存。网页上使用的大多数静态文件都可以保存在访问者的计算机上以供将来访问。每次访问者访问您网站上的新页面时,这些文件将从访问者的计算机而不是您的服务器访问,这将大大加快页面加载时间。

通过.htaccess文件为Apache利用浏览器缓存

您可以通过在.htaccess文件中添加一个小片段来为Apache服务器利用浏览器缓存。以下是两种推荐的方法:

Mod_Expires(最常用的选项)

将以下代码添加到.htaccess文件中,并根据您的喜好编辑访问时间和文件类型:

<IfModule mod_expires.c>
ExpiresActive On
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
ExpiresByType application/vnd.ms-fontobject "access 1 year"
ExpiresByType application/x-font-ttf "access 1 year"
ExpiresByType application/x-font-opentype "access 1 year"
ExpiresByType application/x-font-woff "access 1 year"
ExpiresByType image/svg+xml "access 1 year"
ExpiresByType text/html "access 1 hour"
ExpiresByType text/css "access 14 days"
ExpiresByType text/x-javascript "access 3 weeks"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType image/gif "access 2 months"
ExpiresByType image/png "access 2 months"
ExpiresByType image/jpg "access 2 months"
ExpiresByType image/jpeg "access 2 months"
ExpiresByType image/gif "access 2 months"
ExpiresByType application/pdf "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

不工作?

通过SSH访问运行以下命令确保服务器上启用了mod_expires模块(或向您的主机询问此事):

sudo a2enmod expires

Mod_Headers(效果也很好)

将以下代码添加到.htaccess文件中。您可以根据您的喜好编辑文件类型和缓存访问时间。现在访问时间设置为2592000秒,即30天。

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

各种访问时间的示例:

# 1 YEAR
Header set Cache-Control "max-age=29030400, public"
# 1 MONTH
Header set Cache-Control "max-age=2592000, public"
# 1 WEEK
Header set Cache-Control "max-age=604800, public"
# 1 HOUR
Header set Cache-Control "max-age=3600, public"
# DON'T CACHE ANY FILE
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"

不工作?

通过SSH访问运行以下命令确保服务器上启用了mod_headers模块(或向您的主机询问此事):

sudo a2enmod headers

为Windows服务器利用浏览器缓存

您可以通过在IIS管理器中配置它或向web.config文件添加一个小片段来为Microsoft(Windows/ASP.NET)服务器利用浏览器缓存。在下面阅读更多内容:

向web.config文件添加片段(最常用的选项)

将以下片段添加到web.config文件中。web.config文件应该放置在您网站的文档根目录中。

<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
</staticContent>
</system.webServer>

上面的片段将缓存您的网页加载的所有静态资源。您可以通过cacheControlMaxAge设置控制缓存期。现在设置设置为30天。

通过IIS管理器

按照以下步骤操作:

  1. 导航到开始菜单 >> 管理工具 >> Internet信息服务(IIS)管理器。
  2. 在左侧列表中找到您的应用程序。
  3. 右键单击应用程序并在菜单中选择输出缓存。
  4. 现在单击添加。您现在可以为任何您希望的网页文件类型添加缓存规则。

进一步加快您的网站速度?

尽管浏览器缓存是页面速度最强大的缓存形式,但还有其他几种缓存形式可以使您的网站更快。您将在下面找到一些最好的形式。

WordPress网站的缓存

当您为WordPress网站使用缓存插件时,您可以使WordPress快得多。WordPress缓存插件将创建您网页的静态HTML版本,而不是每次访问者访问您的网站时都动态生成页面。这大大减少了服务器负载并加快了页面加载时间。一些流行的WordPress缓存插件包括W3 Total Cache、WP Super Cache和WP Rocket。

服务器端缓存

服务器端缓存涉及在服务器上缓存网页的生成版本,这样就不必为每个请求重新生成它们。这可以包括PHP操作码缓存(如OPcache)、数据库查询缓存和对象缓存。服务器端缓存可以显著减少服务器处理时间并提高网站性能。

内容分发网络(CDN)

CDN是一组分布在全球多个位置的服务器,用于向访问者提供内容。当访问者请求您的网站时,CDN将从距离访问者最近的服务器提供内容,减少延迟并加快页面加载时间。一些流行的CDN服务包括Cloudflare、MaxCDN和Akamai。