系列文章目录-性能测试

性能测试-基础+中级（一）【概述+流程+工具+模型+mysql事务】

文章目录

系列文章目录-性能测试
- 性能测试-基础+中级（一）【概述+流程+工具+模型+mysql事务】
7. 前端性能测试
- 7.1 以ShopXO商城为例分析
- 7.2 前端在线测试工具-GTmetrix
- 7.3 输入URL分析性能-GTmetrix
- 7.4 GTmetrix性能报告
- - 7.4.1 GTmetrix Grade and Web Vitals（GTmetrix等级和Web核心指标）
  - 7.4.2 The Summary Tab（总结选项卡）
  - - 7.4.2.1 Speed Visualization（速度可视化）
    - 7.4.2.2 Top Issues（重要问题）
    - 7.4.2.3 Page Details（页面详情）
    - 7.4.2.4 More from GTmetrix（更多的关于GTmetrix对改进页面性能的提示和建议）
  - 7.4.3 The Performance Tab（性能选项卡）
  - - 7.4.3.1 Performance Metrics（性能指标）
    - 7.4.3.2 Browser Timings（浏览器计时）
  - 7.4.4 The Structure Tab（结构选项卡）
  - 7.4.5 Other Tabs（其他..）
  - - 7.4.5.1 Waterfall Tab（瀑布选项卡）
    - 7.4.5.2 Video Tab（视频选项卡）
    - 7.4.5.3 History Tab（历史选项卡）

7. 前端性能测试

影响前端性能因素：网络连接，下载资源，js加载，前端页面渲染等…针对前端的性能测试，基本上都是B/S架构的系统。

7.1 以ShopXO商城为例分析

ShopXO商城

使用谷歌浏览器自带开发者工具检查

可以看到加载时间最长的资源耗时1.56s，请求数67，通过网络传输1.4MB，页面加载的4.5MB资源，2.45s请求全部结束（finish），DOMContent加载耗时2.17s（DOMContentLoaded），页面加载耗时2.26s（Load）。

上图可以看到有些资源是存放在缓存中的。

若多次重新加载页面发现加载时间越来越短，需要网络传输的资源也越来越少。

我们选择【禁用缓存】选项

选择【禁用缓存】，clear，重新加载商城页面，发现与结论一致。

下图，查看其中一个请求的waterfall，可以看到该请求发送和接受的全过程耗时。

Queued at 172.33ms
- 该请求在172.33ms的时候添加入队列。
Started at 294.20ms
- 在队列中，该请求在294.20ms的时候开始预备发送。

Resource Scheduling-Queueing-DURATION 121.87 ms
- 该请求排队时间耗时121.87 ms。
Connection Start-Stalled-DURATION 4.52 ms
- 在发送之前，该请求准备4.52 ms。
Request/Response-Request sent-DURATION 0.13 ms
- 发送该请求耗时0.13ms。
Request/Response-Waiting for server response-DURATION 42.67 ms
- 等待服务器返回该请求的响应耗时42.67ms。
Request/Response-Content Download-DURATION 3.89 s
- 响应的数据下载耗时3.89ms。

以上，从该请求进入队列开始，到响应数据下载完毕：
总耗时：4.06s ≈ 121.87ms（排队时间耗时） + 4.52ms（请求发送准备耗时） + 0.13ms（请求发送耗时） + 42.67ms（等待响应耗时） + 3.89s（数据下载耗时）

对于前端的性能测试，我们主要关注这些请求的大小和加载时间，并做相应的优化。

开启缓存，我们会发现有内存缓存（memory cache）和磁盘缓存(disk cache)，内存缓存加载不耗费时间，而磁盘缓存耗时。

7.2 前端在线测试工具-GTmetrix

在实际工作中，如果用浏览器的开发者工具去检查，效率较低，可以使用GTmetrix帮助我们提高测试效率。

前端在线测试工具：GTmetrix，注册账号，并登录（最好使用谷歌浏览器进行测试）。

GTmetrix has undergone its biggest change yet, replacing the PageSpeed/YSlow libraries with Lighthouse, the industry standard in web performance.
GTmetrix经历了它最大的变化，用Lighthouse(网络性能的行业标准)取代了过去的PageSpeed/YSlow。

注册登录完成，看到以下页面

浏览器开发者工具附带了lighthouse性能分析，也可以直接用它直接分析页面性能。

其他主流测试工具>【性能优化】性能测量工具-WebPageTest

7.3 输入URL分析性能-GTmetrix

继续以ShopXO商城为例进行分析，将系统前端URL输入GTmetirx性能分析框进行分析。

如上，得到一份性能分析报告。

与之相比较，百度的前端性能就比较好。

7.4 GTmetrix性能报告

查看上面这份性能分析报告，具体指标可参照 Everything you need to know about the new GTmetrix Report (powered by Lighthouse)

7.4.1 GTmetrix Grade and Web Vitals（GTmetrix等级和Web核心指标）

第一部分：1. 新的GTmetrix等级（一个从新的性能和结构分数中衍生出来的加权等级，它取代了旧的PageSpeed和YSlow分数）和 2.Web核心指标（Web Vitals）

GTmetrix Grade（GTmetrix等级）
1.GTmetrix评分是对你的整体页面性能的评估；它既反映了用户加载页面的速度，又反映了构建页面的性能；
2.GTmetrix评分基于一个简单的公式，目前为性能（Performance）和结构（Structure）评分分别分配了70/30的权重；
3.结构评分指标可以看作是更好的web性能的指导手册，而性能评分指标则是你实际web性能的跑表。
- Performance（70%）（性能）
  - The Performance Score（性能评分）
    1.性能评分从用户的角度告诉您页面的执行情况；
    2.性能分数本质上是您的Lighthouse性能分数。由GTmetrix测试捕获，包括我们的浏览器、硬件规格和指定的分析选项(AdBlock、连接速度等)；
    3.性能评分由6个指标组成。
    - Loading performance (45%)（加载性能）
      - First Contentful Paint (10%)（开始内容绘制）
        1.First Contentful Paint（FCP）与页面加载速度相关，用来衡量访问者浏览到页面上实际内容=(即文本、图像、视频等)的速度；
        2.FCP是从开始加载页面到在屏幕上开始显示内容所花费的总时间；
        3.较低的FCP时间可以让用户有较好的使用体验。
      - Speed Index (10%)（速度指数）
        1.Speed Index（SI）依赖于浏览器视图端口的大小，用来衡量页面在视觉上的完成速度；
        2.SI是一种计算的结果，通过对页面加载行为逐帧分析，反映了访问者的页面体验;
        3.SI与其他页面加载时间密切相关，这使其成为评估网站整体性能的一个有用的总体基准。
      - Largest Contentful Paint (25%)（最大内容绘制）
        1.Largest Contentful Paint（LCP）衡量的是页面上最大的“内容元素”(例如，英雄图片、标题文本等)在访问者的屏幕显示所需的时间，用于衡量用户的感知加载体验；
        2.LCP也是作为谷歌的Web Vitals指标之一。
    - Interactivity (40%)（交互性）
      - Time to Interactive (10%)（交互的时间）
        1.Time to Interactive （TTI）衡量页面的加载响应性，并帮助识别页面看起来交互式但实际上不是的情况；
        2.TTI测量在第一次内容绘制(FCP)之后，当页面可靠地为用户交互做好准备时的最早时间；
        3.更快的TTI有助于确保页面可用。
      - Total Blocking Time (30%)（总阻塞时间）
        1.Total Blocking Time（TBT）衡量的是网页被阻塞的总时间，用于阻止用户与页面交互；
        2.TBT量化了页面对用户输入的加载响应，是仅字段的首次输入延迟(FID)度量的替代品，在PageSpeed Insights中可以看到；
        3.TBT也是作为谷歌的Web Vitals指标之一。
    - Visual Stability (15%)（视觉稳定性）
      - Cumulative Layout Shift (15%) （累计布局偏移）
        1.Cumulative Layout Shift（CLS）用于衡量网页呈现时网页元素的意外变化。然后将该测量值量化为页面上所有单个布局移位的总分；
        2.CLS用于衡量页面压力的视觉稳定性。
        3.CLS也是作为谷歌的Web Vitals指标之一。
- Structure（30%）（结构）
  - Structure Score（结构评分）
    1.结构评分是页面构建的最佳性能评分，结构得分的好坏反映了站点为实现最佳性能而构建的好坏；
    2.处理结构审计可以作为一个很好的起点，从总体上去优化页面加载时间。此外，有些审计是相关的，因此，修改一个审计可能会影响其他的审计；
    3.结构审计包括：标准的Lighthouse审计+自定义GTmetrix审计。
    - 标准的Lighthouse审计
    - 自定义GTmetrix审计
      - Enable Keep-Alive（开启keep-Alive）
        1.只会在没有检测到Keep-Alive on指令的使用HTTP/1.1的页面上触发。如果检测到您的页面正在使用HTTP/2，此项不作影响。
        2.对于HTTP/1.1请求，启用Keep-Alive可以减少延迟并提高页面性能。浏览器可能使用多个TCP连接从服务器检索页面的文件，如果在传递初始文件时关闭了原始连接。这会增加延迟和加载页面的时间。启用Keep-Alive允许使用同一个TCP连接传输多个文件，从而获得更快的加载页面。
      - Combine images using CSS sprites（使用CSS sprites组合图像）
        1.如果您的页面提供多个小的、spritable类型的图像，则会触发此审计；注意，根据页面是使用HTTP/1.1还是HTTP/2，此审计具有不同的阈值。
        2.使用CSS sprites组合图像可以减少往返请求的数量，从而提高页面的性能。这种方法主要是指小图像，如图标、徽标和其他图形元素，可以组合成单个图像，然后通过CSS在页面上定位。减少所加载的图像数量有助于提高页面性能，因为它减少了请求的数量，从而减少了浏览器加载图像所花费的时间。
      - Use a Content Delivery Network (CDN)（使用内容分发网络(CDN)）
        1.使用“内容分发网络(CDN)”可以提高您的网站在全球不同地区的性能；
        2.CDN本质上是一个遍布世界各地的服务器网络。每个CDN“节点”位于不同的区域，并缓存页面的静态内容，比如图像，css/js文件等。当用户访问您的页面时，资源来自最近的CDN节点的缓存，而不是您的原始服务器，减少延迟并为您的访问者提供快速的页面体验，无论他们位于何处。
      - Avoid CSS @import（避免使用CSS @import）
        1.尽可能避免使用CSS @import，因为浏览器遇到的任何导入指令(不带deferattribute)都会立即下载、解析并执行，这可能会阻碍页面其余部分的呈现；
        2.CSS @import是从另一个CSS文件中调用样式表/CSS文件的过程。这种方法导致浏览器按顺序加载每个CSS文件，而不是并行加载。因为CSS是呈现阻塞的，默认情况下，这可能会影响页面性能。所以，应尽量避免使用CSS @import来加快页面加载速度，提高访问者的页面体验。

http/1.x keep alive是为了解决每次请求都会重新建立和断开TCP连接的问题（服务器在发送完一个http相应后，会断开tcp连接，这样做的原因，是因为：极大的减轻服务端的压力，但这个问题在于：比如打开一个网页要加载很多资源，像js/css文件，图片等，那么每请求一个资源，就创建一个连接，然后关闭，这样做就代价实在太大了。于是便通过使用keep-alive，使连接能够在短时间内得到复用，同时SSL的开销也可以避免。）

HTTP 1.0 中默认关闭，需在http头加入"Connection: Keep-Alive"，启用Keep-Alive；

HTTP 1.1 中默认启用Keep-Alive，需加入"Connection: close "，可关闭。

http/2.0 连接都是持久化的，客户端与服务器之间只需要一个连接（每个域名一个连接），不再依赖多个TCP实现多流并行，每个数据流都拆分成互不依赖的帧，这些帧可以乱序发送，也可分优先级，然后在另一端将它们重新组合起来，连接可以承载数十或数百个流的复用（多路复用）。

引用：
https://zhuanlan.zhihu.com/p/89471776
https://www.cnblogs.com/caoweixiong/p/14720254.html

Web Vitals（Web重要指标）
1.谷歌已经确立了Web Vitals作为核心指标，它是对页面性能影响最大的关键指标。
2.Web Vitals在你的GTmetrix等级和性能/结构分数部分出现，Web Vitals是对页面进行基准测试的好方法，因为它们关注的是对性能感知影响最大的一小部分关键指标，专注于一小组关键指标来评估您的页面体验，有这么多的时间和审计来评估页面性能，这个小集合代表了最具影响力的指标，以简化web性能的世界；
3.每个指标都代表了页面体验的一个关键方面，即加载、交互性和视觉稳定性。
- LCP（Largest Contentful Paint，LCP，最大内容绘制）：显示最大内容元素所需的时间。
- TBT（Total Blocking Time，TBT，总阻塞时间）：页面加载过程中的脚本阻塞时间。
- CLS（Cumulative Layout Shift，CLS，累计布局偏移）：您的用户在页面加载期间经历了多少布局移位。

7.4.2 The Summary Tab（总结选项卡）

第二部分：总结选项卡

包括4部分，如下：
Speed Visualization，（速度可视化），Top Issues（重要问题），Page Details（页面详情），More from GTmetrix（更多的关于GTmetrix对改进页面性能的提示和建议）。
作用：显示页面的性能、结构和加载行为的完整快照。可作为主要分析模块，因为仅这里的信息就足以提供改进页面性能的重要方向。

7.4.2.1 Speed Visualization（速度可视化）

Speed Visualization（速度可视化）：这是一个页面加载的间隔捕获，带有标记，标记您的页面加载的各种性能评分指标。这将为你提供更多与访问者实际体验相关的度量指标。
- TTFB（首字节响应时间）：TTFB是发出页面请求到接收到应答数据第一个字节所花费的毫秒数（DNS解析+TCP三次握手+HTTP请求+第一字节返回的时间）。
- First Contentful Paint（FCP，开始内容绘制）：FCP是从开始加载页面到在屏幕上开始显示内容所花费的总时间，与页面加载速度相关，用来衡量访问者浏览到页面上实际内容的速度。
- Time to Interactive（TTI，交互时间）：TTI测量在第一次内容绘制(FCP)之后，当页面可靠地为用户交互做好准备时的最早时间。
- Largest Contentfual Paint（LCP，最大内容绘制）：页面上最大的“内容元素”在访问者的屏幕显示所需的时间，用于衡量用户的感知加载体验。
- Onload Time（装载时间）：开始装载页面内容。
- Fully Loaded Time（完全装载时间）：装载完毕全部页面内容。

7.4.2.2 Top Issues（重要问题）

Top Issues（重要问题）：这部分能看到对页面性能影响最大的主要结构问题。专注于改进这些审计可以对您的其他结构审计产生级联效应，并可以大幅提高您的整体GTmetrix Grade和性能/结构分数。
- FCP（First Contentful Paint，开始内容绘制）
- LCP（Largest Contentful Paint，最大内容绘制）
- TBT（Total Blocking Time，总阻塞时间）
- CLS（Cumulative Layout Shift，累计布局偏移）

7.4.2.3 Page Details（页面详情）

Page Details（页面详情）：显示了您的页面由什么类型的请求组成，包括请求的数量和它们组成的字节大小。这对于判断你的网页是否大量使用JavaScript、CSS和图像等非常有用。

将鼠标悬停在一个段上将显示关于该请求类型的整体附加信息。

7.4.2.4 More from GTmetrix（更多的关于GTmetrix对改进页面性能的提示和建议）

More from GTmetrix（更多的关于GTmetrix对改进页面性能的提示和建议）：来自GTmetrix的更多内容，在那里我们根据您的页面分析提供优化技巧和建议。根据我们在测试您的页面过程中检测到的内容，我们可能会在您的平台(如WordPress、Shopify等)、图像优化、服务器性能、CDN使用等方面提供提示和指导。

7.4.3 The Performance Tab（性能选项卡）

第三部分：性能选项卡

包括2部分，如下：
Performance Metrics，（性能指标），Browser Timings（浏览器计时）。
作用：详细显示您的性能评分指标。

7.4.3.1 Performance Metrics（性能指标）

Performance Metrics（性能指标）：每个指标都有一个简短的描述(这样你一眼就能知道它的意思)，并根据页面在该指标中的表现用颜色进行了编码。

颜色编码和指代表现

7.4.3.2 Browser Timings（浏览器计时）

Browser Timings（浏览器计时）：浏览器计时对您的性能评分没有直接影响；但是，它们可能提供关于页面性能的额外见解，值得研究。
- Redirect Duration（重定向时长）：在加载最终HTML页面之前重定向url所花费的时间。
  - 一些网站甚至可能执行多个重定向链(例如，非www到www，然后到安全URL)。此计时是用于重定向的所有时间的总和，如果没有发生重定向，则为0。尽量减少重定向的使用对于减少页面加载时间和优化页面体验至关重要。有很多情况下URL重定向是不可避免的，如网站迁移，https重定向，www到非www等，因此，如果可能的话，您的目标应该将它们限制为1个。
  - 多个页面重定向对网站性能的影响
    1. 缓慢重定向：如果应用程序本身很慢，那么重定向也可能很慢。由于长时间的空白页面，这通常会导致糟糕的页面体验，导致不耐烦的用户一起退出页面。
    2. 低效的客户端重定向：JS重定向和meta-refreshes效率很低，因为浏览器会在重定向启动之前加载初始页面的一部分。这会延长页面加载时间，并造成较差的用户体验。
    3. 重定向循环：你的网站可能会出现重定向循环，这发生在制定了太多的重定向，或调用了错误的重定向。有时，链会指向初始重定向，并导致无法加载所需页面的永久循环。
  - 优化 How to avoid multiple page redirects
    1. 支持服务器端(web-server或应用程序)重定向，而不是客户端(HTML或JavaScript)重定向。
    2. 避免登陆页重定向/最小化重定向链。
  - 在请求瀑布图（Waterfall Chart-可以使用WebPagetest生成请求瀑布图）中，重定向持续时间包括从测试开始到我们开始请求最终HTML页面之前的时间(当我们收到第一个 200 OK响应时)。在此期间，浏览器屏幕是空白的!通过尽可能减少重定向，确保这个持续时间保持较短。
  - 常见的重定向包括：
    - 从非www重定向到www(例如，example.com 到 www.example.com)；
    - 重定向到安全URL(例如，http://到https://)；
    - 重定向到设置cookie；
    - 重定向到网站的移动版本；
- Connection Duration（连接时长）：一旦重定向完成，将测量连接时间。这是连接到服务器并接收向页面发出请求所花费的时间。
  - 从技术上讲，这个时间是阻塞时间、DNS时间、连接时间和请求发送时间(而不仅仅是连接时间)的组合。我们将这些组件组合成一个连接时间(Connection Duration)来简化事情(因为大多数连接持续时间通常都很小)。
  - 在瀑布图中，连接时间包括到并包括最终HTML页面请求中的“发送”时间(第一个200 OK响应)的所有内容。在此期间，浏览器屏幕仍然是空白的!各种原因可能导致这种情况，包括测试服务器和站点之间的连接缓慢/有问题，或者来自站点的响应时间较慢。
- Backend Duration（后端响应时间）：连接完成并发出请求后，服务器需要为页面生成响应。生成此响应所需的时间称为后端响应时间。
  - 在瀑布图中，后端响应时间由页面请求中的紫色等待时间组成。
  - 优化：页面缓存，更强大的服务器。
  - 通常，这个时间应该保持在600毫秒以下(或尽可能低)。结合快速前端，优化服务器端性能可以为页面加载时间带来惊人的结果。一般情况下，复杂动态网站的页面生成时间可以控制在0.25秒以内。
- Time to First Byte（TTFB，首字节响应时间）：是从请求开始到接收到响应的第一个字节的总时间。
  - TTFB，它是【“重定向时长”+“连接时长”+“后端响应时间”之和】。这个指标是web性能的关键指标之一。
  - 优化：优化应用程序代码、实现缓存、微调web服务器配置或升级服务器硬件。
  - 在瀑布图中，从测试开始到接收页面请求之前度量它，并用橙色线表示。
- First Paint（首次绘制时间点）：是浏览器在页面上进行任何类型渲染的第一个点。
  - 根据页面的结构，这个First Paint可以只显示背景色(包括白色)，也可以显示页面的大部分。这个时间安排非常重要，因为在此之前，浏览器将只显示一个空白页面，而此更改将向用户提示页面正在加载。然而，我们不知道有多少页面是这样渲染的，所以有一个早期的First paint并不一定意味着一个快速加载的页面。如果浏览器不执行绘制(例如，html产生一个空白页面)，那么绘制时间可能会丢失。最后，First Paint作为快速性能的指标并不是很有用，因为First Paint通常是一个背景颜色或图形元素，对用户没有任何用处。一个更好的时间点是First Contentful Paint，这是第一个内容元素被绘制的时间点(通常是文本、标题和图像)。
  - 在瀑布图中，它由绿线表示。
- DOM Interactive Time（DOM交互时间）：DOM交互时间是浏览器完成加载和解析HTML以及构建DOM(文档对象模型)树的时间点。
  - DOM是浏览器内部构造HTML以便呈现HTML的方式。
  - 瀑布图中没有标记DOM交互时间，因为它通常与DOM内容加载时间非常接近。
- DOM Content Loaded Time（DOM内容加载时间，简称：DOM Loaded或DOM Ready）：是DOM准备就绪的时间点(即DOM Interactive)，并且没有样式表阻碍JavaScript的执行。
  - 如果没有样式表阻塞JavaScript执行，也没有解析器阻塞JavaScript，那么这将与DOM交互时间相同。
  - 括号中的时间是执行DOM Content Loaded事件触发的JavaScript所花费的时间。由于此事件经常被许多JavaScript框架用作起始点，该事件的延迟可能意味着呈现的延迟，因此确保样式和脚本顺序得到优化并延迟JavaScript解析非常重要。
  - 在瀑布图中，它用蓝线表示。
- Onload Time（装载时间）：当页面处理完成并且页面上的所有资源(图像、CSS等)已完成下载时，就会发生Onload时间。
  - 这也是发生DOM完成和JavaScript窗口的同一时间。Onload事件触发。请注意，可能会有JavaScript启动对更多资源的后续请求，这就是为什么首选Full Loaded Time。
  - 在瀑布图中，它用红线表示。
Fully Loaded Time（满载时间）：本质上，GTmetrix在完成测试之前一直等待页面停止传输数据，从而获得更一致的页面加载时间。
- 满载时间可能不是用户感知性能的最佳指标（你的网站可能以快速的方式加载了内容;然而，由于分析现在正在等待整个站点停止加载数据或执行JavaScript，您报告的完全加载时间可能会更长），你应该把重点放在优化6个性能评分指标上。
- 满载时间是以下所有事件发生后的时间点
  - 第一次内容绘制
  - 装载触发
  - 网络和CPU空闲(5.25s)
- 对于遗留报告，在以下情况下测量满载时间
  - 装载触发
  - 网络空闲(2s)
- 当满足上述条件时，我们取最大时序
  - 第一次绘制
  - 第一次内容绘制
  - 装载时间
  - 最大内容绘制
  - 总交互时间
  - 最新请求捕获
- 在瀑布图中，它用紫色线表示。

重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置（如：网页重定向、域名的重定向、路由选择的变化也是对数据报文经由路径的一种重定向）。

比如网页重定向-登录：如主页面控制器部分的代码，会先判断session中是否存在有数据，证明用户已登录，否则，重定向回到登录页面（使“登录”成了“主页面”的“必经之路”和“关口”）。
引用：重定向的作用及其意义

为什么网页加载时间很慢？
当对页面发出请求时，前端和服务器端组件都需要一定的时间来完成它们的操作。因为它们的操作基本上是顺序的，所以它们的累积时间可以被认为是总页面加载时间。
站点速度的前端和后端因素：快速的浏览体验是由这两个方面在最佳设置下工作组成的。

即使在优化了前端之后，仍然可以通过优化服务器端来提高速度。这意味着优化服务器生成页面的方式。
服务器端性能的一个很好的指标是生成HTML页面所需的时间(页面生成时间)。这被标记为瀑布图中第一个元素上的“等待”时间(也称为“后端响应时间”)。通常，这个时间应该保持在600毫秒以下(或尽可能低)。
如何让服务器端更快?
☛服务器端响应慢的原因：
1.低效的代码或SQL
2.瓶颈/缓慢的服务器。
☛让服务器更快：
1.页面缓存（如果你使用的是CMS（例如WordPress, Shopify等），实现缓存最简单的方法是通过像WP Rocket这样的插件）。
2.更强大的服务器（共享主机（最经济，能支撑小站点，小流量）；专用服务器（高流量、资源密集型，企业级网站适用））。
来源：Why is my page slow?

DOM
DOM即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容
来源：文档对象模型

7.4.4 The Structure Tab（结构选项卡）

第四部分：结构选项卡

结构标签是PageSpeed和YSlow的继承，包含所有基于结构的Lighthouse审计和最优实践，以获得最佳的web性能。
审计可帮助构建最佳前端性能的网站。每次审计都是根据您对它们的遵守情况进行评估，并根据对页面性能最有可能的影响进行排序。
请注意，结构审计不会直接影响性能分数，但是处理它们可以作为改善整体页面加载时间的良好起点。此外，一些审计是相关的，因此，修正一个审计可能会影响其他审计。
每次审核产生的总影响将被计算成页面的结构得分。单击每个审计将展开它，显示对审计的影响有贡献的请求。

结构审计影响程度

高：改进这种审计应该会大大提高页面性能。
中高：改进这种审计应该会显著提高页面性能。
中：改进此审计可以适度地提高页面性能。
低中：改进此审计可能会在一定程度上提高页面性能，但收效甚微。
低：优化或改进这种审计并不是完全必要的，可以忽略不计。
无：无影响。
N/A：这种审计没有任何影响，纯粹是诊断性或信息性的。

所有审计项

lighthouse审计44项（过时1项），报告中共42项（lighthouse（过时1项，未出现2项），新增1项（lighthouse中无））。

lighthouse

Avoid an excessive DOM size（避免较大的DOM）
- 影响TBT（Total Blocking Time 总阻塞时间）
- 较大的DOM树可能会增加内存使用，导致更长的样式计算，并可能产生代价高昂的布局回流。操纵DOM元素有助于根据您希望用户看到的内容修改页面内容。避免过大的DOM大小最符合页面的利益，特别是在页面体验的上下文中。
- 触发审计：GTmetrix报告页面的DOM元素总数、页面的最大DOM深度及其最大子元素。根据DOM的大小（即DOM元素的数量），此审计的影响评分将发生变化。如果DOM大小超过818，则触发此审计。
- LOW
- 优化：在你的开发工作流中集成某些流程是一个很好的实践，这样你的生产网站就不会受到过大DOM大小的影响（例如，当使用CMS构建网站时，要注意使用的主题或插件，因为它们可能会注入太多元素，其中一些可能与您的网站功能无关）。在许多情况下，这些特性是隐藏的，使您认为没有任何代码。在可能的情况下，删除与站点功能无关的不需要的代码。
Avoid chaining critical requests（避免关键请求链）
- 影响FCP（第一次内容绘制），LCP（最大内容绘制）
- 关键请求链是相互依赖的请求序列，对于页面呈现至关重要。它由关键呈现路径(Critical Rendering Path)决定，关键呈现路径建立了请求解析和执行的顺序。长关键请求链(特别是那些具有大量资源的请求链)会大大降低页面加载速度，因为它们被认为是呈现阻塞。减少关键请求链的数量可以减少延迟，并加快页面加载速度。
- 触发审计：1.Render-blocking，2.未预加载，3.以中等、高或非常高的优先级声明，如果至少有一个这样的关键请求链，则触发此审计。对于触发的审计，GTmetrix详细显示最长的关键请求链，允许查看每个请求，同时显示最大关键路径时延。
- LOW
- 优化：1.预加载键请求，2.减少关键资源的数量，3.使用font-display属性优化，4.WordPress(和其他CMS)用户可以使用像WP Rocket这样的缓存插件来执行上面列出的一些优化(例如，预加载请求，延迟脚本，延迟加载下面的图像等)。
Avoid CSS @import（避免CSS @import）
- 影响FCP（第一次内容绘制），LCP（最大内容绘制）。
- CSS @import是从另一个CSS文件中调用样式表/CSS文件的过程。此方法使浏览器按顺序加载每个CSS文件，而不是并行加载。由于CSS默认情况下是呈现阻塞的，这可能会影响页面性能。避免使用CSS @import来加快页面加载速度，提高访问者的页面体验。
- 触发审计：GTmetrix计算页面代码并标记任何CSS @import调用。如果至少有一个这样的调用，则触发此审计。
- 优化：可以使用一些策略来代替CSS @import，1.使用链接标签，2.组合或内联CSS。
Avoid document.write()（避免document . write ()）
- 谷歌的Chrome浏览器(版本55及更高)在检测到document.write()时自动代表用户进行干预…
- 触发审计：GTmetrix标记任何对文档的调用。没有被Chrome浏览器阻止的document.write()，包括Chrome所引发的任何警告标志。如果存在一个或多个这样的调用，则触发审计。
- 优化：只要可能，您可以通过最好完全消除document.write()来修复此审计；在理想的情况下，避免使用document.write()应该构建到您的开发工作流程中，这样您的生产网站从一开始就针对web性能进行优化；如果你无论出于什么原因都无法避免使用document.write()，请在其<脚本>启用异步加载脚本，消除渲染阻塞行为。
Avoid enormous network payloads（避免较大的网络有效负载）
- 影响LCP（最大内容绘制）。
- 较大的网络负载(即较大的文件大小)与较长的页面加载时间直接相关。减小页面网络请求的总大小可以改善访问者的页面体验，因为较小的文件下载更快。
- 触发审计：GTmetrix评估页面资源并以KB/MB为单位报告总页面大小。如果页面大小超过2.667 MB，则触发此审计。单击审计将显示所有页面资源，按大小排序，从最大的资源开始。
- LOW
- 优化：1.延迟非关键资源，2.尽量减少资源，3.缓存相关请求。
Avoid large layout shifts（避免大的布局变化）
- 影响CLS（累积布局偏移）
- 较大的布局变化会给访问者带来令人沮丧的体验，因为它们会使页面在视觉上显得不协调，因为页面元素突然出现，四处移动，并影响访问者与页面的交互方式。避免大的布局变化对于为访问者创造流畅和流线型的体验至关重要。
- 触发审计：此审计与页面的累积布局位移高度相关，并详细说明哪些页面元素对此做出了贡献。
- N/A
- 优化：通过将良好的实践融入到开发工作流中来避免较大的布局变化。1.指定图像尺寸，2.减少由广告、嵌入和iframe引起的布局变化，3.避免在现有内容之上插入新内容，4.防止不可见文本闪烁(FOIT)，5.避免使用非合成动画。
Avoid long main-thread tasks（避免长时间的主线程任务）
- 影响 TBT（总阻塞时间）
- 诸如HTML/CSS解析、JavaScript解析/执行等事件都是运行在主线程上的“任务”(默认情况下)。当这些任务中的任何一个运行时间超过50毫秒(也称为“长任务”)时，它们都可能会延迟，包括首次绘制和页面完全交互所需的时间。确保尽可能避免冗长的主线程任务，为访问者提供良好的页面体验。
- 触发审计：此审核与您的交互时间(TTI)指标高度相关。单击此审计将显示哪些主线程任务运行的时间超过50毫秒。该审计列出了主线程上运行的所有长任务。
- LOW
- 优化：确保你把好的实践融入到你的开发工作流程中，以最小化主线程的工作，以提高web性能。
Avoid multiple page redirects（避免多个页面重定向）
- 影响FCP（第一次内容绘制），LCP（最大内容绘制）。
- 避免多个页面重定向是一个关键的优化，因为它们是你的访问者体验到的第一件事，甚至在你的页面加载之前。URL重定向保持旧的、可能损坏的URL和另一个活动URL之间的连续性。当用户试图访问旧链接时，他们会自动“重定向”到新链接，确保平稳过渡。尽管重定向有时是必要的，但尽量减少其使用对于减少页面加载时间和优化页面体验至关重要。
- 触发审计：如果有2个或更多的URL重定向，GTmetrix将触发此审计。单击审计将显示重定向的url。
- LOW
- 优化：虽然你应该尽量避免重定向，但在某些情况下它们是不可避免的。因此，如果可能的话，你的目标应该是将它们限制在1个。
Avoid non-composited animations（避免使用非合成动画）
- 影响CLS（累积布局偏移）
- 非合成动画指的是动画经过CSS或JavaScript的修改会触发页面像素的重新绘制，这会增加主线程的工作量。避免非合成动画可以加快页面加载速度，防止页面阻塞，即页面在加载时出现卡顿或视觉不稳定。
- 触发审计：GTmetrix检查页面上是否有任何动画元素是非合成的。如果至少有一个这样的元素，则触发此审计。单击审计显示非合成动画元素。
- 优化：一般来说，尽量只执行合成动画，特别是对于由GTmetrix标识的动画元素。首先评估用于动画的CSS元素。点击这里查看CSS元素的完整列表，这些元素可能触发也可能不会触发页面上的像素重绘Click here。
Avoid serving legacy JavaScript to modern browsers（避免为现代浏览器提供遗留JavaScript）
- 影响TBT（总阻塞时间）
- 将遗留JavaScript代码(即ES5标准)提供给现代浏览器，这样就可以防止用户下载不必要的大JavaScript文件。ES6(也称为ES2015+)是最新的JavaScript标准，它为JavaScript编程和功能带来了新的和现代的特性。尽管大多数现代浏览器都支持ES6，但许多开发人员继续采用忽略现代浏览器功能而专注于传统浏览器支持的实践。
- 触发审计：GTmetrix标识使用module/nomodule模式时不应该出现的填充和转换。即使存在这样的填充或转换，也会触发此审计。
- LOW
- 优化：处理此问题的一种策略是仅在需要时加载填充，这可以在JavaScript运行时提供特性检测支持。然而，在实践中往往很难实现。一个更实用的解决方案是使用<script type=“module”>和<script type=nomodule>。
Avoid unload event listeners（避免卸载事件监听器）
- 避免卸载事件侦听器可以帮助您利用现代浏览器中的后向/前向缓存(又名bfcache)。bfcache是一个内存中的浏览器缓存，当使用浏览器的后退和前进按钮时，它可以实现近乎即时的后退和前进导航。如果页面上的任何JavaScript使用了卸载事件监听器，bfcache将被禁用——这意味着无法进行即时来回导航，从而降低了访问者的页面体验。
- 触发审计：GTmetrix分析页面的代码，如果发现页面上有任何添加卸载事件侦听器的JavaScript，就会触发此审计。
- Med
- 优化：若要修复此审计，请删除页面上的所有卸载事件侦听器。相反，可以考虑使用pagehide或visibilitychange事件来确保页面仍然可以利用bfcache，并获得所有相关的好处。
Combine images using CSS sprites（使用CSS sprites组合图像）
- 影响FCP（第一次内容绘制），LCP（最大内容绘制）。
- 使用CSS sprites组合图像可以减少往返请求的数量，从而提高页面的性能。这种方法主要是指像图标、徽标和其他图形元素这样的小图像，它们可以组合成一个图像，然后通过CSS在页面上定位。减少加载的图像数量有利于您的页面性能，因为它减少了请求数量，从而减少了浏览器加载图像所花费的时间。
- 触发审计：GTmetrix使用以下标准将图像视为小图像：1.像素面积-小于96x96，2.图像大小-小于2048字节，GTmetrix评估您的页面，计算每个域的小图像数量，并评估使用什么协议来服务这些图像请求。根据协议，如果每个域的小图像计数超过以下阈值，将触发此审计：1）100 -用于HTTP/2请求，2）4 -用于HTTP/1.1请求。
- 优化：1）使用CSS sprites生成器工具组合小图像，2）添加CSS和HTML代码到您的网页（CSS代码声明组合图像，HTML代码在你的网页上定位不同的小图像）。
Defer offscreen images（延迟加载屏幕外图像）
- 延迟屏幕外图像(或延迟加载)指的是延迟加载不在访问者视口中的图像，直到需要时才加载。懒加载屏幕外图像被认为是行业最佳实践，因为它可以确保浏览器只下载在视口中显示实际需要的图像。
- 触发审计：GTmetrix识别所有在屏幕外或隐藏的图像。单击审计会显示屏幕外的图像，可以通过懒加载来提高页面性能。GTmetrix还会评估每个图像文件可能节省的文件大小。
- LOW
- 优化：1）使用本机惰性加载（Chrome(版本76及更高)和Firefox(版本75及更高)等浏览器支持内联元素的原生惰性加载，即嵌入HTML中的图像。），2）Using JavaScript，3）使用CMS插件(适用于WordPress和其他CMS)。
Don’t lazy load Largest Contentful Paint image（不要懒加载最大内容绘制图像）
- 延迟加载LCP图像(例如，英雄图像，主滑块等)会对页面的LCP计时产生不利影响。虽然您应该在页面上懒加载屏幕外的图像，但不建议为了实现快速的LCP定时而懒加载LCP图像等页面上方的内容。LCP是Web vital之一，改进它会带来SEO方面的好处。
- 触发审计：如果GTmetrix在LCP映像中检测到loading="lazy"属性，它将触发此审计。
- 优化：如果GTmetrix触发此审计，则通过展开审计并检查标识的LCP元素来记录LCP图像。然后，您需要找到一种方法来禁用该特定图像的延迟加载。
Efficiently encode images（有效编码图像）
- 有效地编码图像可以减少页面大小，并有助于更快地加载页面。在查看页面请求时，与HTML、CSS或JavaScript文件相比，图像可能占总页面大小的大部分。如果这些图像是未压缩的，它们会浪费带宽并增加页面加载时间，因为浏览器必须花费更多时间下载它们。
- 触发审计：GTmetrix评估页面上的所有JPEG和BMP图像，并将它们压缩到原始质量的85%。如果压缩图像比原始图像至少小4KB，则标记它。单击GTmetrix报告上的审计，将列出相关图像。
- 优化：1）手动压缩图像，2）使用图像CDN，3）使用CMS插件(适用于WordPress或其他CMS)。
Eliminate render-blocking resources（消除渲染阻塞资源）
- 影响FCP（第一次内容绘制），LCP（最大内容绘制）。
- 呈现阻塞资源是阻止或延迟浏览器将页面内容呈现到屏幕上的脚本、样式表和HTML导入。这些资源延迟了第一次绘制——你的浏览器第一次渲染某些东西(即背景颜色、边框、文本或图像)的时间。消除渲染阻塞资源可以帮助您的页面加载显著加快，并改善您的访问者的网站体验。
- 触发审计：如果在你的页面上遇到以下情况，GTmetrix将标记一个资源为渲染阻塞并触发此审计（1.< script>出现在<头部>并且没有defer或async属性。2.<link rel=“stylesheet”>没有禁用或媒体属性的标记。3.<link rel=“import”>标记，该标记没有异步属性。）
- 优化：Read our blog article to learn how to eliminate render-blocking resources on your page.
Enable Keep-Alive（开启Keep-Alive）
- 影响FCP（第一次内容绘制），LCP（最大内容绘制）。
- 对于HTTP/1.1请求，启用Keep-Alive可以减少延迟并提高页面性能。
- 触发审计：GTmetrix评估页面资源的响应标头，并标记未启用Connection: Keep-Alive的请求。如果至少有一个这样的资源，则触发此审计。如果网页使用HTTP/2，就不会检查你的web服务器是否启用了Keep-Alive。
- 优化：1) Apache服务器-Apache默认启用Keep-Alive连接;但是，您可以通过在httpd.conf文件中添加以下行显式地打开它们。2）2) Microsoft IIS服务器复制并粘贴以下文件到命令行appcmd set config /section:httpProtocol /allowKeepAlive:true
Enable text compression（启用文本压缩）
- 影响FCP（第一次内容绘制），LCP（最大内容绘制）。
- 启用文本压缩能够提供更小的基于文本的资源，如HTML、CSS和JavaScript，以实现更快的文件下载。这些文件越大，下载它们所需的时间就越长，访问者必须等待更长时间才能查看页面上的内容。
- 触发审计：GTmetrix查找页面上所有未压缩的基于文本的资源，并标记任何可以减少至少10%或1.4 KB的资源。
- LOW
- 优化：提供基于文本的资源的web服务器进行压缩（1. Apache服务器，2.其他服务器NGINX，Microsoft IIS，3.针对WordPress(或其他CMS)用户）。
Ensure text remains visible during webfont load（确保文本在webfont加载期间仍然可见）
- 影响FCP（第一次内容绘制），LCP（最大内容绘制）。
- 当浏览器加载页面时，文本内容可能在网页字体完全下载之前就已经准备好绘制了。在这种情况下，你的文本在短时间内对用户保持不可见或隐藏，直到你的网页字体被下载。这个问题被称为无形文本的闪光(FOIT)。确保你的文本在网页字体加载时仍然可见，有助于防止空白页和不必要的布局变化，以获得更好的页面体验。
- 触发审计：GTmetrix识别了CSS中声明的所有web字体,并检查了是否为每个web字体指定了一个字体显示属性,其中任何一个值：block、swap、fallback、optional，如果GTmetrix在没有上述声明的情况下找到了一个web字体URL,那么这个审计触发器。单击审计显示web字体url列表。
- LOW
- 优化：有一些策略，以确保在网页字体加载期间，页面上的文本仍然可见，例如：1)预加载网页字体、2)使用字体显示、3)谷歌网页字体，4)针对WordPress(或其他CMS)用户。
Keep request counts low and transfer sizes small（保持较低的请求数和较小的传输大小）- 报告中未找到该项
- 影响
- 高请求数和大资源通常会对站点性能产生负面影响。谨慎的做法是保持较低的请求数和较小的传输大小，这样即使在较慢的连接上，页面也可以快速加载。
- 触发审计：GTmetrix评估整个页面,并报告资源所生成的网络请求的数量,以及总转移大小。
- 优化：没有一刀切的方法，所有的解决办法其实影响并不大，性能预算可以帮助您评估页面资源，以优化请求的大小和数量。例如，您可以将页面发出的请求数量最小化：1）避免多个页面重定向，2）使用CSS sprites组合图像，3）删除不必要的第三方脚本。较小的资源可以通过：1）压缩文本资源，2）缩小CSS和JavaScript，3）适当的大小和压缩你的图像。
Lazy load third-party resources with facades（懒加载带有外观的第三方资源）
- 影响TBT（总阻塞时间）。
- 延迟加载带有外观的第三方资源基本上意味着延迟加载实际的第三方嵌入，并将它们替换为静态元素。实际的第三方嵌入只有在用户与facade交互时才会加载。通过这样做，可以减少浏览器在页面加载的初始阶段处理额外脚本的时间，从而实现整体上更快的页面加载。
- 触发审计：GTmetrix可以识别页面上的第三方嵌入，如社交媒体小部件、广告、视频嵌入(例如，YouTube嵌入播放器)。
- Med-Low
- 优化：要使用外观延迟加载第三方资源，请使用看起来类似于实际第三方嵌入的静态元素/占位符加载页面。你可以通过以下几种方式做到这一点：1)使用CMS插件(适用于WordPress或其他CMS)、2)使用谷歌的推荐外观、3)在页面上手动创建外观。
Minify CSS（缩小CSS）
- 影响FCP（第一次内容绘制）、LCP（最大内容绘制）。
- 缩小CSS文件可以通过删除注释、空白和冗余代码来帮助减小文件大小。这些CSS文件越小，下载速度就越快，从而使浏览器的执行速度更快。默认情况下，CSS被认为是呈现阻塞的，因为浏览器在下载、解析和执行样式表之前不会呈现任何内容。根据页面布局和样式的复杂程度，CSS文件可能比浏览器渲染页面所需的文件要大。
- 触发审计：GTmetrix计算页面上的所有CSS文件，并计算每个未缩小的文件浪费了多少带宽。单击审计将显示可缩小的CSS文件列表。
- Low
- 优化：CSS小型化是一个行业最佳实践，应该纳入到您的开发工作流程中，以便您的生产网站的性能优化。1)使用在线工具缩小CSS，2)使用构建工具缩小CSS，3)使用CDN缩小CSS，4)针对WordPress(或其他CMS)用户。
Minify JavaScript（缩小JavaScript）
- 影响FCP（第一次内容绘制）、LCP（最大内容绘制）。
- 最小化JavaScript文件是一种减少JavaScript负载和主线程阻塞时间的优化技术。缩小可以通过删除注释、空白和冗余代码来帮助减小JavaScript文件的大小，在某些情况下，还可以通过使用更短的变量和函数名来提高代码的效率。这些JavaScript文件越小，浏览器下载、解析和执行它们的速度就越快。
- 触发审计：GTmetrix计算页面上的所有JavaScript文件，并计算每个没有最小化的JavaScript文件浪费了多少带宽。单击审计将显示可以缩小的JavaScript文件列表。
- Low
- 优化：1）使用在线工具简化JavaScript、2）使用构建工具缩小JavaScript、3)使用CDN缩小JavaScript、4）适用于WordPress(或其他CMS用户)。
Minimize main-thread work（最小化主线程工作）
- 影响TBT（总阻塞时间）
- “最小化主线程工作”是在站点性能上下文中具有高影响的审计。主线程处理加载页面所涉及的大部分进程。页面加载的速度取决于主线程需要做多少工作。重要的是要确保主线程不会太忙，这样你的页面才能快速呈现并保持响应。
- 触发审计：GTmetrix识别并计算在主线程上执行的所有资源。根据页面加载期间主线程保持忙碌的时间长短，GTmetrix会触发这个审计，并将花费的时间分类为不同的类别，例如：1）脚本的评估、2）风格与布局、3）呈现、4）解析HTML和CSS、5）脚本解析和编译、6）垃圾收集、7）其他。单击审计将显示在每个类别上花费的时间。
- Med-High
- 优化：最小化主线程工作应该是开发工作流中的首要目标之一。主线程工作可以通过以下方法大大减少：1）减少用于评估脚本的时间、2）减少样式和布局的重新计算、3）减少解析CSS/HTML/JavaScript的时间、4）防止渲染页面像素的延迟。实现上述目标的一些策略包括：1)优化第三方JavaScript、2)跳出你的输入处理程序、3)使用web workers、4)减少JavaScript的执行时间、5)减少CSS解析时间、6)只使用合成属性、7)使用CMS插件(适用于WordPress或其他CMS)。
Preconnect to required origins（预连接到所需的源）
- 影响FCP（第一次内容绘制）、LCP（最大内容绘制）。
- 使用预连接可以帮助浏览器优先考虑重要的第三方连接，并加快页面加载，因为第三方请求可能需要很长时间才能处理。由于第三方资源(例如Facebook或YouTube嵌入)并非来自您的域名，因此它们的行为有时难以预测，并且可能会对用户的页面体验产生负面影响。
- 触发审计：GTmetrix识别没有优先获取请求的第三方资源，并估计通过使用预连接和/或dns-预取资源提示可以节省多少时间。此审计的影响评分取决于估计节省的时间。
- 优化：查看GTmetrix标记的第三方资源列表，并根据资源是否是关键资源，在它们的链接标记中添加preconnect或dns-prefetch。1）为重要的第三方域添加预连接、2）为所有其他第三方域添加dns-prefetch。
Preload key requests（预加载关键请求）
- 影响FCP（第一次内容绘制）、LCP（最大内容绘制）。
- 使用<link rel=“preload”>可以帮助您确定重要请求的优先级，从而加快页面加载速度。这是因为关键资源有时会在页面加载过程的后期被请求，浏览器直到在请求链中发现它们才知道它们的存在。
- 触发审计：GTmetrix评估关键请求链，并识别未预加载的第三级请求。然后GTmetrix显示预加载这些请求可以节省的估计时间。此审计的影响评分取决于估计节省的时间。
- 优化：1）预加载脚本、2）预加载样式表、3）预加载字体、4）针对WordPress(或其他CMS)用户。
Preload Largest Contentful Paint image（预加载LCP图像）
- 影响LCP（最大内容绘制）。
- 预加载最大内容绘制(LCP)图像可以显示你的网页形象或网站横幅更早在页面加载。快速的LCP使页面访问者能够更快地获得大量内容，增强他们的用户体验。由于LCP是Web vital之一，因此通过预加载相关资产来改善LCP计时也有SEO方面的好处。
- 触发审计：GTmetrix仅在以下所有条件为真时触发此审计：1）LCP图像没有通过<link rel=“preload”>、2）通过网络加载LCP映像、3）没有从主文档中发现LCP图像(例如，LCP图像在关键请求链中被延迟)、4）LCP图像是从主帧加载的(即，不是从<iframe>)。
- Low
- 优化：如果GTmetrix标记了LCP图像，您可以通过在HTML头中使用链接标记来预加载它，就像您可以预加载任何其他关键资源一样。
Properly size images（适当大小的图像）
- 页面上提供的图像应该根据它们将显示的尺寸适当大小。一个非常常见的问题是上传的图像是全分辨率或超大尺寸的。典型的例子包括：1）直接从相机或手机上传高分辨率图像；2）使用高分辨率的库存照片；3）使用大的，可打印的标志或图形；4）当这种情况发生时，浏览器需要将这些图像调整到原始大小的一小部分以便显示，在此过程中浪费了时间和资源。5）不必要的大图片迫使用户下载无用的数据，影响他们的页面体验。
- 触发审计：GTmetrix将渲染/显示图像的大小与页面上实际图像的大小进行比较。如果渲染/显示的图像比实际图像至少小4KB，则标记它。单击GTmetrix报告上的审计，将列出相关图像。
- Low
- 优化：Read our blog article to learn how to properly size images on your website.
Reduce initial server response time（减少初始服务器响应时间）
- 影响FCP（第一次内容绘制）、LCP（最大内容绘制）。
- 首字节时间(TTFB)，也称为服务器响应时间，是浏览器响应浏览器请求接收第一个字节所花费的时间。减少TTFB对访问者的页面体验至关重要，因为它会影响HTML中引用的每个资源，并直接影响页面加载所需的时间。缓慢的TTFB可能会对您的前端资源产生负面影响，因为您的访问者可能只看到一个空白页面，而浏览器正在等待服务器的响应。作为主要的后端优化，减少TTFB可以补充前端开发，从而显著提高性能。
- 触发审计：如果初始服务器响应时间超过600毫秒，将触发此审计。
- Low
- 优化：有多种策略可以改善服务器响应时间。其中一些关键策略是：1)优化应用程序代码(包括数据库查询)；2)实现服务器端缓存；3)升级服务器硬件以获得更多CPU或内存资源。
Reduce JavaScript execution time（减少JavaScript执行时间）
- 影响TBT（总阻塞时间）。
- 减少JavaScript执行时间，通常指的是减少解析、编译和执行JavaScript文件所花费的时间。默认情况下，JavaScript在主线程上执行，当这种情况发生时，浏览器不能执行其他任务。根据脚本执行的顺序，这可能会阻止元素被绘制，延迟页面呈现并影响页面交互性。减少JavaScript执行时间本质上减少了主线程阻塞时间——反过来，可能会削弱级联请求的效果。改进此审计可以获得更好的性能指标，并推动实际性能的提高。
- 触发审计：GTmetrix测量页面上每个JavaScript文件的执行时间。单击GTmetrix报告上的审计，将列出所有JavaScript文件及其执行时间。此审计的影响评分将取决于JavaScript执行时间，执行时间越长通常影响评分就越大。
- Low
- 优化：1)实现代码拆分；2)删除未使用的代码；3)使用PRPL模式缓存代码；4)缩小和压缩JavaScript代码。
Reduce the impact of third-party code（减少第三方代码的影响）
- 影响TBT（总阻塞时间）。
- 第三方代码由广告、分析服务和其他元素组成，这些元素来自不同于您的URL域的域。这些资源通常是导致web性能差的原因，因为它们可能包含阻塞主线程和阻止其他任务执行的脚本。它们还可能由于其他一些原因使页面变慢，包括服务器响应时间变慢、DNS查找变慢、服务器响应错误等等，这些都可能影响页面性能。为第三方脚本检查你的网站代码是至关重要的，为了网络性能，尽可能减少他们的影响。
- 触发审计：GTmetrix识别页面上的第三方脚本，并计算每个脚本阻塞主线程的时间。单击审计将显示阻塞主线程的第三方脚本。如果来自所有第三方脚本的总阻塞时间为250毫秒或更长，则通常会触发此审计。
- Med
- 优化：1)检查你网站的第三方脚本；2)高效加载第三方JavaScript。
Reduce unused CSS（减少未使用的CSS）
- 影响FCP（第一次内容绘制）、LCP（第二次内容绘制）。
- 减少未使用的CSS规则可以减少呈现阻塞行为，从而加快页面加载速度，改善访问者的页面体验。默认情况下，CSS文件被认为是渲染阻塞，因为它们会延迟First Paint，直到浏览器完成执行它们。根据布局和访问者的设备，加载不需要用于呈现顶部内容的CSS规则可能会对页面性能产生重大影响，无论是测量的还是感知的。
- 触发审计：GTmetrix报告所有至少有2 KB CSS的样式表，这些样式表没有用于呈现顶部内容。GTmetrix还估计了通过减少未使用的CSS规则可能节省的文件大小。
- Low
- 优化：1)用于非关键的CSS规则；2)对于固定CSS规则；3)针对WordPress(或其他CMS)用户。
Reduce unused JavaScript（减少未使用的JavaScript）
- 影响LCP（最大内容绘制）。
- 减少未使用的JavaScript可以减少呈现阻塞行为，从而加快页面加载速度，改善访问者的页面体验。默认情况下，JavaScript文件是呈现阻塞的，因为它们会阻止浏览器处理其他页面加载任务，从而延迟页面的First Paint。因此，加载未使用的JavaScript可能会对页面性能产生严重影响，无论是测量的还是感知的。
- 触发审计：GTmetrix检查JavaScript文件中是否有在加载页面期间未执行的代码。有超过20 KB未使用代码的JavaScript文件将被标记。GTmetrix还估计了通过减少未使用的JavaScript可能节省的潜在文件大小。
- Low
- 优化：1)代码分隔；2)消除死代码；3)死导入代码消除
Remove duplicate modules in JavaScript bundles（删除JavaScript包中的重复模块）
- 影响TBT（总阻塞时间）。
- 大多数网页上的JavaScript包通常是通过从流行的库、依赖项和包中导入代码来构建的。这通常会导致您的页面从多个源继承重复的模块。在JavaScript包中删除重复的模块可以确保您不会向访问者发送不必要的JavaScript代码。JavaScript负载越低，加载页面时浏览器执行过程就越快。
- 触发审计：GTmetrix计算页面上的所有JavaScript模块，并标记在JavaScript包中重复的模块，以及浪费的带宽(KB)。如果浪费的带宽超过1kb，则触发此审计。
- 优化：一般来说，将良好的站点构建实践纳入到开发工作流中，以确保从一开始就避免JavaScript模块的重复。要修复此审计，请使用webpack-stats- duplduplicate之类的工具来识别重复的模块。Learn more about removing duplicate modules from your JavaScript bundles here.
Replace large JavaScript libraries with smaller alternatives (deprecated)（用较小的替代方案替换大型JavaScript库(已弃用)）
- 此审计在Lighthouse 6.4.0中被移至实验状态，在8.4.0中被移除。
Serve images in next-gen formats（以下一代格式提供图像）
- 大多数网站提供JPEG或PNG格式的图片，这两种格式从上世纪90年代就开始出现了。新一代图像格式的可用性提供了进一步减少图像文件大小的机会。“以下一代格式提供图像”审计建议您以利用先进的图像处理和压缩技术的更新格式提供图像：1）WebP(最广泛使用和推荐的格式)；jpeg2000(适用于特殊情况)；3）JPEG XR(适用于特殊情况)。虽然每种格式的设备和浏览器兼容性各不相同，但所提供的图像文件大小的减小，以及整体上更快的网页下载，都值得进行评估。
- 触发审计：GTmetrix分析您的页面并识别所有以BMP、JPEG或PNG等旧格式提供的图像。然后，它将每张图像转换为WebP格式，以计算每张图像的文件大小可以减少多少。单击GTmetrix报告上的审计，列出所有映像及其以KB为单位的潜在节省。只有可以减少至少8kb的图像才会显示。
- Low
- 优化：根据浏览器/设备支持的范围选择下一代格式。WebP是谷歌推荐的下一代格式，也是使用最广泛的格式，具有最好的浏览器/设备支持。要提供WebP图像，请使用以下方法之一：1)手动转换您的图像到WebP格式；2)使用Photoshop插件；3)使用JavaScript；4)适用于WordPress(或其他CMS用户)。
Serve static assets with an efficient cache policy（使用有效的缓存策略服务静态资产）
- 通过在用户浏览器中本地存储这些文件，使用有效的缓存策略为静态资产提供服务，有助于在重复访问时缩短页面加载时间。每次浏览器加载一个页面时，它必须下载所有页面资源，如HTML、CSS、JavaScript和图像。浏览器缓存存储静态资产，如CSS, JavaScript，图像，以便浏览器可以从其本地缓存检索它们。这比从页面的服务器上再次下载资源要快。当浏览器缓存被启用时，用户第一次访问你的页面不会更快;但是，由于缓存的内容，对该页面的后续访问将被删除。
- 触发审计：GTmetrix认为一个资源是可缓存的，如果它满足以下所有条件：1）它是字体、图像、样式表、脚本或媒体文件，2）它返回200、203或206 HTTP状态码，3）它没有显式的无缓存策略。基于上述标准，GTmetrix标记所有未有效缓存的静态资源。
- Low
- 优化：要设置有效的缓存策略，请根据用于提供静态资产的web服务器，遵循以下说明：1) Apache服务器；2)其他服务器；3)针对WordPress(或其他CMS)用户…
Use a <meta name=“viewport”> tag with width or initial-scale（使用<meta name=“viewport”>标记宽度或初始比例）
- 影响TBT（总阻塞时间）。
- 使用viewport元标记可以设置viewport的宽度和缩放，以便它在所有设备上都是正确的大小，特别是移动设备。不使用viewport元标签会使你的网站难以阅读，也可能会在移动浏览器上增加显著的延迟，影响第一次输入延迟。
- 触发审计：GTmetrix将触发此审计，除非满足以下所有条件：1）你页面的<head>包含一个<meta name=“viewport”>标签，2）viewport元标记包含一个内容属性，3）content属性的值包括text width=。
- 优化：如果GTmetrix触发此审计，将以下代码粘贴到页面的<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">Width =device- Width设置视口的宽度为设备的宽度，initial-scale=1设置用户访问页面时的初始缩放级别。一旦您这样做了，GTmetrix应该不再触发此审计(即，您将在GTmetrix报告的no Impacts部分中找到它)。
Use a Content Delivery Network (CDN)（使用内容分发网络(CDN)）
- 使用“内容分发网络(CDN)”可以提高您的网站在全球不同地区的性能。CDN本质上是一个分布在世界各地的服务器网络。每个CDN“节点”位于不同的区域，并缓存页面的静态内容，如图像、CSS/JavaScript文件等。当用户访问您的页面时，资源将从最近的CDN节点的缓存中提供，而不是您的原始服务器，从而减少延迟并为您的访问者提供快速的页面体验，无论他们位于何处。
- 触发审计：GTmetrix查看页面请求的响应标头，并识别那些不是由已知CDN提供服务的响应标头。如果您的页面具有不在已知CDN上的静态资源，GTmetrix将触发此审计。此审计的影响评分将取决于已知CDN没有提供多少资源。请注意，此审核对您的结构分数影响较小，但更有可能影响您的性能分数。
- Med
- 优化：首先，cdn对于你的网站功能来说不是必要的。虽然它们可以在不同的地理位置显著提高你的网站性能，但是否应该使用它们的问题取决于你的目标受众和性能目标。Read our blog article to get a better sense of whether you should use a CDN.
Use explicit width and height on image elements（对图像元素使用显式的宽度和高度）- 报告中未找到此项
- 没有显式宽度和高度属性的图像和/或视频在页面加载时可能会导致较大的布局变化。布局变化可能会让页面访问者感到沮丧，因为元素可能会四处移动，可能会使您的页面在视觉上显得不协调。避免大的布局变化对于为访问者提供流畅和精简的体验至关重要。
- 触发审计：当满足以下所有条件时触发此审计：1）任何图像和/或视频元素要么缺少高度或宽度，要么缺少两个属性、2）这些高度和/或宽度属性没有在任何地方声明，即在HTML, CSS，特定的样式表等，3）高度和宽度属性没有实数，例如，非零数，CSS中的自动等。单击审计会显示没有显式宽度和/或高度属性的图像。
- 优化：要修复此审计，只需指定网页图像和视频元素的宽度和高度。这样可以确保图像和视频使用正确的间距。
Use HTTP/2 for all resources（对所有资源使用HTTP/2）
- HTTP/2克服了HTTP/1.1中的许多限制，包括更高的连接限制来处理更多的并行请求，以及更低的协议开销。这可以大大加快页面加载速度，使web应用程序更快，并使应用程序本身更加健壮。
- 触发审计：GTmetrix标记未使用HTTP/2提供服务的资源(仅主机，而不是第三方)。单击审计将显示非http /2资源。
- Low
- 优化：为了避免触发此审计，可以通过HTTP/2提供资源。检查你的主机提供商是否在你的服务器上启用了HTTP/2。
Use passive listeners to improve scrolling performance（使用被动侦听器来提高滚动性能）
- 像Chrome这样的浏览器通常会在初始页面加载期间阻止页面滚动，直到JavaScript执行完毕。在JavaScript已经阻塞主线程的情况下，平滑滚动是不可能的，这会对访问者的页面体验产生负面影响。被动事件监听器解决了这个问题，允许您改善访问者的体验。
- 触发审计：如果GTmetrix在你的页面上发现一个触摸或车轮事件监听器，这个审计就会触发：1）调用preventDefault ()；2）包含一个passive:true flag。否则，审核对你的结构分数没有影响。注意，附加到第三方脚本的事件侦听器被排除在外。
- 优化：要修复此审计，请为GTmetrix标记的每个事件侦听器添加一个passive:true标志。例如document.addEventListener('touchstart', onTouchStart, {passive: true});注意，上面的代码只对支持被动事件侦听器的浏览器有效。
Use video formats for animated content（对动画内容使用视频格式）
- 影响LCP（最大内容绘制）。
- 许多网站和应用程序使用动图形式的动画内容。然而，动图有时非常大，使得它们在传递动画内容时效率低下。考虑通过MPEG4或WebM视频文件传递动画内容，而不是使用大型gif。
- 触发审计：如果GTmetrix识别出任何超过100 KB的GIF，则标记此审计。单击审计将显示未优化的gif，以及通过转换为视频格式可以节省多少KB。
- 优化：有两种主要策略用于将gif转换为视频，包括：1)使用在线转换器；2)使用跨平台工具。
User Timing marks and measures（用户计时标记和测量）
- Web性能优化需要了解在你的网页上加载什么需要多少时间。在许多现代网站中，JavaScript通常是导致访问者体验到的次优性能的原因。用户计时API允许您测量应用程序的JavaScript性能。为此，您可以在JavaScript文件中插入API调用并提取计时数据，这些数据可以帮助您可视化JavaScript在页面上的运行情况。
- 触发审计：如果您的网页使用用户计时API, GTmetrix将显示您的标记和测量。单击审计以显示相关的标记和测量数据。
- N/A
- 优化：用户计时API允许您设置自己的标记和度量来分析JavaScript性能。Read this document to learn more on how to use the User Timing API.

45.Largest Contentful Paint element（最大绘制元素）- 只在报告中出现该项

影响LCP（最大内容绘制）。
N/A

7.4.5 Other Tabs（其他…）

7.4.5.1 Waterfall Tab（瀑布选项卡）

瀑布选项卡

页面加载请求逐一可视化（Learn how to read a waterfall chart.）
GTmetrix瀑布图在这个版本中没有看到任何变化，并为lighthouse数据提供了一个很好的展现形式。

Waterfall Chart 瀑布图

7.4.5.2 Video Tab（视频选项卡）

视频选项卡

登录的用户可以录制页面加载的视频，并准确地指出瓶颈和中断发生的位置；慢回放高达4倍，以可视化加载行为跳转到关键点，如第一次绘制和装载；下载和嵌入视频。
之前在视频选项卡中的幻灯片已经被移除，取代了摘要页面上的速度可视化。

7.4.5.3 History Tab（历史选项卡）

历史选项卡

一系列图表，用于跟踪页面随时间的性能。(Learn how to use the History Graphs.)
History选项卡中的更改包括添加新的性能评分指标图表，以及用GTmetrix Grade/Performance and Structure Scores图表替换PageSpeed和YSlow图表。

报告历史 Report History

页面指标

页面大小和请求数量

页面评分

性能测试-基础+中级（二）【前端性能测试】相关推荐

性能测试-基础+中级
持续更新- 标记性能测试基础 1. 性能测试起步 1.1 性能测试的应用场景 1.2 不同的角度看性能 1.3 影响性能的因素 2. 性能测试概述 2.1 性能测试定义和分类 2.2 常用性能测试术 ...
性能测试之前端性能优化（前端基础知识，前端性能测试常用工具，前端性能优化常见方法）
目录 1. 前端基础知识 1.1 为什么要关注前端页面的性能,了解页面的加载,渲染方式和顺序? 1.2 一次页面请求会经历哪些步骤? 1.3 页面的展示过程 2. 前端性能测试的常用工具 2.1 Go ...
性能测试基础（一）性能测试分类
性能测试分类性能测试(狭义) 负载测试压力测试(强度测试) 并发测试配置测试可靠性测试性能测试分类之我见关于性能测试有几个名词:性能测试.负载测试.压力测试.并发测试,很多人都是混合使用, ...
性能测试架构层(二) 从性能测试层面了解架构设计分布式项目实施过程中的常见难点，测试架构层面思考性能测试应该如何做？自行思考解决方案是什么？
目录前言架构预览小节一.访问层架构设计 1.LVS 2.Nginx 二.API 网关层架构设计 1.分布式会话管理 2.接入层控制 Filter过滤器三.核心服务层架构设计 1.核心服务 ...
Jmeter性能测试【应用场景、性能测试流程、搭建测试环境】
目录一.性能测试的概念二.性能测试类型三.性能测试应用场景(领域) 四.性能测试常用的指标五.性能测试流程六.搭建测试环境七.测试用例设计和脚本开发八.测试数据准备九.性能测试执行和管 ...
前端性能测试详细分析（二）
接着上篇文章的思路,咱继续聊前端性能测试分析和优化.今天是第二章,一共会有三章. 上文说到了图片大小的限制,如今的个大门户都不注意图片大小的限制.可能是觉得无所谓吧,其实一张图片减少1KB,整个网站 ...
【Loadrunner】学习loadrunner——性能测试基础篇VUG的使用（二）
文章目录 1.loadrunner初识 1.1.loadrunner是什么 1.2.loadrunner执行原理 1.3.loadrunner组成 2.Virtual User Generator(V ...
【性能学习】性能测试基础
学习链接:<性能学习实战30讲> 授课人:高楼课程从三个部分进行阐述: 第一个模块是性能测试基础篇.在这个模块里澄清一些性能测试的基础概念,讲解一些关键部分.但并不是对概念的简单描述,而 ...
H5前端性能测试快速入门
说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试.那本文谈到的则是H5前端性能测试,并希望通过阅读本文后,能够知道:H5 ...

性能测试-基础+中级（二）【前端性能测试】