提高页面速度的 10 种方法

介绍

如今，页面速度非常重要。

自从谷歌修改了 Googlebot 的算法，使其更倾向于快速且适合移动设备的网站后，拥有一个快速的网站就变得更加重要。如果这还不够糟糕，那么网站体验越慢，用户通常会花费更少的时间，转化率也会更低。

什么是页面速度

页面速度是指网页内容完全加载所需的时间。

对于任何特定用户来说，导致页面加载缓慢的原因可能有很多。用户可能在火车上，可能正在穿过信号较弱的隧道，也可能只是网速慢。

通过遵循最佳实践，我们至少可以确保尽最大努力来缓解这个问题。

10 页面速度改进

现在您知道它是什么了，我将教您需要查看什么来加快您的页面速度。

注意：这些是按难度排序的。有时，你会需要开发人员来帮助你优化网站。

目录

• ＃1-使用CDN
• #2 - 启用 GZIP 压缩
• #3 - 使用较小的图像
• ＃4 - 减少页面发出的请求数量
• #5 - 尽可能避免重定向
• #6 - 减少第一个字节的时间
• #7 - 减少并删除阻塞渲染的 JavaScript
• #8 - 压缩 CSS 和 JS
• #9 - 删除未使用的 CSS
• #10 - 跟踪你的网站速度

＃1-使用CDN

CDN 是内容分发网络 (Content Delivery Network) 的缩写。使用 CDN 可以有效地访问遍布全球的数百台小型服务器，这些服务器会为您托管网站的副本，从而大大缩短网站加载时间。如果您不使用 CDN，那么对您网站的每个请求（包括图片、CSS 和 JavaScript）都会被缓慢地路由到世界各地的服务器。

根据HTTPArchive中的 4.68 亿个请求，其中 48% 未通过 CDN 提供服务。这意味着，如果他们花几分钟时间在网站上添加 CDN，那么超过 2.24 亿个请求的速度可能会提高 50% 以上。

请务必检查您是否正确配置了 CDN - CDN 中的缓存未命中意味着 CDN 必须向您的原始服务器询问资源，这首先违背了使用 CDN 的目的！

#2 - 启用 GZIP 压缩

在某些 CDN 上，GZIP 压缩只是一个标有“启用压缩”的复选框。它大约可以将用户使用你网站所需下载文件的大小减少一半，你的用户会因此而喜欢你。

#3 - 使用较小的图像

这意味着既要降低分辨率（例如，将相机输出的分辨率从 4000x3000 像素降低到网络上的 1000x750 像素），又要通过压缩文件来减小尺寸。

如果您的网站使用 WordPress，则有一些插件可以在您上传图像时自动为您执行此操作。

我个人在撰写博客文章时使用TinyJPG来压缩图像。

＃4 - 减少页面发出的请求数量

目标是减少加载页面顶部（称为“折叠内容”）所需的请求数量。

这里有两种思维方式，您可以：

• 通过删除花哨的动画或无法改善网站体验的图像，减少整个页面上的请求数量
• 或者，您可以通过使用延迟加载来推迟加载优先级不高的内容

#5 - 尽可能避免重定向

重定向会显著降低网站速度。与其为移动用户设置专门的子域名，不如使用响应式 CSS，并通过一个域名为您的网站提供服务。

某些重定向是不可避免的，例如 www -> 根域或根域 -> www，但您的大部分流量不应该经历重定向来查看您的网站。

#6 - 减少第一个字节的时间

第一个字节的时间是指浏览器在发出资源请求后等待从服务器接收第一个数据字节的时间。

分为两部分：

• 在服务器上花费的时间
• 发送数据所用的时间

您可以通过优化服务器端渲染、数据库查询、API 调用、负载平衡、应用程序的实际代码以及服务器本身的负载来改善在服务器上花费的时间（特别是如果您使用廉价的网络托管 - 这会影响您网站的性能）。

通过使用 CDN，您可以大大减少发送数据所花费的时间。

#7 - 减少并删除阻塞渲染的 JavaScript

外部脚本（特别是用于营销的脚本）通常编写得很差，并且会阻止您的页面加载，直到它运行完成为止。

您可以通过将外部脚本标记为异步来减少这种影响：

<script async src="https://example.com/external.js"></script>

您还可以延迟加载营销脚本，直到用户开始滚动：

window.addEventListener(
  'scroll',
  () =>
    setTimeout(() => {
      //insert marketing snippets here
    }, 1000),
  { once: true }
);

#8 - 压缩 CSS 和 JS

压缩意味着使用工具删除空格、换行符并缩短变量名称。通常，这会在构建过程中自动完成。

对于 JavaScript

要缩小你的 JavaScript，请查看UglifyJS。

对于 CSS

要缩小你的 CSS，请查看cssnano。

#9 - 删除未使用的 CSS

自 Chrome 59（2017 年 4 月发布）以来，可以在 Chrome DevTools 中看到未使用的 JS 和 CSS。

要查看这一点，请打开 DevTools，显示控制台抽屉（按下 Esc 键时出现的烦人的东西），单击左下角的三个点，然后打开“Coverage”。

点击带有重新加载图标的按钮将刷新您的页面，并审核 CSS 和 JS 的使用情况。

当您审核 Google Chrome 中的起始页时，它看起来是这样的：

#10 - 定期跟踪网站速度

在网站速度变慢的瞬间修复速度问题要容易得多。此外，如果您养成检查网站速度的习惯，修复速度缓慢的问题就会变得容易得多。

有一些免费工具可以监控你的网站速度，其中最受欢迎的两个是WebPageTest和Google Lighthouse。这些工具的缺点是你需要记住在进行更改之前和之后运行它们。

PerfBeacon是一项服务（由本文作者创建），它会定期运行 Google Lighthouse，让您随时跟踪网站的速度。

无耻的插件

如果您想获得有关如何提高前端网络性能的更多提示，您可以在 Twitter 上关注我或订阅我的时事通讯，因为我会定期在那里发布文章。