我的网站现在加载速度不到 1 秒！以下是我的做法！⚡

提示 #1

不要使用大型 DOM 树。

提示 #2

不要使用巨大的网络负载。

提示#3

不要使用 GIF。

提示#4

预加载密钥请求

提示 #5

不要尝试多次页面重定向。

提示#6

预先连接到所需的来源。

提示 #7

高效地对图像进行编码。

提示#8

缩小你的 JavaScript 文件。

提示 #9

缩小你的 CSS 文件。

提示 #10

调整图像大小。

你好呀！

您来这里的原因可能是因为您想知道我是如何做到的，只用0.8 秒就加载了我的投资组合网站，并在 lighthouse 上获得了97 的性能分数。

链接到我的投资组合，其源代码位于底部。

我会在这里分享我实现这个目标的所有技巧和窍门！让我们开始吧！🤘

注意：根据 Lighthouse 的说法，“数值为估算值，可能会有所不同。性能得分仅基于这些指标”。本报告生成于印度标准时间 8 月 2 日下午 6:29:22。由于网络连接速度、后台运行的多个扩展程序，或者我稍后可能会添加某些功能，这些分数在您的设备上可能会略有不同。另外，我上面已经“明确”提到，这些分数是由 Google Lighthouse 生成的。不要指望在任何其他工具上也能得到相同的分数。所以，请不要试图以此为据进行恶意攻击，省省力气吧。祝您好运！✌

提示 #1

不要使用大型 DOM 树。

我的作品集包含 487 个 DOM 元素，最大 DOM 深度为 13，最多只有 20 个子元素！

如果您的 DOM 树非常大，那么它会降低您的网页性能：

• 内存性能

使用通用查询选择器（例如 document.querySelectorAll('li')）存储对多个节点的引用，这些引用会消耗设备的内存容量。

• 网络效率和负载性能

大的 DOM 树有许多节点（第一次加载时不可见），这会减慢加载时间并增加用户的数据成本。

• 运行时性能

每当用户/脚本与您的网页交互时，浏览器都需要重新计算节点的位置和样式。复杂的样式规则会减慢渲染速度。

提示 #2

不要使用巨大的网络负载。

我的投资组合的总网络有效载荷大小仅为 764 KB。

您的网站总负载大小应低于 1600 KB。
为了保持较低负载，您可以执行以下操作：

• 推迟请求，直到需要时再处理。

• 最小化并压缩网络有效载荷。

• 将 JPEG 图像的压缩级别设置为 85。

永远记住，大型网络有效载荷需要花费大量金钱。

提示#3

不要使用 GIF。

最好使用 PNG/ WebP 格式来显示静态图像。但如果您想显示动画内容，则不要使用大型 GIF（效率低下且像素化），而应考虑使用 MPEG4/ WebM 视频格式。

现在，你会说如果我想要它们的如下功能怎么办：

• 自动播放。
• 不断循环。
• 无音频。

好吧，让我来拯救你，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 和一个 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 被认为足够好。您可以通过多种方式优化图像：

• 避免使用 GIF。
• 使用图像 CDN。
• 压缩图像。
• 延迟加载图像。
• 使用WebP图像格式。
• 提供响应式图像。

提示#8

缩小你的 JavaScript 文件。

缩小是删除空格和任何不必要的代码以创建较小但完全有效的代码文件的过程。

通过缩小 JavaScript 文件，您可以减少脚本的有效负载大小和解析时间。

我使用JavaScript Minifier来实现同样的效果。

提示 #9

缩小你的 CSS 文件。

CSS 文件比其他任何文件占用的空白都多。通过最小化它们，我们肯定可以节省一些字节！
你知道吗，你甚至可以将颜色值更改为其简写形式，例如 #000000 可以简化为 #000，并且效果一样好！

我使用CSS Minifier来实现同样的效果。

提示 #10

调整图像大小。

我敢打赌，这是关于 webperf 最常见的建议，因为图像的大小远远大于任何文本脚本文件，所以过大的图像可能会有点过头。

您永远不应该上传大于屏幕上显示的图像，那样没有任何好处。

您可以简单地调整图像尺寸或使用：

• 响应式图像。
• 图像 CDN。
• 使用 SVG 代替图标。

感谢你读到这里！😄
希望你从中学到一些新东西！😃

这是我的投资组合网站👉cmcodes的链接

这是我的投资组合源代码的链接👇

快去看看，告诉我你的看法！我迫不及待地想听听你的意见。😁

欢迎在下面的评论区分享你的作品集链接。我很乐意看看。😊

祝你编程愉快！👨‍💻