如何利用 WordPress 中的浏览器缓存来优化页面加载时间

优化网站速度是一项永无止境的任务。总有一些可以调整的地方,让每次加载时间缩短几毫秒。虽然这听起来可能不多,但每次调整都会带来好处。

我之前谈过缓存,但那都是服务器端缓存。这是唾手可得的成果,因为你可以更好地控制它,并且它将带来更大的整体差异。 

不过,一旦你完成了这些简单的任务,你仍然可以做一些事情来加快速度。其中之一就是利用浏览器缓存。 

浏览器缓存和服务器缓存之间的区别

之前我们讨论了服务器端缓存。也就是说,保存昂贵操作的结果,这样我们就不会在每次页面加载时执行它们。API 调用和复杂的数据库查询是应该缓存在服务器端的很好的例子。我们关于对象缓存的视频可以帮助您更好地理解这一点:

 

相反,浏览器缓存与“昂贵的操作”无关,而只是减 教师数据库 少每次有人从您的网站加载页面时通过网络传输的实际字节数。 

教师数据库

什么是浏览器缓存?

所有现代浏览器都会留出文件系统的一部分来临时 虚荣电话号码含义好处如何获取 存储内容。这称为缓存。现代网站由许多不同的内容组成:

  • HTML
  • 图片
  • CSS
  • JavaScript
  • 其他媒体

其中一些内容是静态的,即它们从不或很少改变。例如,您公司的徽标可能不会经常更改。将公司徽标的图形存储在浏览器的缓存中意味着您无需从服务器实际获取任何内容来绘制图像。

浏览器缓存在 WordPress 中的工作原理

当用户在浏览器中输入 URL 时,浏览器和服务器之间就会开始对话。

浏览器:嘿,您托管这个页面吗?

服务器:是的,这是 HTML

浏览器: [读取 HTML 并构 销售线索 建显示页面所需请求的列表]

浏览器:好的,下面是显示页面所需的其他内容的列表

服务员:给您……

服务员:给您……

服务员:给您……

服务器会一直运行,直到向浏览器提供其所请求的所有内容。有时这些内容是小图形,有时这些内容是大型 JavaScript 文件或 CSS 文件。无论它们是什么,如果没有浏览器缓存,浏览器每次都必须请求这些项目中的每一个

如果用户访问您的商店并浏览,会怎么样?他们可能会点击 5、10、15 个页面。这些页面的大部分内容都是一遍又一遍重复的相同内容。您的基本 CSS、JavaScript、公司徽标……在各个页面之间永远不会改变。但浏览器每次都必须请求它,服务器必须发送它。

浏览器缓存让浏览器决定暂时存储其中一些内容并重新使用它们。这缩短了浏览器和服务器之间的对话。在服务器将页面的 HTML 交给浏览器后,浏览器会构建显示页面所需的内容列表。使用浏览器缓存后,它会查看已有内容列表并将其从列表中删除,然后再继续与服务器进行讨论。

控制浏览器缓存

问题是浏览器并没有那么聪明。如果任由它们自行运作,它们会缓存所有内容,而不会请求任何内容。虽然这会让用户体验非常快,但最终浏览器会向用户显示旧数据。 

你能想象你的浏览器存储你最喜欢的球类运动比赛的当前比分吗?无论时间过去多久,无论你刷新多少次,比分都不会改变,因为浏览器已经缓存了比分。 

因此,显然我们需要某种方式来告诉浏览器哪些内容可以缓存,哪些内容不能缓存。即使是可以缓存的内容,我们也希望告诉浏览器它何时不再有用,以便它知道要请求新的副本。为此,我们使用“标头”

在浏览器和服务器之间的对话中,每个请求都会传递一些数据,这些数据被称为标头。用户永远看不到标头,但它们会影响用户看到的内容。

服务器向浏览器发送不同的标头,帮助它确定可以缓存的内容和缓存位置。服务器和浏览器可以交换几个不同的标头和值来控制缓存 – 在大多数情况下,它归结为以下两个

1. 缓存控制

Cache-Control 标头是浏览器首先查看的标头。它告诉 优化页面  浏览器如何处理刚收到的实体。最重要的可能值是:

  • no-cache
    这告诉浏览器可以缓存此资源,但必须与服务器核对以确保它具有最新版本。
  • public
    这会告诉浏览器(或者像 CDN 这样的中介)可以缓存此资源。
  • private
    这意味着这是一个可缓存的资源,但只能由浏览器缓存。CDN 无法缓存此资源。 
  • no-store
    这告诉浏览器该资源永远不应该被缓存。

2. 过期

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部