阅读 455

如何使用chrome开发者工具来提高网站性能

Lighthouse

chrome提供了Lighthouse(旧版本是Audit)来判断我们网站的性能,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。

  • 它为您创建了一个基准,可用来衡量随后的更改。
  • 它为您提供了可行的提示,说明哪些更改将产生最大的影响。

Lighthouse面板

image.png

  • Simulated throttling

模拟在设备比较差的环境下网站的性能

  • Clear storage

清除缓存数据,模拟用户首次访问网站

  • Categories(生成一个有关下面选项性能的报告)禁用选项会稍微加快审核过程。

    • Performance (性能)
    • Progressive Web App(渐进式Web应用)
    • Best practices(最佳做法)
    • Accessibility(无障碍)
    • SEO
  • Device(Mobile选项模拟移动视口(有网速的限制),Desktop禁止模拟移动视口)。

  • 点击Generate report生成审计报告

Performance报告

下面我们来看看如何应用Performance评估我们网站的性能,Performance的性能指标由下图的6项指标构成

image.png

FCP (First contentful paint) :

测量从页面开始加载到屏幕上呈现页面内容的任何部分的时间,快速的FCP有助于使用户确信某些东西发生。

LCP (Largest contentful paint):

测量从页面开始加载到最大的文本块或图像元素在屏幕上呈现为止的时间。它可以用来确定页面的主要内容何时在屏幕上完成呈现。

TTI (Time to Interactive):

测量从页面开始加载到可视化呈现之间,它的初始脚本(如果有)已加载以及可以可靠地快速响应用户输入的时间。

TBT (Total blocking time):

First contentful paint (FCP) + Time to Interactive (TTI) = Total blocking time (TBT) ,在该时间中,主线程被阻塞足够长的时间以防止输入响应。

CLS (Cumulative layout shift):

CLS是衡量用户视觉稳定性的一项重要的以用户为中心的度量标准。

  • 影响因素:页面内容的布局转换通常是由于异步加载资源或将DOM元素动态添加到现有内容上方的页面而发生的。罪魁祸首可能是尺寸未知的图像或视频,呈现比其后备更大或更小的字体,或者是动态调整自身大小的第三方广告或小部件。

  • 布局转换:仅当现有元素更改其起始位置时,才会发生布局转换。如果将新元素添加到DOM或现有元素更改了大小,则只要更改不会导致其他可见元素更改其开始位置,该元素就不会算作布局偏移

  • 如何减少布局移动:

    • CSS transform属性使您可以为元素设置动画,而不会触发布局转换:
      • 使用transform: scale()来替代height 和 width属性的更改
      • 左右移动的元件,避免改变top,right,bottom,或left属性,并使用transform: translate()来代替。
      • transform之所以可以提高CLS体验,是因为GPU(图像加速器)进程会为其开启一个新的复合图层,不会影响默认复合图层,所以并不会影响周边的 DOM 结构,而属性的改变也会交给 GPU 处理,不会影响回流重绘,但是创建新的复合图层是有额外消耗的,也不要过度使用。
  • 良好的用户体验CLS得分不超过0.1分

更多CLS的内容请阅读:web.dev/cls/

Speed Index:

测量页面内容的可见填充速度。这是显示页面可见部分的平均时间。以毫秒为单位,取决于视口的大小,得分越低越好。

页面加载时的外观

image.png

Opportunities

在Opportunities提供了关于如何提高这个特定页面的加载性能的具体建议。我们可以根据建议修改我们的代码再重新检查页面性能有没有得到提升。

image.png

Diagnostics

Diagnostics部分提供了有关影响页面加载时间的因素的更详细信息。

image.png

Passed audits

Passed audits显示我们网站的情况

image.png

如何提升Performance

  • 识别关键代码、删减非关键代码。

  • js优化,默认情况下,所有JavaScript都会阻塞解析器,所以js优化尤其重要

    • 识别关键js代码后,将该代码内联到页面内。页面加载后,它将具有处理页面核心功能所需的内容。不是关键的js代码则通过URL方式引入。
    • 非关键JS,我们可以向script 标记添加异步关键字可以指示浏览器在等待脚本可用期间不阻止DOM 构建如:<script src="app.js" async></script>(但是要注意它是无顺序的,加了之后 script 加载执行不会按顺序)
    • 拆分js
  • css优化,css的加载和解析都会阻塞解析器,所以css优化也很重要

    • 识别关键css,将该css内联到页面内。不是关键的css则通过URL方式引入。
    • 压缩css文件、缩小css体积
  • 预加载关键资源

  <link rel="preload" as="script" href="critical.js">
  <link rel="preload" as="style" href="styles.css" >
复制代码
  • 避免大量的网络负载

    • 将请求推迟到需要时再发送
    • 最小化和压缩网络负载
      • 压缩文件
      • http压缩,至少使用 gzip 来压缩基于文本的资源,考虑使用 Brotli ~q11。 Brotli 在压缩比率方面优于 gzip。
    • 对图像使用WebP而不是JPEG或PNG。WebP图像比JPEG和PNG图像小(通常将文件大小减少25-35%)。这样可以减小页面大小并提高性能。
  • 利用缓存

    • DNS缓存
    • CDN缓存
    • 资源缓存
  • 使用预渲染

  • 避免多次页面重定向。重定向会降低您的页面加载速度。当浏览器请求已重定向的资源时,服务器通常返回如下HTTP响应:

      HTTP/1.1 301 Moved Permanently
      Location: /path/to/new/location
    复制代码

    然后,浏览器必须在新位置发出另一个HTTP请求以检索资源。跨网络的这种额外行程可能会使资源的加载延迟数百毫秒。

  • 保持较低的请求数量和较小的传输量

  • 减少服务器响应时间

Coverage

Coverage面板可以帮助我们检查我们代码的覆盖率以删除无用代码

image.png

  • 如下图所示,表示分别未使用jQuery和Lodash文件的约76%和30%。

    image.png

  • 单击jquery.js行。DevTools在Sources面板中打开文件。如果一行代码旁边有绿色的条,则表示该代码行已执行。红色条表示未执行,并且绝对不需要在页面加载时使用。

    image.png

Performance

分析、记录页面进行时性能或页面加载时性能。

performance结果分析

performance结果图如下所示:

image.png

FPS

每当您在FPS上方看到红色条形时,表示帧速率下降得很低,以至于可能损害用户体验。通常,绿色条越高,FPS越高。

image.png

CPU

CPU图表充满色彩的事实意味着在记录过程中CPU已被用尽,蓝色轮廓代表CPU图表以及图表颜色对应的含义,从图中我们可以判断出该页面花费了大部分时间进行渲染。

image.png

main

主线程随时间变化的活动图表,x轴表示一段时间内的记录。每个条形代表一个事件。宽条表示该事件花费了更长的时间。y轴表示调用堆栈。最上面的事件导致下面的事件。(事件右上角的红色三角形。每当您看到红色三角形时,即表示可能存在与此事件相关的问题的警告)

image.png

点击查看具体的堆栈事件检查性能瓶颈

  • Summary

汇总事件花费时间的详细信息,并且分析出哪行代码可能导致性能瓶颈

image.png

  • Bottom-Up

查看直接花费最多时间的活动

  • Call Tree

查看哪些根活动导致最多的工作。(根活动是导致浏览器完成某些工作的活动。例如,当您单击页面时,浏览器将激发一个Event活动作为根活动。这Event可能会导致处理程序执行,依此类推。)例如下图Animation Frame Fired,Paint,和Composite Layers是根活动。

Self Time:代表直接在该活动中花费的时间
Total Time:表示该活动或其任何子项花费的时间

image.png

  • Event log

按记录期间的活动顺序查看活动

最后

感谢大家阅读,如有问题欢迎纠正!

文章分类
前端
文章标签