提升网页加载速度的十个窍门

C M Pandey 原作，授权 New Frontend 翻译。

在这篇文章里，我会跟大家分享我是如何让自己的作品集网站在 0.8 秒内加载完成的。

1. 不要使用太大的 DOM 树

我的作品集网站包含 487 个 DOM 元素，DOM 树的深度是 13，每层最多 20 个子元素。

太大的 DOM 树会拖慢网页：

• 内存

  在过大的 DOM 树上应用查询选择器（比如 document.querySelectorAll('li')）会保存多个节点的引用，这可能占用大量设备内存。

• 网络效能和加载速度

  巨大的 DOM 树包含许多节点（有些节点在初次加载时不可见），这会拖慢加载速度，消耗用户的网络流量。

• 用户或脚本与网页产生交互时的运行时性能

  此时浏览器需要重新计算节点的位置和样式，因此 DOM 树过大时渲染会变慢。如果样式规则很复杂，渲染性能会雪上加霜。

2. 不要使用巨大的网络载荷

我的作品集网站的网络载荷（payload）大小只有 764 KB。

你的网站的网络载荷大小应该低于 1600 KB。
为了达成这一目标，你可以从以下几个方面着手：

• 延迟请求，按需加载。
• 极简化（minify）、压缩（compress）网络载荷。
• 将 JPEG 图像的压缩级别设置为 85。

永远不要忘记，更大的网络载荷会带来更多的流量成本。

3. 不要使用 GIF

静态图像用 PNG 或 WebP。动画内容考虑使用 MPEG4 或 WebM 视频格式，GIF 图像存储效率低、显示效果差。

你也许会说你需要：

• 自动播放
• 循环播放
• 无声播放

HTML5 的 video 标签完全可以实现这些效果：

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

4. 预加载关键请求

假设页面正加载一个 JS 文件，这个 JS 文件本身会获取另一个 JS 文件和一个 CSS 文件，那么直到这些资源下载、解析、执行完毕前，页面都不会完整显示。

如果浏览器能够在更早的时候发起这些请求，就能节省许多时间。很幸运，预加载链接可以做到这一点。

<link rel="preload" href="style.css" as="style">

5. 少用重定向

重定向会拖慢网页的加载速度。浏览器请求某个重定向资源时，服务器会返回一个 HTTP 响应。接着浏览器必须发起另一个 HTTP 请求，从新的地址获取资源。这些额外的网络往返会拖慢资源的加载速度，可能会拖慢几百毫秒。

与其将移动端用户重定向到移动端版本的页面，不如将网站重新设计成响应式。

6. 预连接重要的第三方站点

使用 preconnect 告诉浏览器提早和重要的第三方站点建立连接。

<link rel="preconnect" href="https://www.google.com">

以上代码会和站点建立连接，并告知浏览器你希望在尽可能早的时候启动这一进程。

7. 使用高效的图像编码

JPEG 图像的压缩级别设为 85 就已经足够好了。你还可以使用多种方式优化图像大小：

• 压缩图像。
• 使用优化图像的 CDN。
• 避免使用 GIF。
• 响应式图像。
• 按需加载图像。

8. 极简化 JavaScript 文件

极简化指移除空格和非必需的代码以创建更小的代码文件的过程。

极简化 JavaScript 文件可以缩小载荷，节省解析时间。

JavaScript Minifier 是一个可以极简化 JavaScript 的在线工具。

9. 极简化 CSS 文件。

相比其他文件，CSS 文件的空格更多。极简化肯定能省下一些字节。再比如颜色值可以极简化成等价的简写形式，比如 #000000 和 #000 是等价的。

CSS Minifier 是一个可以极简化 CSS 的在线工具。

10. 调整图像分辨率

我打赌在网站优化的建议中，这是最常提到的一条。因为图像的大小一般来说要比任何脚本文件大很多，所以尽量避免使用分辨率过大的图像。

你永远不应该上传分辨率大于屏幕渲染尺寸的图像，这毫无意义。

你可以直接修改图像的分辨率，或者使用：

• 响应式图像。
• 支持优化图像的 CDN。
• SVG 图标。