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

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 标签完全可以实现这些效果：

4. 预加载关键请求

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

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

5. 少用重定向

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

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

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

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

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

7. 使用高效的图像编码

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

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

8. 极简化 JavaScript 文件

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

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

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

9. 极简化 CSS 文件。

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

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

10. 调整图像分辨率

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

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

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

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