Chrome控制台 网站性能优化指标一览

        打开chrome-》f12/右键查看元素-》NetWrok/网络   

        ctrl+F5 刷新网页,可以看到从输入url到页面资源请求并加载网页,用于查看资源加载,接口请求,评估网页、网站性能等,如下图:

request、stransferred、resources 的含义

        request()代表请求数量:点击上面可以单独查看各个request类型下的请求,request类型包含:xhr and fetch(接口请求)、Document、css、javaScript、Font、Image、Media、Manifest、web Socket、WebAssembly、other;

        stransferred(transferred over network):通过网络加载的资源大小。

        标识请求的资源的传输,可以看到资源大小

        resources(resources loaded by the page):统计的是前端页面加载的所有资源经过解压之后的原始大小。

以上说明来自Google官网: https://developers.google.com/web/tools/chrome-devtools/network/reference#uncompressed

https://stackoverflow.com/questions/56043151/what-is-the-difference-between-transferred-and-resources-in-chrome-devtools

DOMContentLoaded 和 Load 和 Finish的含义和区别

        DOMContentLoaded:DOM树构建完成。 即HTML页面由上向下解析HTML结构到末尾封闭标签。

        Load:页面加载完毕。 DOM树构建完成后,继续加载html/css 中的图片资源等外部资源,加载完成后视为页面加载完毕。

        DOMContentLoaded 会比 Load 时间小,两者时间差大致等于外部资源加载的时间。

        Finish: 是页面上所有 http 请求发送到响应完成的时间, HTTP1.0/1.1 协议限定,单个域名的请求并发量是 6 个,即 Finish 是所有请求(不只是XHR请求,还包括DOC,img,js,css等资源的请求)在并发量为6的限制下完成的时间。

        Finish 的时间比 Load 大,意味着页面有相当部分的请求量,

        Finish 的时间比 Load 小,意味着页面请求量很少,如果页面是只有一个 html文档请求的静态页面,Finish时间基本就等于HTML文档请求的时间。

        页面发送请求和页面解析文档结构,分属两个不同的线程,

Performance

Lighthouse

        Lighthouse 是 Google 开发的一款工具,用于分析网络应用和网页,收集现代性能指标并提供对开发人员最佳实践的意见。为 Lighthouse 提供一个需要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。

        Lighthouse报告分析

        Lighthouse生成的分析报告,首先会根据自定义勾选的需要测试的指标进行总的打分(下图标1处,可以把分析报告进行导出结果等操作)。

        Lighthouse 会对选择进行分析的维度给出一个的评估得分,分值范围0-100。

        评分主要分为三个档次,分别用红黄绿三种颜色代表:

0 – 49(慢):红色 
​50 – 89(平均值): 橙色
​90 – 100(快): 绿色

        如果得分能达到 90 分以上(绿色),则说明网站应用在该方面的评估表现符合最佳实践。⚠️注: 如果没有分数或得分为 0,则很有可能是检测过程发生了错误,比如网络连接状况异常等。

点击 See calculator,查看具体打分规则如下:

1、Metrics指标说明

指标名称说明
首次内容绘制
FCP(First Contentful Paint)
浏览器首次绘制来自 DOM 的内容的时间,内容必须是文本、图片(包含背景图)、非白色的 canvas 或 SVG,也包括带有正在加载中的 Web 字体的文本。
这是用户第一次开始看到页面内容,但仅仅有内容并不意味着它是有用的内容(如 Header、导航栏等)。
最大的内容绘制
LCP(Largest Contentful Paint)
可视区域中最大的内容元素呈现到屏幕上的最长时间,用以估算页面的主要内容对用户可见时间。
LCP 考虑的元素包括: 元素 、元素内的<svg>元素 、元素、通过 url() 函数加载背景图片的元素、包含文本节点或其他内联文本元素子级的块级元素。
可交互时间
TTI (Time to Interactive)
指的是所有的页面内容都已经成功加载,且能够快速地对用户的操作做出反应的时间点。
网页第一次完全达到可交互状态的时间点,浏览器已经可以持续性的响应用户的输入。
完全达到可交互状态的时间点是在最后一个长任务(Long Task)完成的时间,并且在随后的 5 秒内网络和主线程是空闲的。
总阻塞时间
TBT (Total Blocking Time)
表示此次分析过程中遇到的阻塞时间。
度量了 FCP 和 TTI 之间的总时间,在该时间范围内,主线程被阻塞足够长的时间以防止输入响应。
只要存在长任务,该主线程就会被视为“阻塞”,该任务在主线程上运行超过 50 毫秒(ms)。
累积布局偏移
CLS(Cumulative Layout Shift)

CLS 会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和,它是一种保证页面的视觉稳定性从而提升用户体验的指标方案。
布局转移的发生是因为浏览器倾向于异步加载页面元素。页面上可能存在最初尺寸未知的媒体元素,这种组合意味着浏览器在完成加载之前不知道各个元素会占用多少空间。因此,布局会发生剧烈变化。
CLS的有趣之处在于它可以用各种工具进行客观的测量,但它也是以用户为中心的,因为每个用户的设备都会影响你的网站布局的变化。虽然不能控制这一方面,但肯定可以采取预防措施,使其影响尽可能小。

速度指标
SI(Speed Index)
衡量首屏可见内容绘制在屏幕上的速度。在首次加载页面的过程中尽量展现更多的内容,往往能给用户带来更好的体验,所以速度指标的值约小越好。

其他指标:

指标名称说明
首次CPU闲置
FCI(First CPU Idle)
指在页面加载期间,当页面的主要内容已经完成加载并且JavaScript代码已经执行完毕后,浏览器第一次空闲的时间点。
在这个时间点之后,页面可以响应用户的交互操作,比如点击按钮或输入文本。
首次绘制
FP (First paint)

指浏览器首次将像素渲染到屏幕上的时间点,也就是页面的第一个像素点被绘制的时间。
FP的发生时机取决于浏览器的渲染机制和页面的结构。
当浏览器开始加载页面时,会解析HTML和CSS,构建DOM和CSSOM树,然后将它们合并为渲染树。
当浏览器开始将渲染树渲染到屏幕上时,FP就发生了,在这个时刻,用户可以看到页面上的第一个像素点,也就是FP。
通常FP表现为白屏。

首次有效绘制
FMP(First Meaningful Paint)
浏览器在加载网页时,第一次将主要内容呈现给用户的时间点。
这个时间点通常是用户感知到页面加载速度的关键点之一,用户可以看到页面上的一些内容,并开始与页面进行交互。
FMP是通过一个算法来猜测某个时间点的,所以可能不准确,且在 Lighthouse 6.0中,FMP指标已被弃用。
文档内容加载完成
DCL(DOMContentLoaded )
DCL指的是HTML文档中的DOM树构建完成、CSS文件加载完成并解析、JavaScript文件加载完成并执行的时间点,它表示网页的主要内容已经加载完成,可以开始进行交互和操作。
首次输入延迟
FID(First Input Delay)
测量从用户第一次与页面交互,直到浏览器对交互作出响应,并实际能够开始处理事件处理程序所经过的时间。
FID测量页面加载期间响应度,它针对的交互是不连续操作对应的输入事件,如点击、轻触和按键。其他诸如滚动和缩放之类的交互属于连续操作并不包含在她的测量内。

2、指标衡量标准

lighthouse衡量标准
模式名称绿色快
首次内容绘制 FCP(First Contentful Paint)0–1.8(s)1.8–3> 3
最大的内容绘制 FCP(Largest Contentful Paint)0–2.5(s)2.5-4> 4
可交互时间 TTI(Time to Interactive)0–3.8(s)3.9–7.3> 7.3
总阻塞时间 TBT(Total Blocking Time)0–200(ms)200-600> 600
累积布局偏移 CLS(Cumulative Layout Shift)0–0.1(比例)0.1-0.25> 0.25
速度指标 SI(Speed Index)0-3.4(s)3.4-5.8> 5.8
首次CPU闲置 FCI(First CPU Idle)0–4.7(s)4.8-6.5> 6.5
首次有效绘制 FMP First Meaningful Paint0–2(s)2-4> 4
最大潜在首次输入延迟 MPFID Max Potential First Input Delay0–130(ms)130-250> 250
最大内容绘制 LCP (Largest Contenttful Paint)0–2.5(s)2.5-4>4

3、改进建议

Opportunity的建议可以帮助更快地加载页面,但它们不会直接影响性能得分。

        常见的可改进项有如下:

  • Use HTTP/2 ,HTTP/2 提供了许多优于 HTTP/1.1 的优点,包括二进制标头和多路复用。即现在用的是 HTTP/1.1,建议使用 HTTP/2。需要服务端配合改,目前不支持。
  • Minifying JavaScript ,精简js代码。
  • Reduce unused JavaScript ,减少未使用的 JavaScript 并推迟加载脚本,直到需要时才加载,以减少网络活动消耗的字节数(LCP)。即:删除无用的 JS,主要方法就是合理的代码分割和按需引入。
  • Enable text compression,基于文本的资源应该使用压缩(gzip等),以最小化网络总字节数(FCP,LCP)。即:配置 gzip压缩。
  • Eliminate render-blocking resources,列出了阻止页面首次绘制的所有 URL(FCP,LCP),通过内联关键资源、推迟非关键资源和删除任何未使用的内容来减少这些阻止渲染的 URL 的影响。即:合理加载资源,控制加载顺序。

        如何识别关键资源:使用 Chrome DevTools 中的 Coverage 选项卡来识别非关键 CSS 和 JS。当加载或运行页面时,该选项卡可以分析使用了多少代码,以及加载了多少代码,绿色(关键),红色(非关键 )

        如何消除渲染阻塞脚本:合理使用 async 或 defer 属性标记

        如何消除阻塞渲染的样式表:可使用 preload 链接异步加载其余样式,可查看推迟非关键 CSS

4、Diagnostics(诊断)

5、PASSED AUDITS( 审核通过)

        列举了在性能优化方面做的比较好的地方,常见项及说明如下(其实做性能优化的时候就可以参照这些方面):

  • Properly size images:适当大小的图像,避免字节浪费而减慢页面加载时间
  • Defer offscreen images:屏幕外图像延迟加载
  • Minify CSS:缩小 CSS 文件,减少网络负载大小
  • Minify JavaScript:缩小 JS 文件,减少有效负载大小和脚本解析时间
  • Reduce unused CSS:删除未使用的 CSS
  • Efficiently encode images:有效地图片编码和优化
  • Serve images in next-gen formats:以下一代格式提供图像
  • Enable text compression:启用文本压缩
  • Preconnect to required origins:预连接到所需的源
  • Initial server response time was short:初始服务器响应时间很短
  • Avoid multiple page redirects:避免多个页面重定向
  • Preload key requests:预加载关键请求
  • Use video formats for animated content:用视频替换动画 GIF
  • Remove duplicate modules in JavaScript bundles:删除 JavaScript 包中的重复模块
  • Avoid serving legacy JavaScript to modern browsers:避免向现代浏览器提供旧版 JavaScript
  • Preload Largest Contentful Paint image:预加载最大的内容绘制
  • Avoids enormous network payloads:避免巨大的网络负载
  • Uses efficient cache policy on static assets:对静态资产使用高效的缓存策略
  • Avoids an excessive DOM size:避免过大的 DOM 元素
  • User Timing marks and measures:用户计时标记和度量
  • JavaScript execution time:JavaScript 执行时间
  • Minimizes main-thread work:最小化主线程工作
  • All text remains visible during webfont loads:在 webfont 加载期间所有文本保持可见
  • Minimize third-party usage:尽量减少第三方使用
  • Lazy load third-party resources with facades:延迟加载第三方资源
  • Uses passive listeners to improve scrolling performance:使用被动侦听器来提高滚动性能
  • Avoids document.write():避免使用 document.write()
  • Image elements have explicit width and height:图像元素应具有明确的宽度和高度

6、可访问性(Accessibility)

Accessibility 辅助功能 : 主要针对无障碍设计,也称为网站可达性,是指所创建的网站对所有用户都可用/可访问,不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。

参考文章:Lighthouse(灯塔)—— Chrome浏览器强大的性能测试工具_chrome lighthouse-CSDN博客

Google dev开发指南: web.dev/

如何看vue首页的加载速度 • Worktile社区

network其他模块介绍参考: Chrome DevTools谷歌浏览器开发者工具评估资源加载时间

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/484978.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】入门【六】

本节目标 一、继承的概念及定义 二、基类和派生类对象赋值转换 三、继承中的作用域 四、派生类的默认成员函数 五、继承与友元 六、继承与静态成员 七、复杂的菱形继承及菱形虚拟继承 八、继承的总结和反思 九、笔试面试题 一、继承的概念及定义 1.继承的概念 继承是面向对象…

MacOS安装sshfs挂载远程电脑硬盘到本地

文章目录 sshfs简介sshfs安装下载安装macFUSE安装sshfs sshfs使用注意事项 sshfs简介 SSHFS&#xff08;SSH Filesystem&#xff09;是一种基于FUSE&#xff08;用户空间文件系统&#xff09;的文件系统&#xff0c;它允许你通过SSH协议挂载远程文件系统。使用SSHFS&#xff0…

亚马逊云(AWS)使用root用户登录

最近在AWS新开了服务器&#xff08;EC2&#xff09;&#xff0c;用于学习&#xff0c;遇到一个问题就是默认是用ec2-user用户登录&#xff0c;也需要密钥对。 既然是学习用的服务器&#xff0c;还是想直接用root登录&#xff0c;下面开始修改&#xff1a; 操作系统是&#xff1…

深度学习中的迁移学习:应用与实践

引言 在深度学习领域&#xff0c;迁移学习&#xff08;Transfer Learning&#xff09;是一个非常强大且日益流行的概念&#xff0c;它通过将从一个任务中学到的知识应用于另一个任务&#xff0c;能够显著加快模型训练速度并提高其泛化能力。迁移学习在许多实际应用中都得到了广…

股市复盘笔记

复盘是股市投资中非常重要的一个环节&#xff0c;它指的是投资者在股市收盘后&#xff0c;对当天的市场走势、个股表现以及自己的交易行为进行回顾和总结&#xff0c;以便更好地指导未来的投资决策。以下是对复盘的详细解释&#xff1a; 一、复盘的目的 总结市场走势&#xff…

ubuntu18.04+qt 5.12.12+安装和实验

引用 【QT | 开发环境搭建】Linux系统(Ubuntu 18.04) 安装 QT 5.12.12 开发环境 ubuntu18.04 安装qt5.12.8及环境配置 1.安装包链接 第一篇中写了 http://download.qt.io/archive/qt/5.12/5.12.12/qt-opensource-linux-x64-5.12.12.run2.安装 到下载目录下 sudo chmod ax…

【目标跟踪】AntiUAV600数据集详细介绍

AntiUAV600数据集的提出是为了适应真实场景&#xff0c;即无人机可能会随时随地出现和消失。目前提出的Anti-UAV任务都只是将其看做与跟踪其他目标一样的任务&#xff0c;没有结合现实情况考虑。 论文链接&#xff1a;https://arxiv.org/pdf/2306.15767https://arxiv.org/pdf/…

LabVIEW氢同位素单质气体定量分装系统

氢同位素单质气体在多个行业中有重要应用&#xff0c;如能源和化工。传统的分装方法面临精度和自动化程度不足的问题。为此&#xff0c;开发了一套基于LabVIEW和质量流量控制器的定量分装系统&#xff0c;提高分装精度和效率&#xff0c;同时减少资源浪费和环境污染。 项目背景…

使用Oracle通过gateway连接MSSQL

环境概述 某医院的his系统Oracle数据库要和体检系统进行数据通讯&#xff0c;需要从Oracle能查到sqlserver的数据。本次通过Oracle gateway来解决此问题。 HIS服务器&#xff1a;windows server 2016数据库oracle11.2.0.4&#xff0c;假设IP是192.168.100.9 体检服务器&…

跑一下pyapp

文档&#xff1a;How-to - PyApp 首先没有rust要安装 安装 Rust - Rust 程序设计语言 查看是否安装成功 然后clone下pyapp https://github.com/ofek/pyapp/releases/latest/download/source.zip -OutFile pyapp-source.zip 进入目录中&#xff0c;cmd&#xff0c;设置环境…

Vue网页屏保

Vue网页屏保 在vue项目中&#xff0c;如果项目长时间未操作需要弹出屏幕保护程序&#xff0c;以下为网页屏保效果&#xff0c;看板内容为连接的资源。 屏保组件 <template><div v-if"isActive" class"screensaver" click"disableScreens…

项目基于oshi库快速搭建一个cpu监控面板

后端&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.github.oshi</groupId><artifactId>oshi-…

【LLMs】用LM Studio本地部署离线大语言模型

文章目录 一、下载LM Studio二、下载大语言模型1. 查看模型介绍2. 点击模型文件进行下载2.1 完整下载2.2 部分下载 三、加载模型1. 打开LM Studio图形化界面&#xff0c;点击**My Models**2. 然后&#xff0c;点击“...”&#xff0c;选择“change”&#xff0c;选择刚下载好的…

Redis——主从复制原理

Redis的主从复制原理是其高可用性和分布式读取能力的重要基础。以下是Redis主从复制原理的详细解释&#xff1a; 一、主从复制的基本概念 Redis的主从复制是一种数据复制和备份的方式&#xff0c;它允许一个主节点&#xff08;Master&#xff09;将其所有的数据同步到一个或多…

单链表---合并两个链表

将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 struct ListNode {int val;struct ListNode* next; }; w 方法一---不使用哨兵位 我们创建一个新链表用于合并两个升序链表&#xff0c; 将两个链表中最小的结点依次尾插到…

【AI系统】MobileNet 系列

MobileNet 系列 在本文会介绍 MobileNet 系列&#xff0c;重点在于其模型结构的轻量化设计&#xff0c;主要介绍详细的轻量化设计原则&#xff0c;基于这原则&#xff0c;MobileNetV1 是如何设计成一个小型&#xff0c;低延迟&#xff0c;低功耗的参数化模型&#xff0c;可以满…

25.k个一组翻转链表 python

k个一组翻转链表 题目题目描述示例 1&#xff1a;示例 2&#xff1a;提示&#xff1a;题目链接 题解解题思路python实现代码分析提交结果 题目 题目描述 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&…

开源即时通讯与闭源即时通讯该怎么选择,其优势是什么?

在选择即时通讯软件时&#xff0c;应根据企业的经营领域来选择适合自身需求的开源或闭源方案。不同领域对开源和闭源即时通讯的理念存在差异&#xff0c;因此总结两个点简要分析这两种选择&#xff0c;有助于做出更明智的决策。 一、开源与闭源的根本区别在于软件的源代码是否…

etcd分布式存储系统快速入门指南

在分布式系统的复杂世界中&#xff0c;确保有效的数据管理至关重要。分布式可靠的键值存储在维护跨分布式环境的数据一致性和可伸缩性方面起着关键作用。 在这个全面的教程中&#xff0c;我们将深入研究etcd&#xff0c;这是一个开源的分布式键值存储。我们将探索其基本概念、特…

大语言模型微调与 XTuner 微调实战

1 大语言模型微调 1.1 什么是微调 大语言模型微调&#xff08;Fine-tuning of Large Language Models&#xff09;是指在预训练的大型语言模型基础上&#xff0c;使用特定任务的数据进一步训练模型&#xff0c;以使其更好地适应和执行特定任务的过程&#xff0c;用于使LLM&am…