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

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

嗨,大家好!

你来看这篇文章,大概是想知道我是如何让自己的作品集网站在 0.8秒 内加载完成的吧?(lighthouse 性能评分 97

文章底部有我的作品集网站链接。

我会在这篇文章列出我用到的所有的技巧和窍门。让我们开始吧! 🤘

注意,根据 Lighthouse 的说法,「评分是估计值,可能会变化。性能评分仅基于这些指标计算」。报告生成于 8 月 2 日下午 06:29:22 IST。取决于网络连接速度和浏览器启用的扩展,在你的机器上运行 Lighthouse 得到的分数可能不同。另外以后我也可能会对网站做些调整。我在上面已经「明确」说明这些分数是 Google Lighthouse 给出的,所以别指望其他工具给出同样的分数。总之,不要浪费你的精力吐槽这些配置,心平气和一点。✌

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 图标。

感谢你读完这篇文章!😄 希望你从这篇文章中学到了新东西!😃

这是我的作品集网站的链接 👉cmcodes

欢迎访问我的作品集网站,如果有什么想法,一定要告诉我!我特别想听到你的意见。 😁

也欢迎通过评论分享你的作品集页面。我很高兴能看到它们。😊

祝你写代码愉快!👨‍💻

评论

Loading comments ...