迭代地修复慢速站点

站点性能可能是最重要的指标。性能越好，用户留在页面上，阅读内容，进行购买或几乎需要做的任何事情就越好。 Akamai 2017年的一项研究说，当发现即使延迟100毫秒的页面负载也可以将转换率降低7％，并且每100ms的销售额损失1％，而他们的网站加载所需的加载，而在研究时，如果该网站减慢了一秒，则该网站的加载量也相当于16亿美元。 Google的行业基准从2018年开始，还提供了令人惊讶的细分，即每一秒的负载如何影响跳出率。

另一方面，Firefox平均使他们的网页负载平均2.2秒，并且每年驱动6000万个Firefox下载。在将您的网站放置在移动设备上时，速度也是Google考虑的事情。慢速站点可能会让您进入搜索结果的第452页，无论其他指标如何。

考虑到所有这些，我认为提高自己版本的慢速站点的速度将是一个有趣的练习。该网站的代码可在GitHub上获得参考。

这是一个非常基本的网站，由简单的HTML，CSS和JavaScript制成。我故意试图使其尽可能简单，这意味着它慢的原因与网站本身的复杂性无关，或者是因为它使用的某些框架。关于最复杂的部分是一些社交媒体按钮，供人们共享页面。

这就是事实：性能不仅仅是一次性任务。它固有地与我们建立和开发的一切联系在一起。因此，虽然很容易解决所有问题，但提高性能的最佳方法可能是一种迭代性的方法。确定是否有较低的水果，并弄清楚可能会更大或长期的努力。换句话说，增量改进是得分绩效获胜的好方法。同样，每毫秒都很重要。

本着这种精神，我们在本文中所关注的内容更多地集中在增量胜利上，而不是提供详尽的绩效策略清单或清单。

灯塔

我们将与灯塔合作。你们中的许多人可能已经对此非常熟悉。它甚至在CSS漫步上都被覆盖了一堆。这是一项Google服务，可以审核事物的性能，可访问性，SEO和最佳实践。我将在本文中解决问题之前和之后审核我慢速站点的性能。灯塔报告可以直接在Chrome的Devtools中访问。

继续前进，简要查看灯塔所说的内容在网站上是错误的。很高兴知道在直接潜水之前需要解决什么。

我们可以完全解决这个问题，所以让我们开始吧！

改进＃1：重定向

在我们做其他事情之前，让我们看看当我们第一次上网站时会发生什么。它被重定向。该网站曾​​经在一个URL上，现在它住在另一个URL。这意味着引用旧URL的任何链接都将重定向到新URL。

就其添加到网站的延迟而言，重定向通常很轻，但是它们是首先要检查的一件事，而且通常很少会努力将其删除。

我们可以尝试通过更新网站的先前URL来更新来删除它们，并将其指向更新的URL，以便将用户直接带到那里而不是重定向。使用网络请求Inspector，我将查看是否可以通过DevTool中的网络面板删除任何内容。如果需要，我们也可以使用工具，例如Postman，但是为了简单起见，我们将尽可能地将工作限制为Devtools。

首先，让我们看看是否有任何HTTP或HTML重定向。我喜欢使用提琴手，当我检查网络请求时，我发现确实有一些旧的URL和重定向浮动。

我最近将我的github从Anonrobot重命名为Kealanparr ，所以除了域名外，所有内容都是相同的。

看来我们点击的第一个请求是https://anonrobot.github.io/redirect-to-slow-site/ html将其重定向到https://anonrobot.github.io/slow-site/。我们可以将所有重定向到较低点的URL重点放在更新的URL上。在DevTools中，网络检查员可以帮助我们查看第一个网页也在做什么。从我在提琴手中的看来，它看起来像这样：

这告诉我们该站点将使用HTML重定向到下一个站点。我将将引用的URL更新为新站点，以帮助减少延迟，从而为初始页面加载增加拖动。

改进＃2：关键的渲染路径

接下来，我将使用DevTools中的Performance面板来介绍SIT。我最感兴趣的是，尽可能快地解开网站的渲染内容。这是将HTML，CSS和JavaScript变成完全充实的交互式网站的过程。

它首先从服务器检索HTML并将其转换为文档对象模型（DOM）。我们会看到任何内联JavaScript，或者下载它是外部资产，因为我们逐行解析HTML。我们还将将CSS构建到CSS对象模型（CSSOM）中。 CSSOM和DOM结合以制造渲染树。从那里开始，我们运行的布局将所有内容都放在屏幕上，然后再运行油漆。

如果必须在运行之前等待资源加载，则可以“阻止”此过程。这就是我们所说的关键渲染路径，而阻止路径的事物是关键资源。

最常见的关键资源是：

• 中的<script>标签，不包含异步，延期或模块属性。</script>
• 没有禁用属性可以告知浏览器下载CSS并且没有与用户设备匹配的媒体属性。

还有更多类型的资源可能会阻止关键渲染路径，例如字体，但是上面的两个是迄今为止最常见的。这些资源块渲染是因为浏览器认为该页面“未完成”，并且不知道它需要或拥有什么资源。对于所有浏览器都知道，该网站可以下载一些期望浏览器做更多工作的东西，例如样式或颜色更改；因此，该站点对浏览器不完整，因此它假定最差并阻止渲染。

无法阻止渲染的示例CSS文件是：

 <link href="%E2%80%9C" printing.css rel="“" stylesheet print>

当用户打印网页时，“媒体=” print'属性仅下载样式表（因为也许您想在打印中样式不同），这意味着该文件本身并没有阻止任何内容。

正如克里斯喜欢说的那样，前端开发人员知道。并且在渲染开始之前要了解页面需要下载的内容对于提高性能审核分数至关重要。

改进＃3：解析解析

阻止渲染路径是我们可以立即加快速度的一件事，如果我们不小心的JavaScript，我们也可以阻止解析。解析是使HTML元素一部分的部分原因，每当我们遇到需要运行的JavaScript时，我们都会阻止HTML解析的发生。

我慢网页中的一些JavaScript不需要阻止解析。换句话说，我们可以异步下载脚本，并继续将HTML解析到DOM中。

标签是允许浏览器异步下载JavaScript资产的原因。页面构造完成后，标签仅运行JavaScript。

在此之间，在内置JavaScript（因此运行它不需要网络请求）与将其放入其自己的JavaScript文件（用于模块化和代码恢复）之间有折衷。随意在这里做出自己的判断，因为最好的路线将取决于用例。将CSS和JavaScript应用于网页的实际性能将是相同的，无论是外部资产还是归咎于该网页。当我们内联时，我们唯一要删除的是网络要求获得外部资产的时间（有时会产生很大的不同）。

我们的目标是尽我们所能。我们想推迟装载资产，并同时使这些资产尽可能小。所有这些都将转化为更好的性能结果。

我的慢网站是链接多个关键请求，浏览器必须读取下一行HTML，等待，然后阅读下一条以检查另一个资产，然后等待。资产的大小，下载时，以及它们是否阻止它们都将大量播放我们的网页可以加载的速度。

我通过对DevTools Performance面板中的站点进行分析来解决此问题，该站点只是记录了网站随时间的加载方式。我简要扫描了我的HTML及其下载的内容，然后将添加到任何阻止事物的外部JavaScript脚本（例如社交媒体<script>），在渲染之前无需加载）。</script>

有趣的是，Chrome具有一个浏览器限制，它只能处理每个域名的六个机上HTTP连接，并且将等待资产返回，然后一旦这六个是在线飞行，请要求另一个。这使得要求HTML解析的多个关键资产更糟。允许浏览器继续解析将加快向用户展示某些东西并改善我们的性能审核所需的时间。

改进＃4：减少有效载荷尺寸

站点的总尺寸是其加载速度的巨大决定因素。根据Web.dev的说法，网站的目标应在10秒钟内以低于1,600 kb的交互式。大的有效载荷与长时间的负载密切相关。您甚至可以将大的有效载荷视为最终用户的费用，因为大量下载可能需要较大的数据计划，而花费更多的钱。

在这个确切的时间点，我的慢速站点是9,701 kb的高度，是理想尺寸的六倍以上。让我们修剪一下。

识别未使用的依赖性

在开发开始时，我认为我可能需要某些资产或框架。我将它们下载到我的页面上，现在甚至不记得实际使用了哪些。我肯定有一些资产，除了浪费时间和空间外，什么也没做。

使用DevTools中的网络检查员（或您感到舒适的工具），我们可以看到一些可以从网站上删除的东西而不会改变其基本行为。我在DevTools的覆盖面板中发现了很多价值，因为它将显示出下载所有内容后正在使用多少代码。

正如我们已经讨论过的那样，在与外部资产相比，与CSS和JavaScript相比，总是有一个很好的平衡。但是，在这一刻，似乎该网站的下载远远超过了真正的需求。

减少修剪物品的另一种快速方法是找到该网站是否试图加载404的任何资产。这些请求绝对可以被删除，而不会对网站产生任何负面影响，因为它们无论如何都没有加载。这是提琴手向我展示的东西：

再次查看覆盖范围的报告，我们知道有些东西已下载，但仍有大量未使用的代码仍然进入页面。换句话说，这些资产正在做某事，但也准备好做我们甚至不需要它们做的事情。其中包括React，jQuery和Vue，因此可以从我的慢速站点中删除，而没有真正的影响。

为什么这么多JavaScript库？好吧，我们知道有一些现实生活中的场景，因为它符合我们的要求，因此我们可以追求某件事。但是随后这些要求发生了变化，我们需要达到其他东西。同样，我们必须意识到作为前端开发人员，并不断关注与网站相关的资源是整体意识的一部分。

压缩，缩小和缓存资产

仅仅因为我们需要提供资产，并不意味着我们必须将其作为其全尺寸，甚至在下一次用户访问网站时重新提供资产。我们可以压缩我们的资产，缩小样式和脚本，并负责任地缓存，以便我们以最有效的方式为用户提供所需的服务。

• 压缩意味着我们将文件（例如图像）优化至其最小的文件，而不会影响其视觉质量。例如，GZIP是一种使资产较小的常见压缩算法。
• 为了在电线上发送较少的字节，缩短通过从代码中删除Cruft（例如评论和Whitespace）来改善基于文本的资产的规模，例如外部脚本文件。
• 缓存使我们能够将资产存储在浏览器的内存中一段时间​​，以便在后续页面加载下立即为用户使用。因此，加载一次，享受很多次。

让我们看一下三种不同类型的资产，以及如何使用这些策略来解决它们。

基于文本的资产

其中包括文本文件，例如HTML，CSS和JavaScript。我们希望尽一切力量尽可能轻巧，以便尽可能地压缩，缩小和缓存它们。

在很高的水平上，GZIP通过在内容中找到常见的重复零件来工作，将这些序列存储一次，然后将它们从源文本中删除。它可以保留一个字典的查找，以便可以快速引用保存的碎片并将其放回原处的位置，以称为炮弹的过程。查看此示例包含诗歌的文件。

我们这样做是为了使任何基于文本的下载尽可能小。我们已经在利用GZIP。我使用Gidnetwork使用此工具进行了检查。它表明缓慢站点的内容被压缩了59.9％。这可能意味着有更多机会使事情变得更小。

我决定将多个CSS文件合并到一个名为styles.css的单个文件中。这样，我们将限制需要网络请求的数量。此外，如果我们打开三个文件，每个文件都包含了如此少量的CSS，以至于三个网络请求简直是不合理的。

而且，在执行此操作时，它使我有机会删除未在DOM中应用的不必要的CSS选择器，再次减少了发送给用户的字节数。

伊利亚·格里戈里克（Ilya Grigorik）撰写了一篇出色的文章，其中包含压缩基于文本的资产的策略。

图像

我们还能够优化慢速站点上的图像。如报告始终显示的那样，图像是最常见的资产请求。实际上，从2016年到2021年，台式机的中位数据传输为948.1 kb，移动设备的902 kb为902 kb。整个页面负载的理想1,600kb尺寸的一半以上。

我的慢网站没有提供那么多的图像，但是所使用的图像可能会更小。我通过一个名为Squoosh的在线工具运行了图像，并节省了40％（18.6 KB至11.2 KB）。那是胜利！当然，这是您可以在使用桌面应用程序（例如ImageOptim，甚至是作为构建过程的一部分）上传之前要做的事情。

我看不到原始图像和优化版本之间的视觉差异（这很棒！），甚至能够通过调整实际文件，降低图像质量，甚至更改调色板来进一步减小大小。但是这些就是我在图像编辑软件中所做的事情。理想情况下，这是您或设计师最初制作资产时会做的。

缓存

我们已经谈到了缩小和压缩，以及我们可以尝试利用这些方法来发挥自己的优势。我们可以检查的最后一件事是缓存。

我一直在一遍又一遍地要求慢速站点，到目前为止，我可以看到它总是每次都需要新鲜的要求，而无需任何缓存。我浏览了HTML，看到缓存在这里禁用：

 <meta http-equiv="“" cache-control content="“" no-cache>

我删除了该线路，因此现在应该能够进行浏览器缓存，从而使内容更快地服务。

改进＃5：使用CDN

我们可以在任何网站上都可以从内容交付网络（CDN）中获得的另一个重大改进。大卫·阿塔德（David Attard）对如何添加和利用CDN有一个超级详尽的作品。传递内容的传统途径是击中服务器，请求数据并等待它返回。但是，如果用户正在从世界的另一端向您的数据提供数据，那么会增加时间。即使其他一切都快速闪电，使服务器在服务器的响应中进一步传播也可能会增加速度的巨大损失。

CDN是世界各地的一组分布式服务器，它们能够智能地将内容智能地交付到用户，因为它具有多个位置，因此可以选择它。

我们之前讨论了当用户实际上没有使用下载的代码时，我如何使用户下载jQuery，然后将其删除。如果我确实确实需要jQuery，则在这里简单的解决方案是从CDN请求资产。为什么？

• 用户可能已经从访问另一个站点下载了资产，因此我们可以为CDN提供缓存的响应。毕竟，在前一百万个网站中，有75.49％的网站仍在使用jQuery。在2020年，浏览器（Safari，Chrome）开始进行“缓存分区”，这意味着资产不会在不同站点之间缓存，因此可以删除这种潜在的好处。该文件仍将缓存每个网站。
• 它不必远离请求数据的用户。

我们可以做一些简单的事情，例如从Google的CDN中获取jQuery，他们可以在自己的网站中参考任何人：

 
  <script src="%E2%80%9C" https:> </script>

肯定的是，这比我的服务器的标准请求要快得多。

事情更好吗？

如果您到目前为止与我一起实施，或者只是阅读，那么该是重新提出的，看看到目前为止我们所做的工作是否有任何改进。

回想一下我们开始的地方：

改变之后：

我希望这是一个有益的乐趣，并鼓励您在自己的网站上搜索增量性能胜利。通过最佳要求资产，将一些资产从加载中推迟，并降低站点大小的整体大小将尽快在用户面前获得功能性，完全交互的站点。

想保持对话吗？如果您想查看更多或连接，我在Twitter上分享我的写作。

以上是迭代地修复慢速站点的详细内容。更多信息请关注PHP中文网其他相关文章！