什么是网站速度？

网站速度说白了就是网站点击后的加载速度

“页面速度”和“网站速度”之间其实很像，只不过一个是针对一个页面，另一个是针对整个网站。

而且网站上任何单个页面的速度通常都反映了整个网站的整体表现，因此，优化页面速度实际上与优化网站速度相同。

关键区别在于，网站速度监控会跟踪具有代表性的页面作为样本，从而跟踪整个网站的性能。 

我的团队的研究发现，较低的页面加载时间与自然排名和转化率之间存在直接的相关性。 

有很多研究也证实了这个观点。比如说：

• Portent的一项研究发现，加载时间为 1 秒的网站转化率比加载时间为 5 秒的网站高出三倍。

• NitroPack的研究也表明，加载时间从 2 秒增加到 3 秒会导致访客跳出率增加 50%。 

1. 了解并使用 PageSpeed Insights 

PageSpeed Insights 是 Google 推出的一款免费网站性能衡量工具。

“性能”评估的是页面的加载速度以及加载后的响应能力。

Google 结合了三个主要指标来评估性能：

1. 最大内容绘制 (LCP)：衡量页面完全加载所需的时间。Google 建议最低加载时间为 2.5 秒。 

2. 交互到下一次绘制 (INP)：评估页面响应用户交互（例如打开菜单或常见问题解答下拉菜单）的速度。理想情况下，200 毫秒以内就算不错了。 

3. 累积布局偏移 (CLS)：考察的是页面在其生命周期内的稳定性（即元素不会移动或跳动）。它本身并不是一个速度指标，但它可能会对页面加载时间产生连锁反应。 

PageSpeed Insights 工具还有一个非常好的功能，它会直接给你反应你应该优化的项目。 

输入页面网址，你就可以看到优化性能的建议。 

2. 利用其他工具弥补 PageSpeed Insights 的短板

PageSpeed Insights 是一款出色的诊断审核工具，但是搭配其他工具，可以更全面地展现优化机会。 

例如，Pingdom允许你从不同位置测试页面速度，并涵盖文件请求详细信息等其他技术元素。 

Ubersuggest等平台通过定期的站点范围审计功能（例如“长加载时间”检查器）提供持续监控。 

3.压缩图片 

大型、详细的图片需要花费一些时间来加载，并且会严重影响网站速度。

把图片上传到你的网站时，可以用下面步骤进行优化处理： 

• 使用TinyPNG或ImageOptim等工具压缩图片。 

• 不要将图片做得比需要的大。 

• 使用 WebP 和 AVIF 等下一代格式。 

• 针对不同的屏幕尺寸 配置元素。

如果你的网站已经托管了大量未优化的图片，也不用担心。TinyPNG 等工具提供的插件可以自动审核并更新你的整个网站。 

4.压缩文本文件

除了图片之外，压缩 CSS、JavaScript 和 HTML 文本文件也能缩短页面加载时间。压缩可以减少传输大小，而不会改变代码内容或质量。浏览器收到文件后会立即解压。 

推荐两个流行的文件压缩工具Gzip和Brotli。Brotli 受所有主流浏览器支持，在比较中表现更佳。 

记住不要使用这些工具来压缩图片。这两个工具主要是为文本文件设计的。

5. 压缩 CSS、JavaScript 和 HTML

压缩将 CSS、JavaScript 和 HTML 代码转换为浏览器的简写形式。它可以让文件更小，从而减少其有效负载大小并提高传输速度。 

最小化通过删除空格、删除注释以及使用更短的变量名等方式对代码进行调整。

几乎所有的内容管理系统都具有内置的缩小功能或插件，实现站点范围的缩小只需要启用它们一下就可以了。 

6. 减少不必要的和阻塞渲染的 JavaScript

渲染阻塞资源会强制浏览器下载并解析特定文件，然后才能继续加载。这会增加最大内容绘制 (LCP) 时间。 

所有类型的代码都有可能发生这种情况，但 是JavaScript 尤其严重，因为它的执行时间相对来说比较长。 

你可以在 PageSpeed Insights 工具中查看渲染阻塞和非必要 JavaScript 的来源：

Chrome DevTools 中的“覆盖范围”选项卡还提供了页面上所有未使用的代码（包括 CSS 和 HTML）的概览。 

7. 延迟加载折叠下方的图片

当网站启用延迟加载后，首屏以下的图片和视频直到用户向下滚动才会渲染。这可以显著减少页面的初始负载。 

电子商务网站通常在类别和类似页面上使用延迟加载，在用户滚动时动态呈现数十张图片。 

一些内容管理系统在延迟加载方面存在问题，这可能会导致快速滚动条出现问题。不过，在大多数情况下，延迟加载可以提高性能。

8. 使用信誉良好的 CDN 

内容分发网络 (CDN) 可以将你网站的缓存版本（或副本）存储在世界各地的服务器上。 

例如，如果你的网站服务器位于欧洲，那么在北美访问页面的用户他们可以访问距离他们所在地更近的网站副本，增加他们的加载速度。 

个人比较推荐Cloudflare这种信誉良好的 CDN。

9.减少HTTPS请求

浏览器是通过发送 HTTPS 请求来收集网站展示所需的文件。每个请求可能需要 30 到 200 毫秒，而浏览器发送数百个请求来加载一个页面的情况很多。 

可以使用Pingdom这样的工具让页面显示在加载过程中所需的请求。如果某个页面或部分 页面的请求过多，则可能表明网站存在问题，需要进行调整。

10. 针对移动设备运行单独的测试

网站速度优化适用于移动端和桌面端网站。但是有时候也会只出现移动设备的问题。因此，PageSpeed Insights 专门为移动端和桌面端网站提供了标签页。 

例如，JavaScript 和 HTML 元素可能不适合移动浏览器，或者繁重的动画或视频在 5G 连接上会滞后。 

通过 PageSpeed Insights 运行网页样本时，请始终同时使用移动视图和桌面视图。 

12. 尽可能删除重定向

重定向次数越多，浏览器请求并渲染正确页面所需的时间就越长。这会导致加载时间延长数秒——在数字世界中，这简直是永恒。 

尽可能修复不必要的重定向链。 可以利用Ahrefs快速识别你网站上的 301 重定向链，检查并在适当的情况下进行纠正。 

13. 删除不必要的插件 

插件代码量大，会增加网站的页面加载时间，而且还会添加大量阻塞渲染的代码。 

你需要定期检查插件，看是否存在相同功能，然后挑选更合适的，剔除掉多余的插件。 

当然，也有一些插件可以帮助提高网站速度。自动调整图片大小、压缩代码和延迟 JavaScript 加载的插件可以帮助提高页面速度。这些插件通常利大于弊，但务必思考一下，这些花哨的功能是否值得牺牲页面速度。

14.利用浏览器缓存

启用浏览器缓存后，服务器会通知浏览器保存已加载页面的副本。当用户再次访问时，页面的渲染速度会更快。

你可以通过在.htaccess文件中添加一些代码或使用插件来启用浏览器缓存。

今天给大家推荐一个在WordPress 非常受欢迎的缓存插件WP Super Cache。 

15. 跨不同浏览器测试

网站遇到存在导致某些浏览器加载速度变慢或无法渲染的问题，你可以使用BrowserStack SpeedLab等工具检查几个热门页面。

如果你在 Google PageSpeed Insights 上得分不错，那么不太可能遇到什么大问题。但是这测试做了才放心。 

16. 谨慎选择你的服务器

一分价钱一分货。而且，你无法通过修改网站来改变主机的速度。所以，明智的选择 至关重要。

有四种类型的网络托管服务可供选择： 

• 共享主机：一台服务器托管多个小型网站。共享主机价格低廉，但其他托管网站的流量激增可能会降低你的网站速度。

  最好不要用共享主机。 

• VPS 主机：虚拟专用服务器 (VPS) 可以托管多个网站，但每个网站都有一个专属的虚拟“位置”。由于是虚拟的，它能为你提供更多资源，从而潜在地降低因流量导致网站速度问题的风险。 

• 专用服务器托管：一个网站托管在一台服务器上。虽然价格较高，但有助于降低或消除因其他网站流量激增而导致网站速度下降的风险。 

• 云主机：网站托管在由虚拟服务器和物理服务器组成的网络之上，提供更多资源和更高灵活性。如果你的流量突然激增，虚拟主机会自动扩展来应对。

17.持续监控网站速度

完成初始审核、实施变更以及最小化和压缩等自动化流程后，最难的工作就完成了。

网站速度优化是一个持续的过程。接下来应该定期检查网站，并确保网站不会出现新问题。

监控网站速度的方法如下：

• 通过Google PageSpeed Insights持续运行新页面（或新页面的样本）。 

• 使用Ubersuggest之类的工具自动执行整个站点的定期审核。 

结论

从缩小代码到实施持续监控，优化网站速度时需要考虑很多技术任务。

关键在于利用 PageSpeed Insights 等工具进行全面审核。然后，你可以设置自动化流程，例如图片优化和压缩。通常，整个网站范围内的更改只需一两周即可完成。 

接下来，你需要定期检查，确保系统正常运行。之后，你就可以安心地等待转化率和排名的飙升了。