深圳全网营销型网站,锦州微商网站制做,福建建设工程有限公司网站,360外链打开chrome-》f12/右键查看元素-》NetWrok/网络 ctrlF5 刷新网页#xff0c;可以看到从输入url到页面资源请求并加载网页#xff0c;用于查看资源加载#xff0c;接口请求#xff0c;评估网页、网站性能等#xff0c;如下图#xff1a; request、stransferred、resour… 打开chrome-》f12/右键查看元素-》NetWrok/网络 ctrlF5 刷新网页可以看到从输入url到页面资源请求并加载网页用于查看资源加载接口请求评估网页、网站性能等如下图 request、stransferred、resources 的含义 request代表请求数量点击上面可以单独查看各个request类型下的请求request类型包含xhr and fetch接口请求、Document、css、javaScript、Font、Image、Media、Manifest、web Socket、WebAssembly、other; stransferredtransferred over network:通过网络加载的资源大小。 标识请求的资源的传输可以看到资源大小 resourcesresources 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的含义和区别 DOMContentLoadedDOM树构建完成。 即HTML页面由上向下解析HTML结构到末尾封闭标签。 Load页面加载完毕。 DOM树构建完成后继续加载html/css 中的图片资源等外部资源加载完成后视为页面加载完毕。 DOMContentLoaded 会比 Load 时间小两者时间差大致等于外部资源加载的时间。 Finish 是页面上所有 http 请求发送到响应完成的时间 HTTP1.0/1.1 协议限定单个域名的请求并发量是 6 个即 Finish 是所有请求不只是XHR请求还包括DOCimgjscss等资源的请求在并发量为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指标说明
指标名称说明首次内容绘制FCPFirst Contentful Paint浏览器首次绘制来自 DOM 的内容的时间内容必须是文本、图片包含背景图、非白色的 canvas 或 SVG也包括带有正在加载中的 Web 字体的文本。 这是用户第一次开始看到页面内容但仅仅有内容并不意味着它是有用的内容如 Header、导航栏等。最大的内容绘制LCPLargest Contentful Paint可视区域中最大的内容元素呈现到屏幕上的最长时间用以估算页面的主要内容对用户可见时间。 LCP 考虑的元素包括: 元素 、元素内的svg元素 、元素、通过 url() 函数加载背景图片的元素、包含文本节点或其他内联文本元素子级的块级元素。可交互时间TTI Time to Interactive指的是所有的页面内容都已经成功加载且能够快速地对用户的操作做出反应的时间点。 网页第一次完全达到可交互状态的时间点浏览器已经可以持续性的响应用户的输入。 完全达到可交互状态的时间点是在最后一个长任务Long Task完成的时间并且在随后的 5 秒内网络和主线程是空闲的。总阻塞时间TBT Total Blocking Time表示此次分析过程中遇到的阻塞时间。 度量了 FCP 和 TTI 之间的总时间在该时间范围内主线程被阻塞足够长的时间以防止输入响应。 只要存在长任务该主线程就会被视为“阻塞”该任务在主线程上运行超过 50 毫秒ms。累积布局偏移CLSCumulative Layout Shift CLS 会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和它是一种保证页面的视觉稳定性从而提升用户体验的指标方案。 布局转移的发生是因为浏览器倾向于异步加载页面元素。页面上可能存在最初尺寸未知的媒体元素这种组合意味着浏览器在完成加载之前不知道各个元素会占用多少空间。因此布局会发生剧烈变化。 CLS的有趣之处在于它可以用各种工具进行客观的测量但它也是以用户为中心的因为每个用户的设备都会影响你的网站布局的变化。虽然不能控制这一方面但肯定可以采取预防措施使其影响尽可能小。 速度指标SISpeed Index衡量首屏可见内容绘制在屏幕上的速度。在首次加载页面的过程中尽量展现更多的内容往往能给用户带来更好的体验所以速度指标的值约小越好。
其他指标
指标名称说明首次CPU闲置FCIFirst CPU Idle指在页面加载期间当页面的主要内容已经完成加载并且JavaScript代码已经执行完毕后浏览器第一次空闲的时间点。 在这个时间点之后页面可以响应用户的交互操作比如点击按钮或输入文本。首次绘制FP (First paint) 指浏览器首次将像素渲染到屏幕上的时间点也就是页面的第一个像素点被绘制的时间。 FP的发生时机取决于浏览器的渲染机制和页面的结构。 当浏览器开始加载页面时会解析HTML和CSS构建DOM和CSSOM树然后将它们合并为渲染树。 当浏览器开始将渲染树渲染到屏幕上时FP就发生了在这个时刻用户可以看到页面上的第一个像素点也就是FP。 通常FP表现为白屏。 首次有效绘制FMPFirst Meaningful Paint浏览器在加载网页时第一次将主要内容呈现给用户的时间点。 这个时间点通常是用户感知到页面加载速度的关键点之一用户可以看到页面上的一些内容并开始与页面进行交互。 FMP是通过一个算法来猜测某个时间点的所以可能不准确且在 Lighthouse 6.0中FMP指标已被弃用。文档内容加载完成DCLDOMContentLoaded DCL指的是HTML文档中的DOM树构建完成、CSS文件加载完成并解析、JavaScript文件加载完成并执行的时间点它表示网页的主要内容已经加载完成可以开始进行交互和操作。首次输入延迟FIDFirst Input Delay测量从用户第一次与页面交互直到浏览器对交互作出响应并实际能够开始处理事件处理程序所经过的时间。FID测量页面加载期间响应度它针对的交互是不连续操作对应的输入事件如点击、轻触和按键。其他诸如滚动和缩放之类的交互属于连续操作并不包含在她的测量内。
2、指标衡量标准
lighthouse衡量标准 模式名称绿色快中慢首次内容绘制 FCPFirst Contentful Paint0–1.8s1.8–3 3最大的内容绘制 FCPLargest Contentful Paint0–2.5s2.5-4 4可交互时间 TTITime to Interactive0–3.8s3.9–7.3 7.3总阻塞时间 TBTTotal Blocking Time0–200ms200-600 600累积布局偏移 CLSCumulative Layout Shift0–0.1(比例)0.1-0.25 0.25速度指标 SISpeed Index0-3.4s3.4-5.8 5.8首次CPU闲置 FCIFirst CPU Idle0–4.7s4.8-6.5 6.5首次有效绘制 FMP First Meaningful Paint0–2s2-4 4最大潜在首次输入延迟 MPFID Max Potential First Input Delay0–130ms130-250 250最大内容绘制 LCP Largest Contenttful Paint0–2.5s2.5-44
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等以最小化网络总字节数FCPLCP。即配置 gzip压缩。Eliminate render-blocking resources列出了阻止页面首次绘制的所有 URLFCPLCP通过内联关键资源、推迟非关键资源和删除任何未使用的内容来减少这些阻止渲染的 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删除未使用的 CSSEfficiently 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用视频替换动画 GIFRemove duplicate modules in JavaScript bundles删除 JavaScript 包中的重复模块Avoid serving legacy JavaScript to modern browsers避免向现代浏览器提供旧版 JavaScriptPreload 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 timeJavaScript 执行时间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谷歌浏览器开发者工具评估资源加载时间
