有一项技术审核，以检查站点的速度并确定延迟的原因。即使系统似乎正常运行并且没有性能问题，也建议执行此操作。事实是它仍然可以改进：基础结构优化将加快代码的交付速度，而重构代码库将有助于降低维护成本。
在本文中，我们将以受欢迎的新闻资源为例，说明网站的技术审核是如何进行的，该新闻资源每小时被成千上万的用户访问。让我们考虑一下独立的验证和分析阶段，作为结果，我们将清楚地展示如何改进项目并消除瓶颈，这些瓶颈会减慢页面加载速度。
收集指标并分析静态站点资源
确保使用现成的工具（例如Google Page Speed，Lighthouse和Web.dev）收集度量标准并衡量一切。这是获取指标的最快方法，这些指标将成为您研究的起点。在他们的帮助下，您将首先了解什么是值得关注的，哪些是可以优化的。
我们建议您在打开和关闭广告拦截器的情况下运行分析。结果，您将发现第一次呈现内容的速度以及在站点上连接了多少个第三方脚本。
在此阶段，您还将看到呈现网站时发生了多少基本操作：
收集的度量标准可能会指出改善静态站点资产的空间：图像，视频，脚本，样式和字体。分析这些数据，并确保您遵循使用静态资源的一般做法。但是，请记住，这些仅是准则，而不是严格的要求。
在我们的示例中，所有图像均以jpg格式存储。如果使用浏览器完全支持的webp，则文件大小将平均减少20％。您只能为高分辨率图像设置自动Webp压缩。对于支持这种格式的浏览器，建议将高分辨率视频转换为webm。为了减少网络负载，建议禁用自动播放不可见视频的功能。可以使用Intersection Observer API来完成。
确保您的站点具有渐进式下载，并在可能的情况下在所有位置添加压缩。确保使用现代脚本压缩技术，例如brotli，gzip和deflate。
不要加载未使用的内容。这可以应用于代码，样式，符号，图像。例如，如果一个网站有一个出现在千分之一的情况下的按钮，则处理该网站的脚本应仅按需连接。
在上面的示例中，您可以看到未使用〜93％的总代码（〜340 kb）。如果包含代码的包的覆盖率为100％，并且涵盖了所有情况而无需重新加载页面，则认为该代码包是理想的。如果根本没有使用该代码，或者错误地配置了代码拆分，或者使用了拆分代码，但是在其他页面上，或者达到了某种情况，则会发生这种情况。
解决此问题的方法是将可重用组件移到单独的文件（块）中，然后仅在需要它们的位置连接它们。
正如我们所说，这些要求是可选的，但是静态资源的优化很重要，因为用户首先注意到它们。
让我们以字体为例-在此项目中，它们花了太长时间加载。由于我们不希望用户看到标准字体，因此我们从一开始就在critical-css部分中加载它们。如何解决这个问题呢？您可以在代码级别优化字体，更改连接顺序，将ttf替换为woff2。
您也可以尝试减少使用的字体数量，这将需要重新设计，但这并不总是合理的。如果该网站使用Google字体库，则从文件中删除未使用的字符，版权并不禁止这样做。
但是有时候，将事物保持原样并专注于其他可能性会更容易。
检查HTTP请求
在此阶段，我们检查前端是否与后端正确交互，即：
- 为API请求配置压缩；
- 没有加载连接的寄生查询，其结果不在任何地方使用；
- 在用户未完成特定业务案例的情况下，不会有错误返回的请求；
- 最初加载页面时，浏览器不会向API发送请求（如果该站点使用服务器端渲染，如我们的示例所示）；
- 没有重复的请求。如果在访问任何页面时都发出了请求，则最好发送一次并保存数据以备重用；
- pending , . , , , . , — , .
被阻止的请求以红色突出显示，但该站点可以继续工作，
此外，在分析请求时，您可能会发现错误。这就是我们遇到的前端应用程序错误操作的方式，该应用程序每秒可能发送100个以上的请求，从而极大地加载了服务器。屏幕闪烁，装载机不断旋转，等等。原因被隐藏在错误实现的滚动中。当出现新元素时，浏览器将其位置保持在页面底部。也就是说，滚动浏览页面时，启动了加载器，由于该加载器页面向下移动。 JavaScript处理程序重新发送了请求，这又导致了加载器动画，这是由于页面大小发生了变化，等等。
由于加载程序的错误操作，请求的数量无限增加
外部脚本和资源分析
在此阶段，您应该确定从第三方站点加载哪些资源花费的时间最长。
现代化的网络使您可以优先考虑所有下载。通常，指标和广告是在页面显示之前加载的，这本身是没有意义的，因为用户仍然看不到广告，但是网站的加载时间更长。我们建议您在渲染网站后立即显示广告，这不会以任何方式影响统计信息-否则用户会在一段时间内看到白屏。
分析页面
使用chrome dev工具配置您的网站页面，以跟踪长时间的请求和增加的CPU使用率。结果，您将看到什么显然正在加载该网站。
屏幕截图显示，加载Jquery需要19毫秒，目前不需要。最好在主要资源之后，最好是在成功的加载事件之后（例如onload，domcontentloaded）加载jquery。
分析请求的数量和持续时间
在这个阶段，我们将探讨前端与后端的交互方式。为此，您需要分析所有请求的数量和持续时间，要获得更完整的信息，您需要测量一个请求和并行请求的平均响应时间。
为了清楚起见，将获得的数据合并到摘要图中。这样，您可以快速确定哪些查询花费的时间比其他查询长得多。
如果站点安装在功能强大的服务器上，则100个并行请求的执行时间不应大大超过一个请求的执行时间。在示例中，我们发现相差30倍。最长的查询应首先进行调查。
在此项目中，对于某些请求，发生了网关超时，即服务器根本没有响应。
高负荷项目的开销是正常的。但是，在可能的情况下，如果一个请求负责多项操作，则应尝试将请求分解为各个组成部分。在并行线程中执行这些部分。
如何改善服务器？连接库以监视服务器并重新启动应用程序（对于node.js，这是pm2）。还建议连接错误监视工具，例如Sentry。配置错误输出和紧急关闭日志记录。这样，您可以跟踪应用程序的停机时间。
理想情况下，设置一个异步记录器以监视站点上的任何活动（API请求，对数据库的请求，对外部API的请求，对文件系统的请求或用于使用文件系统的服务），然后将它们记录到单独的数据库中。
静态分析源代码
实用程序将执行此分析，这些实用程序将指出错误的代码并帮助摆脱“死代码”。值得注意的是，这些工具应在开发过程中自动使用，但是您不必总是依赖开发人员的完整性，因此最好不要跳过此检查。
要进行静态分析，您需要使用eslint linters和其他代码格式化实用程序（例如，更漂亮和声纳）来跟踪代码违规情况。
结果，根据发现的违规，您可以草拟文档：
通常，此类违规行为不会影响网站的性能，但是会使代码的读写复杂化，这意味着维护代码的成本将更高。例如，在这个项目中，我们发现了一个函数，其中包含三个参数，其中一个未被使用-这样的琐事共同增加了该项目的技术负担。
源代码的语义分析
此时，程序员将需要手动检查项目文件。值得注意的是，仅会评估源代码行为中的明显错误；要进行更深入的分析，您需要充分了解项目的逻辑；在此阶段，您可以找到可移至一个位置（类，函数或常量）的重复代码以减少行数并减少错误的可能性。
有时，这种分析将有助于确定开发团队是否遇到问题。从Git的代码行中，您可以确定作者是谁，并确定单个员工的表现。您可能会发现超过一半的评论涉及一位开发人员。
例如，在这里我们确定了十个异步操作来更新数据库，但它们一次执行一次，彼此无关。这意味着通过并行运行它们可以使性能提高一倍，并尽可能使用并行性，因为即使在当前的PHP版本中，也可以设置人工并行性来提高系统性能。
结果
软件开发涉及很多风险，实际上，您通常必须做出妥协才能使项目按时启动并运行。因此，文档通常是追溯性的，站点的优化被推迟到最后一刻。
但是，应对性能提升永远不会太迟。加速您的网站将改善用户体验并给予积极的听众回应。借助技术审核，您可以确定导致站点工作延迟的原因是前端应用程序还是后端应用程序。这里收集了有关如何进行前端审核的建议。它们本质上是通用的，适合于测试任何站点。
我们很快会在您的下一个出版物中告诉您如何对后端进行技术审核。