提高网站速度：实现 99% 性能等级（从 30 开始！）

“早在 2018 年，Google 就指出，页面速度现在会影响桌面和移动搜索结果的排名。然而，页面速度影响的不仅仅是排名。根据研究，3 秒的页面加载时间会导致 13% 的跳出率，这表明页面速度不仅与搜索结果有关，还与用户体验有关。

那么，如果您的网站运行缓慢，您该怎么办？提高网站性能并非易事；因此，许多公司只是进行小幅优化以确保其在搜索结果中的排名。

请继续阅读，了解我们如何从 30 分性能评级跃升至 99 分，以及为什么（除了对我们的成就感到无比自豪之外）拥有业内最快的网站之一值得我们付出努力。

毕业典礼：解决的障碍和必要性

通过改版我们的网站，我们重点致力于实现三个主要目标：

1. 通过快速的页面加载、改进的用户体验和一流的内容来提高转化率。
2. 提升 SEO 并在搜索引擎上获得更好的可见性。
3. 通过展示新项目和客户评论来提升我们的品牌形象。

这些目标指导我们确定需要集成的功能。以下是我们为实现目标而提出的关键功能：

• 结构新颖的网页具有令人印象深刻的外观，展示了我们的服务、部门、技术和案例研究。
• 增强的博客文章页面，具有搜索功能、标签和类别。
• “取得联系”和其他方便沟通的方式。
• 各种第三方集成：Google 标签管理器、Cookiebot 和 Hubspot 等。

总的来说，我们的目标是建立一个安全的静态网站。因此，我们选择了 GatsbyJS，这是一个与此目标无缝契合的 React 框架。

你问，为什么是盖茨比？ @GatsbyJS 在于它能够通过在编译过程中协调预构建的 HTML、CSS 和 JavaScript，将 Web 开发转变为一个顺畅而快速的过程。GatsbyJS 使用 React 构建，使我们能够创建自己的模板和组件，并利用 React 生态系统的扩展。

改版网站需要关注的另一个方面是 API 后端。我们的偏好是 @Strapi，一个开源内容管理系统。该系统不仅允许我们定制数据结构并扩展 API 功能以管理文本、图像和视频等各种内容格式，而且还为我们节省了大量的时间和资源——得益于其用户友好的管理面板和补充功能，避免了从头开始开发一切的必要性。

最后，对于服务器请求，我们利用了 GraphQL。它与 GatsbyJS 无缝兼容，使我们能够定义查询格式并仅指定必要的字段和关系，从而避免多余的数据，进而缩短页面加载时间。

技术的融合使我们能够实现最佳的网站稳定性和安全性

完成后，新网站的效果很好，排名提升，设计焕然一新。起初……但后来，情况开始逐渐恶化。随着新页面的增加、一系列修改和第三方软件的集成，代码库迅速膨胀，以至于我们在 Google 的 Lighthouse（一种分析网页速度的工具）上的性能评级大幅下降。

在开始改进工作之前，灯塔会给我们的网站评分

分数如此低下，Google 不会给我们带来任何好处。而且，即使它能给我们带来好处，用户也不会忍受等待加载的过程。

爱立信的研究 说明移动设备上页面加载延迟带来的压力就像面对恐怖电影一样。每一秒都对性能至关重要。了解了这种困难后，我们立即开始着手改善网站的性能。

有条不紊地提高网站效率

为了实现显著的性能提升，我们仔细研究了困扰网站的主要问题，并开始努力纠正每一个问题。下面阐述了我们如何克服主要挑战。

1. 网络连接设置加速两倍

通用计量系统，一种描述网站加载模式的工具，帮助我们精确地定位导致连接时间延长的外部域资源。

紫色的时间表示域名服务器接收域名 IP 地址请求的时间，而浅绿色表示服务器连接时间。这些间隔很长，因此我们通过缩短服务器连接时间来加快它们。

为了加快网站速度，我们实施了各种技术改进。最初，我们部署了资源提示，利用 HTML <link> 属性。这些提示有助于浏览器在资源请求转发到服务器之前主动建立连接。对于来自外部域的资源，我们加入了 DNS 预取和预连接提示，提前指示浏览器与指定域建立连接。因此，当浏览器需要来自外部域的资源时，它们会迅速加载，因为初步设置已经完成。

对于脚本和样式表等内部文件，我们采用了“预加载”和“预取”提示。这些提示可确保当用户浏览我们网站的页面时，从其本地缓存中获取必要的资源，而无需从远程服务器检索它们，从而加快了该过程。

这些优化有助于将*最大内容绘制时间从 2.9 秒缩短到 0.8 秒，将*首次内容绘制时间从 1 秒缩短到 0.6 秒，从而使浏览器能够加快资源加载速度。

*LCP，一种基本网络生命力指标 它量化了从用户开始加载页面到最突出的图像出现在视口中的持续时间。

*FCP 表示用户首次访问页面和内容在屏幕上呈现之间的间隔。

通过快速文本渲染增强字体加载

在我们的平台中，我们混合使用了个性化和公开可用的字体。我们从 Google 到 字体来源 集合，因为它代表了获取字体的最快方法。

然而，尽管文本是从 HTML 文件中检索到的，但字体包的加载仍出现了延迟。为了避免文本和字体加载之间的这种脱节，我们最初的策略是显示一个模糊的后备字体，直到我们首选的 Web 字体完全加载。虽然这种方法有效，但它延长了 LCP 指标，促使我们调整策略以支持快速文本渲染。

工作流程如下：首先，浏览器在指定的字体系列中识别可访问的字体并将其部署用于文本渲染。随后，在加载原始字体时，浏览器会无缝地用必要的字体替换初始字体。此策略是最快的字体加载方法，尽管它存在由于字体大小改变而导致文本意外移动的风险。为了减轻布局偏移并优化累积布局偏移（CLS，用于跟踪页面加载期间意外元素位移的量表），我们实施了 CSS 字体模块 5 级，包括以下属性的一套规范 尺寸调整, 下降覆盖， 和 行间隙覆盖，这有助于我们避免内容转变。

CSS 字体模块 5 级表现完美，确保字体变化不会影响布局

因此，三个指标（首次内容绘制、最大内容绘制和累积布局偏移）得到了增强。特别是，CLS 从 0.143 秒减少到 0 秒。

增强图片和视频的加载

我们遇到的另一个性能挑战是巨大的网络负载。网站审核发现有必要通过减小图像和视频的大小而不影响质量来简化图像和视频的加载过程。

黄色实验室工具 评估表明，在所有文件类型中，视频和图像对我们网站的负担非常大

我们的网站包含两种图像变体 - 矢量图像（可缩放矢量图形 (SVG) 格式）和光栅图像（PNG 和 JPG 格式）。每个 category 都采用了不同的优化技术。

3.1 矢量图像的增强

矢量图像通常具有轻量级的特性；然而，当每张图片都需要一个新的 HTTP 请求来加载时，就会出现问题，从而降低性能。为了解决这个问题，我们选择采用内联 SVG，允许将图像直接嵌入 HTML。这是通过 ‘gatsby-plugin-react-svg’ ，Gatsby 框架内的一个插件，简化了这一流程。

3.2 栅格图像的增强

为了加快 PNG 和 JPG 图像的加载速度，我们将它们转换为现代的 .webP 格式，以保证在质量损失最小的情况下实现出色的压缩效果。同样，视频也从 .mp4 转换为 .webM，以确保增强压缩效果和质量。虽然 .webP 和 .webM 被用作主要格式，但预计会出现与旧版浏览器的兼容性问题。为了缓解这一问题，对于不支持 .webP 和 .webM 的浏览器，我们保留了 .png、.jpg 和 .mp4 格式的回退。

此外，图像显示需要针对各种设备进行优化。各种设备（例如手机、平板电脑、笔记本电脑或 4K 显示器）需要不同的图像尺寸。为手机和 4K 显示器上传相同的图像会增加网站加载时间。为了解决这个问题，我们实现了自适应图形，在代码中嵌入了不同的图像选项，使浏览器能够根据窗口大小、屏幕分辨率、网络速度等因素选择最佳图像。通过利用以下软件包 ‘gatsby 背景图片’ 和 'gatsby-image' ，我们针对不同的设备创建了多个图像变体。在 “网络”选项卡 下面的快照显示了“切换设备工具栏”，我们在其中切换页面显示模式。

在这里，我们启用了设备工具栏来优化不同设备的图像加载

此处显示的是针对不同设备进行了优化且尺寸减小的同一文件

3.3 后台图像的延迟加载

最后，我们实现了延迟加载和模糊图像效果，以保证仅在用户查看图像时才加载图像，从而丰富了能力有限的用户的体验

定价计划或缓慢的互联网连接。

这说明了视觉内容延迟加载功能的运作方式

所有的辛苦努力都得到了回报——我们显著减少了网站上的视觉效果的尺寸，同时又不影响质量。

经过改进后，Yellow Lab Tools 发现，视频依然占据了页面大部分的权重，这一点并不令人意外，但图片的负载已经大大减少（紫色部分）

这些增强功能大大丰富了用户体验和 CLS 和 LCP 等指标。通过专门利用 Gatsby 生态系统中的视觉优化扩展，我们促进了性能提升的过程。

4. 简化缓存

我们必须承认，缓存（一种 Web 服务器保存网页副本的方法）最初在网站创建过程中被忽略了。这无疑是一个错失的机会，因为有效的缓存可以加快网站速度并减轻服务器负担。我们决心赶上缓存优化，但遇到了各种具体障碍。

我们的目标是通过保存资源以备下次访问而不是每次都下载来加快资源的加载速度。为了实现这一点，我们在 HTTP 标头中使用了“cache-control”属性，并设置了文件在缓存中保留的时间。然而，另一个困境出现了。在对网站内容或设计进行修改后，更改不会立即显示，因为浏览器坚持使用旧的存储副本。

我们是如何解决这个问题的？我们在文件名称后面附加了一个哈希值，每次编辑文件时都会刷新该哈希值。这种方法使我们能够将文件保存在缓存中较长时间，同时仍能轻松进行更改。结果，首次内容绘制 (FCP) 指标从高变为中等。

目前，我们正在考虑一种称为浏览器缓存的附加缓存形式。与需要永久服务器连接并消耗带宽来加载响应的服务器缓存不同，浏览器缓存使用户无需网络连接即可访问网页。然而，它也有其局限性——如果用户的设备存储空间不足，浏览器可能会删除旧数据以容纳新内容。

为了让您更好地理解，这里并列了服务器端缓存和客户端缓存的功能

5. 消除大量 JavaScript 集合

包本质上由文件（通常是 JavaScript、CSS 和其他属性）组成，这些文件被整合成一个统一的文件，以便更有效地分发。随着我们网站的复杂性不断提高，包的大小也不断增加，导致网站负担过重。现在正是找出问题部分并丢弃它们的合适时机。

有几种有用的工具可用于识别和纠正有问题的软件包。其中之一， 捆绑恐惧症，提供有关 NPM 包对捆绑包大小的贡献程度的见解，有助于避免过大的文件编译。 进口成本VSCode 扩展程序可计算导入包的“成本”，从而帮助您做出明智的决定。作为优化策略的一部分，我们替换了重量级的 JS 库，例如将广泛使用的“classnames”包替换为更高效的 ‘clsx’，一种更快捷、更小巧的嵌入式替代品，专门针对我们网站的需要而定制。

随后，利用 Webpack 捆绑分析器 插件，我们精确地定位了捆绑包中存在问题的区域。

Bundle Analyzer 推出了我们最实质性的捆绑包 - 客户位置和带闪烁点的地图

为了剖析这些文件集合，我们利用代码分割和延迟加载将大包分割成较小的组件。Webpack 的集成代码分割功能允许我们将导入命令修改为指向文件路径的函数，而不是直接导入文件。这会产生一个承诺，类似于文件将被加载的承诺。当代码中出现类似的结构时，就会兑现这个承诺，并加载文件。

对于非必要的视图、HTML 和 JS，我们利用动态导入来减少网页的初始大小。此处的动态意味着网站根据特定条件确定是否加载补充文件，以确保它不会破坏用户体验。

以下是我们优化的结果：加载过程更加完善，没有孤立的扩展包

将大包分割成更小的部分后，我们有效地减轻了页面重量并删除了所有大文件集合。

6.通过代码压缩来压缩HTML和CSS

代码压缩彻底改变了我们的方法。通过压缩代码并省略不必要的空格，我们实现了文件大小的减小、快速下载和带宽使用量的最小化。目前，我们的服务器以 gzip 格式分发网站文件，从而提高了速度，并显著提升了 FCP 和 FID（首次输入延迟，衡量首次点击和浏览器响应之间延迟的指标）等关键指标，从次优性能水平提升到中等性能水平。

7. 提高代码质量并解决内存泄漏

经过仔细检查，我们发现代码库中存在一些狡猾的内存泄漏。问题源于对象在不再需要后仍停留在内存中，导致环境拥挤。

为了纠正这个问题，我们实施了两种方法。在事件侦听器仅需要一次的情况下，我们选择了 {only: true} 参数。此参数保证在触发侦听器后自动将其删除，从而减轻任何与内存相关的复杂性。此外，我们确保通过使用 removeEventListener() 方法明确消除事件侦听器。此步骤是在删除元素之前或侦听器过时后执行的。此类操作促进了元素和函数之间的无缝断开，从而避免了内存泄漏。

关于 addEventListener 的另一个需要考虑的方面是合并 {passive: true} 参数。事实证明，这种调整有利于滚动交互，防止界面中断并有助于增强用户体验。

useEffect(() => { setScrolled(document.documentElement.scrollTop > 50); window.addEventListener('scroll', handleScroll, { Passive: true }); return () => { document.body.style.overflowY = 'scroll'; window.removeEventListener('scroll', handleScroll); }; }, []);

从之前到之后：性能增强对我们网站的影响

坦白说，我们最初的处境并不理想——加载时间缓慢，服务器不堪重负，严重影响了用户体验。然而，凭借宝贵的见解和优化策略，我们全身心投入到这项任务中，并取得了令人印象深刻的成果。我们对结果满意吗？毫无疑问。

PageSpeed Insight 向我们提供了一份值得称赞的成绩单，强调了实质性的改进

为期一个月的绩效评估显示出显著的进步——与我们的起点相比，所有指标都显示出多项改进

如果没有无数小时和数日的专注努力，这些转变是不可能实现的；然而，另一个对我们成功做出重大贡献的因素是使用适当的工具。某些工具不仅在我们努力的过程中节省了时间，而且值得称赞。

提升性能的工具：PageSpeed Insights 和 Lighthouse

在性能评估和增强方面，两个 Google 实用程序脱颖而出： PageSpeed 洞察 和 灯塔。这些工具会仔细检查网页的各个方面，以提供有关其速度、用户体验和整体性能的见解。以下是它们共同评估的指标：

• 最大的内容涂料 (LCP) – 测量可见区域中最大的内容元素（例如，图像或文本块）被用户看到的持续时间。
• 首次内容绘制 (FCP) – 测量浏览器呈现初始内容片段（例如文本或图像）的时间。
• 首次输入延迟 (FID) – 评估用户主要交互（例如，按钮单击）与浏览器对该操作的响应之间的延迟。
• 累积布局偏移 (CLS) – 统计页面生命周期内发生的所有单个布局偏移分数的总和。当页面上的可见元素意外移动时，就会发生布局偏移。
• 交互到下一次绘制 (INP) – 通过更新页面上的视觉内容来计算浏览器对用户交互（例如点击或轻触）做出反应的时间。
• 第一个字节的时间 (TTFB) – 确定浏览器在收到请求后从服务器接收初始数据字节的持续时间。
• 总阻塞时间 (TBT) – 量化浏览器主线程受阻且无法响应用户输入的总持续时间。
• TTI（交互时间） – 评估页面完全交互的时间，这意味着所有必要的资源都已加载，并且页面及时响应用户输入。
• FID（首次输入延迟） – 仔细检查用户初始交互与浏览器对该交互的反应之间的延迟。

您可以利用这两种工具中的任何一种来深入了解网站的性能。Lighthouse 提供更大的灵活性和详细的见解，而 PageSpeed Insights 则专注于监控单个页面的性能。

虽然这两个工具被广泛使用，但它们并不是我们唯一的建议。以下是一些额外的资源，它们可能对您的性能优化之旅大有裨益。

全面探索的补充工具

GTMetrix：一个强大的工具，不仅可以审核页面，还可以以易于理解的格式可视化加载，使性能增强变得切实可行。

黄色实验室工具：一个富有洞察力的仪表板，可对众多指标进行分类和评估。它不仅可以识别问题，还可以提供详细的优化建议。

这些工具就像我们的指路明灯，帮助我们提升性能，提供卓越的用户体验。在着手提升网站性能时，请牢记这些工具。

结论

如果您的业务依赖于网站，那么忽视其性能绝对不是一种选择。这方面可以推动您成为 Google 搜索结果中的佼佼者，或者反过来，促使用户迁移到速度更快、体验更佳的网站。为了避免这种困境，我们分享了我们网站蜕变的故事。

我们追求最佳性能的旅程仍在继续，因为总有改进的空间。最近，我们发现 GatsbyJS 存在一些挑战，并正在考虑过渡到 NextJS。然而，这一考虑值得在另一篇文章中讨论。

正如没有两家企业是相同的，也没有通用的蓝图来提高网站的性能。每种情况都是独一无二的，需要采用量身定制的方法来应对您面临的具体挑战。虽然这不是一项轻松的任务，但我们随时准备提供帮助。如果您想提高网站的性能，请随时 联系我们，我们将探讨能为您做些什么。
`