如何缓存网站以获得高峰性能:网络缓存的初学者指南

已发表: 2025-03-20

学习如何缓存网站至关重要。缓存对于网站性能,用户体验和SEO很重要。实施它有几种方法,您将在这篇文章中了解所有内容。

下面,我们讨论什么是缓存,其工作原理,其好处以及存在的不同类型。之后,我们向您展示了您可以使用三种不同的方法来启用网站的缓存以及案例研究,以指出其对性能的影响。最后,我们将迅速介绍如何以及为什么清除网站缓存。

什么是缓存?

在最基本的层面上,缓存意味着将文件的副本存储在缓存(临时存储位置)中,以使其可快速访问。这是在许多软件和技术领域中使用的方法,包括浏览器,程序和操作系统。

由于网站由不同类型的文件组成,因此它们也非常适合缓存。您可以存储网站的HTML,CSS,JavaScript和图像文件,以允许浏览器更快地访问它们并更快地向您的网站显示。

字幕方式的示意图
字幕方式的示意图

某些类型的内容比其他内容更适合缓存。例如,静态内容(含义不经常变化)非常适合它。您的网站徽标是一个很好的例子,因为您不太可能经常切换它。

另一方面,经常变化的内容是另一回事。虽然您也可以缓存它,但您必须制定规则,以确保访问者看不到过时的版本。很快就会有更多。

缓存网站的好处

缓存网站的主要原因是提高性能。如果浏览器可以更快地使用它需要显示网站的文件,则访问者会更快地查看网站。

这会带来更好的用户体验,这使访问者更有可能在您的网站上停留更长的时间,采取所需的措施,例如购买产品或以后返回。您的转化率和底线的所有好消息。

网站速度也是搜索引擎关心的东西。十多年来,Google一直将其用作排名因素。此外,其核心Web Vitals Metrics专门测量了一个页面的出现速度以及对用户输入的响应速度。

核心Web Vitals字段数据在PagesPeed Insights中
核心Web Vitals字段数据在PagesPeed Insights中

此外,缓存减轻了服务器的压力。它减少了重复访问者必须从您的网站下载的文件数量,以及您的服务器必须同时处理多少个请求。另外,缓存甚至可以使您将一些工作外包给外部服务器。

当您的网站变得越来越流行时,这一点尤其重要。缓存有助于使您的服务器不知所措。另外,如果您采用有限的托管计划,它可以节省带宽和成本。

缓存类型是什么?

可以在加载过程的不同级别缓存网站。有两种类型:服务器和客户端缓存。

客户端缓存与您的访问者的计算机或浏览器(即“客户端”)中发生的任何事情有关。另一方面,服务器缓存发生在包含您网站文件的机器上。

浏览器/客户端缓​​存

当浏览器显示网站时,他们必须下载大量数据。为了缩短重复访问的加载时间,他们将许多内容存储在访问者的硬盘驱动器上,访问速度更快。

其中一个例子是DNS缓存。这意味着本地保存与网站关联的IP地址,因此浏览器下次您要访问该网站时不必查找它。

此外,浏览器始终首先检查其缓存,以查看是否存在任何必需的资产(例如图像和其他文件)。这样,他们就不需要与服务器联系太多。

浏览器缓存的工作方式的说明。
浏览器缓存的工作方式的说明 - 来源
请记住:浏览器缓存很棒。唯一的缺点是您无法控制它。浏览器制造商决定其缓存政策,而不是您。

服务器缓存

服务器缓存的形式不同。它们主要在服务器上保存的数据类型和数量不同:

  • 页面缓存:这意味着保存已经编译的页面的HTML版本,因此不必为每个访问者从头开始创建它。
  • 对象缓存:在这里,服务器保存数据库请求以进行重复使用,例如在在线商店中的产品搜索。
  • 片段缓存:描述存储特定的网站元素,通常是图像之类的静态资源。
  • CDN缓存:在这种情况下,您的网站数据副本位于不同位置的其他服务器上。它允许访问者从最接近他们的服务器上下载它。
请记住:服务器缓存在您控制之下,使其成为加快网站加快网站的好工具。了解有关WordPress缓存的更多信息。

缓存的工作原理

查看以下图像:

如何缓存wokrs
缓存的工作原理

从以上,已经很容易理解缓存的工作方式:

  1. 用户在URL中键入URL和Web浏览器,检查是否在缓存中具有所请求的页面数据。
  1. 如果确实如此,它将向服务器发送一条消息,以声明其保存的文件版本。
  1. 服务器验证是否有较新的版本,如果有的话,将发送更新的资源。如果以前请求它们,服务器可以从自己的缓存中传输它们,而无需从头开始处理它们。
  1. Web浏览器使用其缓存中的现有数据以及从服务器发送的任何数据显示了请求的网页。

现在是时候谈论使缓存成为可能的技术的时候了:缓存标题。

了解请求和响应标题

请求和响应标头是由浏览器和服务器交换的小文本。它们包括重要的信息和指令,用于它们之间传递的数据。

缓存响应标头示例
缓存响应标头示例

他们要做的一件事是为此目的配置缓存行为,并存在几个标头。它们包括缓存控制,到期,最后修饰和ETAG。缓存标头基本上以两种方式工作:

  1. 声明网站文件是否应完全缓存,多长时间以及谁(浏览器和/或服务器)。
  1. 标记文件的年龄和“版本”,以便仅在服务器上有较新版本时浏览器将其重新下载。

所有这些都有助于减少需要传输以加载网站的文件的数量和数据的数量,从而有助于加快流程。尽管缓存的标头似乎有些技术性,但重要的是要注意,尤其是如果您决定手工配置服务器上的缓存。

如何缓存网站:3个要考虑的选项

在所有这些理论之后,让我们讨论如何用实际术语来缓存网站。

1。手动启用缓存

手动配置缓存是最复杂的方法,因为它要求您手动在服务器上设置缓存标头。

第一步是检查现状,因为您的托管提供商或您的网站软件可能已经为您完成了一些工作。为此,在浏览器中打开您的网站,访问开发人员工具(在大多数浏览器中,CTRL/CMD+Shift+I),请转到网络选项卡(您可能必须重新加载页面才能在此处查看某些内容)。

浏览器开发人员工具网络选项卡
浏览器开发人员工具网络选项卡

单击任何资源以查看其请求和响应标头。

查看缓存响应标题
查看缓存响应标题

之后,您需要定义您的缓存策略。对于每种用例,这看起来都不同。例如,新闻网站需要比小册子网站较短的缓存间隔。新闻网站的内容在一分钟内发生了变化,而小册子几乎保持不变。

通常,您想尝试平衡缓存持续时间和数据新鲜度:

  • 缓存静态资产更长,例如媒体文件和可下载的内容。例如,您可能可以在最长一年的时间内缓存徽标和字体文件。
  • 使用缓存控制:无存储的资源,这些资源永远不应该被缓存。
  • 包括验证器,例如最后修饰或ETAG,以确保资源新鲜度,而无需牺牲缓存的好处。一些网络缓存还需要一个年龄控制的标题和验证器才能工作。
您可以在Web.DEV文章中找到有关缓存的详细提示。

下一步是在服务器上实现所选的设置。如何执行此操作取决于您的服务器正在运行的软件。以下是最常见设置的说明:

  • nginx
  • apache

另外,您的托管提供商也可以提供缓存以及从托管面板中激活它的能力。

2。使用CDN

缓存您的网站的另一种方法是注册CDN。为此,您首先需要选择CDN提供商。我们将在此处以CloudFlare为例,因为它是最受欢迎的服务之一。

首先注册您选择的CDN。转到他们的网站并创建一个帐户。

注册Cloudflare
注册Cloudflare

选择适合您需求并提供网站地址的计划。

扫描网站名称服务器信息Cloudflare
扫描网站名称服务器信息Cloudflare

之后,您需要更新DNS设置。 CDN提供商将扫描您当前的记录,然后向您显示其名称服务器。

CloudFlare名称服务器信息
CloudFlare名称服务器信息

将其登录到您的域注册商(例如Namecheap,Godaddy或Google域),找到DNS设置部分,并用CDN给您的名称服务器替换现有名称服务器。

域注册商DNS设置示例
域注册商DNS设置示例

保存修改,然后等待。 DNS变化可能需要几个小时才能完全传播。完成后,您的网站将成功通过CDN路由。最后一步是确保启用了CDN的缓存。

您是否知道,除了CDN之外,还有许多其他选择可以加快您的网站?

3。使用缓存插件

最后,如果您使用的是WordPress网站,则可以使用诸如WP Rocket之类的性能插件。它会自动照顾与缓存有关的所有内容,因此您不必处理技术零件。另外,您需要做的就是安装和激活插件。

安装WP火箭以缓存您的网站
安装WP火箭以缓存您的网站

执行此操作后,缓存立即在您的网站上活动,包括用于移动设备的专用缓存。根据高级规则,您可以进一步调整缓存。

WP火箭高级缓存规则
WP火箭高级缓存规则

除其他选项外,您可以确定缓存寿命并定义您不想使用缓存的页面,cookie和用户代理。您会在文档中找到更多信息。

除缓存外,WP Rocket还提供更多功能来加快您的WordPress网站,包括:

  • 图像和视频的懒惰加载
  • 推迟渲染阻滞资源
  • 预加载缓存,链接,外部文件和字体
  • 自我托管的Google字体
  • 数据库优化
  • 能够轻松连接到包括RocketCDN的CDN,即WP Rocket自己的CDN。

更重要的是,WP Rocket在后台实现了许多额外的绩效改进。其中包括GZIP压缩,缩小CSS和JavaScript文件,并在折叠上方优化图像以改善最大的内容涂料。

实际上,一旦您激活插件,80%的性能最佳实践就会在您的网站上采取行动。结果,您的网站立即变得更快,而无需自己做任何事情。

缓存网站的性能影响:案例研究

为了检查缓存对改善现实生活中网站速度的影响,我们建立了一个带有一些虚拟内容的测试网站,并通过激活WP Rocket之前和之后通过Pagespeed Insight进行了运行。

网站性能测试页面
网站性能测试页面

这是无需缓存的移动设备的结果:

缓存之前的速度测试结果
缓存之前的速度测试结果
移动性能得分78
首先满足的油漆1.2s
最大的内容油漆5.3s
速度索引4.1

现在,让我们看看激活缓存后会发生什么:

缓存激活的速度测试结果
缓存激活的速度测试结果
移动性能得分81
首先满足的油漆1.1
最大的内容油漆5.3s
速度索引1.1

虽然效果并不大,但它们是引人注目的。尤其是将速度指数值提高三秒钟的提高没有嘲笑。

正如我们在整篇文章中所讨论的那样,缓存对反复访问者的影响最大。由于PagesPeed Insights故意并不能利用缓存所提供的太多优势,因此难怪效果不会更大。对于您网站的重复访问者来说,应该更明显。

如果您想知道,下面是当您在WP火箭弹中更进一步的速度改进时,会发生什么,例如删除未使用的CSS,推迟JavaScript,懒惰的图像加载和预加载。它要做的就是检查一些盒子。

激活其他性能改进后的速度测试结果
激活其他性能改进后的速度测试结果

如何清除网站缓存

清除网站的缓存对于解决问题,添加新功能以及确保访问者可见最新内容是必需的。自然,由于缓存发生在不同级别上,因此也有不同的方式清空。

删除浏览器缓存

清空浏览器缓存的确切方法取决于您正在使用的浏览器,但所有浏览器都在其设置中具有选项。在Chrome中,您可以在隐私和安全性>删除浏览数据下发现它。

删除Chrome中的浏览器缓存
删除Chrome中的浏览器缓存

清除服务器缓存

如果在您的服务器上实现了缓存,则您的托管提供商很可能可以选择清除它。

清除网站托管仪表板中的缓存
清除网站托管仪表板中的缓存

清空CDN的缓存

清除CDN缓存自然会通过您的CDN提供商发生。例如,在CloudFlare中,该选项可在缓存>配置>“清除缓存”下可用。

CDN仪表板中的清除缓存
CDN仪表板中的清除缓存

在您的网站上清除缓存

如果您使用插件来缓存您的网站,则通常在某个地方有一个按钮,该按钮可以清除缓存。 WP Rocket会在适当的时间自动清除网站缓存,例如更改其设置,发布新内容,修改网站或缓存寿命耗尽时。

如果您想手动执行此操作,可以在WordPress后端的设置> WP Rocket下直接在仪表板上找到此选项。

WP火箭中的清除缓存
WP火箭中的清除缓存

您还可以通过将悬停在该条目悬停在WordPress编辑器内的单个页面或从页面帖子菜单中清除缓存。

WORDPRESS中的删除页面缓存与WP Rocket
WORDPRESS中的删除页面缓存与WP Rocket

您如何缓存网站?现在你知道了

缓存是使您的网站更快的最基本方法之一。这是一种简单的方法,可以减少需要传输的数据量,以供访问者查看您的网站。

在不同级别的加载过程中,可以使用缓存,并且可以针对不同的网站元素,尽管原理保持不变。

使用WP Rocket自动在WordPress网站上实现缓存,并利用数十种其他性能功能和最佳实践,以使您的网站立即更快。该插件带有14天的退款保证,因此您可以完全无风险测试。