我重建了我的投资组合。现在加载速度不到 1 秒！以下是我操作的方法！⚡

在我刚开始接触PHP 的那段时间，我创建了一个网站，里面整合了我的简历和一些分享想法的空间。那个网站设计精良，功能丰富，比如帖子标签、筛选和搜索。但另一方面，那个网站操作起来很繁琐。在网络连接良好的情况下，加载应用程序大约需要5 到 6 秒！

我意识到，总有一天，我需要从头开始重写所有内容。当我了解了React生态系统之后，那一刻就到来了。现在，重写完成后，我想分享一下我是如何让网站速度如此之快的。

注意：撰写本文时，我旨在解释如何提升任何网站的性能。请注意，由于网站情况各异（博客与电商应用不同），其中一些观点可能不适用于您的用例。

使用正确的工具

PHP语言很棒，Laravel也是如此，它是一个用于开发 Web 应用程序的框架。但在了解了React及其生态系统之后，我决定使用NextJS。天哪，这真是个绝佳的选择！NextJS支持两种内容渲染方式：

静态生成非常适合博客或个人网站等内容不经常更改的用例。使用这种方法构建应用程序后，您将获得一堆静态HTML文件，可以将其部署到任何主机上。没有什么比简单的HTML文件更高效了。

这似乎是显而易见的，但我还是要提一下。你网站上使用的任何静态资源都应该进行优化。这包括最小化CSS文件和JavaScript文件，以及压缩图片。例如，如果你使用图片作为头像，则不需要尺寸为 500x500px、大小为200 KB的文件。可以选择调整大小的文件。

提示：几乎任何图像都可以通过将其质量降低到约80%来进行优化，并且压缩版本和原始版本之间不会有视觉差异。

如果您使用像NextJS这样的现代 Web 框架，那么您的所有软件包都已优化。但是，如果您将外部样式表或脚本放入网站，请务必小心，因为它们并不总是被压缩。

处理外部JavaScript文件时，需要谨慎处理这些脚本在HTML中的放置位置，因为这会影响加载时间。将外部脚本放在文档的头部，浏览器会在渲染DOM之前尝试获取并执行该脚本。建议将外部脚本移到正文末尾，或为这些脚本指定 defer 属性。

延迟加载脚本会导致它们与其他资源一起下载，但在HTML解析和渲染之后执行。我推荐你阅读这篇关于这个主题的优秀文章：使用 defer 和 async 高效加载 JavaScript

我们倾向于在网站上使用大量图片。无论是放在背景中，还是我们想要分享某些内容，都没有必要一次性加载所有图片。处理图片的标准方法是只加载那些直接位于视口内或靠近视口的图片。我们不需要加载那些位于页面下方且用户尚不可见的图片。

实现延迟加载的技术有很多，但最常用的方法是使用Intersection Observer API或依赖它的库。最近，Google Chrome浏览器已添加原生延迟加载支持。只需在img元素上添加一个Loading属性即可。

<img loading=lazy>

目前并非所有浏览器都支持它，但这将成为未来图片延迟加载的标准。您可以在这里了解更多信息：Web 浏览器级图片延迟加载

Service Worker 是一个在后台执行的脚本，它位于与主JavaScript包不同的线程中。Service Worker 可以拦截所有网络请求，因此通常用于缓存资源和一些关键的 API 负载，使网站能够在没有互联网连接的情况下正常运行。

使用服务工作者不会在第一次加载时提高网站的速度，但由于某些资产已下载并存储在浏览器的缓存中，因此每次重新加载都会更快。

注意：建议浏览器使用服务工作者将您的应用程序视为可安装的SPA。

内容分发网络 (CDN)是一种根据客户端地理位置，更快速高效地将网站内容分发给客户端的方式。它允许从距离客户端最近的服务器快速传输加载内容所需的资源，包括HTML 、脚本和样式表。

在您的 Web 服务器或静态托管前使用CDN的主要好处是：

许多CDN提供商（例如Cloudflare）也为您的应用程序提供了安全性改进。他们为您的域名提供免费的SSL证书，并提供DDoS 攻击防护。

在开发我的新网站并实施了上面列出的所有技巧后，我的加载时间已缩短至大约1 秒！效果令我非常震惊。请查看灯塔报告：

我知道这些数字只是模拟出来的，在真实设备上可能会有所不同。但看到审核结果显示首次有效绘制时间只有 0.7 秒，我还是忍不住笑了。😀

感谢阅读，希望你喜欢这篇文章。我的作品集网站设计新颖，希望收到你的反馈。快去看看，告诉我你的意见吧。😊

我的投资组合：blog.jskoneczny.pl

附言：如果你对最新的科技新闻感兴趣，可以关注我的账号，因为我计划定期在这里发布文章。我也会定期发布推文，所以你也可以关注我的 Twitter 账号！