cms网站搭建,建设网站要不要工商执照,wordpress大菜单,建设带数据搜索的网站本文浏览器版本参考如下#xff1a; 一、认识Lighthouse
Lighthouse 是 Google 开发的一款工具#xff0c;用于分析网络应用和网页#xff0c;收集现代性能指标并提供对开发人员最佳实践的意见。
为 Lighthouse 提供一个需要审查的网址#xff0c;它将针对此页面运行一连…本文浏览器版本参考如下 一、认识Lighthouse
Lighthouse 是 Google 开发的一款工具用于分析网络应用和网页收集现代性能指标并提供对开发人员最佳实践的意见。
为 Lighthouse 提供一个需要审查的网址它将针对此页面运行一连串的测试然后生成一个有关页面性能的报告。
1、三种模式
模式名称说明局限性导航模式默认获取性能分数和所有性能指标。评估渐进式 Web 应用功能。在页面加载后立即分析可访问性。无法分析表单提交或单页应用转换。无法分析在页面加载时无法立即提供的内容。时间跨度模式测量某个时间范围内的布局偏移和 JavaScript 执行时间包括交互。发现性能机会以改善长期存在的页面和 SPA 的体验。不提供总体性能分数。无法分析基于时刻的性能指标如最大内容绘制。无法分析页面状态问题如没有无障碍功能类别快照模式分析当前状态的页面。查找 SPA 或复杂表单深处的可访问性问题。评估隐藏在交互后面的菜单和 UI 元素的最佳实践。不提供总体性能分数或指标。无法分析当前 DOM 之外的任何问题如没有网络、主线程或性能分析。
2、设备
分为2种移动设备和桌面设备
3、主要监测指标
主要监测指标说明性能指标Performance性能检测重点。对页面的性能评分如网页的加载速度、响时间等。指标包括首次内容绘制First Contentful Paint、首次有效绘制First Meaningful Paint、首次 CPU 空闲First CPU Idle、可交互时间Time to Interactive、速度指标Speed Index、输入延迟估值Estimated Input Latency。可访问性Accessibility铺助检测。监测页面的可访问性与优化建议如网页的可访问性问题HTML代码标签之类的优化等最佳实践Best Practice实践性检测。如网页安全性如是否开启HTTPS、网页存在的漏洞等搜索引擎优化SEO: Search Engine Optimisation搜索引擎优化检测。如网页title是否符合搜索引擎的优化标准等PWAProgressive Web App验证 PWA 的各个方面的性能情况。
二、使用Lighthouse
在浏览器控制台选择 Mode: Navigation(Default) Device: Desktop Categories: Performance性能、Accessiblility无障碍功能、 Best practices最佳实践、SEO、Progressive Web App渐进式Web应用 然后点击Analyze page load 进行页面性能分析
三、Lighthouse报告分析
Lighthouse生成的分析报告首先会根据自定义勾选的需要测试的指标进行总的打分下图标1处可以把分析报告进行导出结果等操作。 Lighthouse 会对选择进行分析的维度给出一个的评估得分分值范围0-100。
评分主要分为三个档次分别用红黄绿三种颜色代表
0 – 49慢红色
50 – 89平均值 橙色
90 – 100快 绿色如果得分能达到 90 分以上绿色则说明网站应用在该方面的评估表现符合最佳实践。⚠️注 如果没有分数或得分为 0则很有可能是检测过程发生了错误比如网络连接状况异常等。
1、性能指标 Performance最重要 点击 See calculator查看具体打分规则如下
a. 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 ShiftCLS 会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和它是一种保证页面的视觉稳定性从而提升用户体验的指标方案。布局转移的发生是因为浏览器倾向于异步加载页面元素。页面上可能存在最初尺寸未知的媒体元素这种组合意味着浏览器在完成加载之前不知道各个元素会占用多少空间。因此布局会发生剧烈变化。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测量页面加载期间响应度它针对的交互是不连续操作对应的输入事件如点击、轻触和按键。其他诸如滚动和缩放之类的交互属于连续操作并不包含在她的测量内。
b. 指标衡量标准
常用指标
模式名称绿色快中慢首次内容绘制 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
c.改进建议
OPPORTUNITIES机会 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
Diagnostics诊断 常见项如下 Avoid chaining critical requests避免链接关键请求链的长度越大下载量越大对页面加载性能的影响就越大。考虑减少链的长度减少资源的下载大小或推迟不必要资源的下载以提高页面加载。 Keep request counts low and transfer sizes small保持较低的请求数量和较小的传输大小 Largest Contentful Paint element最大的内容 Paint 元素。 Avoid large layout shifts避免大的布局变化。 Avoid long main-thread tasks避免长时间的主线程任务。由于耗时超过 50 毫秒的复杂工作会出现占用大量 CPU 的长任务。长任务会使主线程保持忙碌延迟用户交互。Chrome DevTools 现在可以将长任务可视化从而更容易查看要优化的任务 在 Chrome DevTools 中手动查找超过 50 毫秒的“长黄色块”脚本DevTools 可视化了 Long Tasks。如果任务以灰色显示是长任务则它们会带有红旗 Avoid non-composited animations避免非合成动画。
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图像元素应具有明确的宽度和高度
2、可访问性Accessibility
Accessibility 辅助功能 : 主要针对无障碍设计也称为网站可达性是指所创建的网站对所有用户都可用/可访问不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。 在这块的测试结果中会看到很多需要优化的地方点击对应的建议改进项就可以看到为什么要改以及改动的代码是哪里等说明。
如果网站或系统确实需求做无障碍设计则按照指示修改代码即可。
如
ARIA无障碍
增强辅助技术用户的体验如屏幕阅读器。
Contrast(对比度)
提高内容易读性。
比如Background and foreground colors do not have a sufficient contrast ratio(背景色和前景色没有足够的对比度) 解决UI 设计的样式和颜色就是这样的不好改
Names and labels
改进应用程序中的控件语义增强辅助技术如屏幕阅读器用户的体验。
比如
Image elements do not have [alt] attributes(图像元素没有 [alt] 属性) 解决需要向图像添加替代文本添加alt属性用作占位符这个容易改 Links do not have a discernible name链接没有可辨别的名称 链接主要从其文本内容中获取其可访问的名称内容不具备代表性时可使用aria-label定义
Best practices(最佳实践)
[user-scalableno] is used in the element or the [maximum-scale] attribute is less than 5([user-scalable“no”]禁用网页上的浏览器缩放用于元素或 [maximum-scale]属性小于 5) 分析对于依赖浏览器缩放来查看网页内容的低视力用户来说这两个配置都是有问题的。解决但是实际情况中缩放了页面样式会混乱一般是不能缩放的。
Additional items to manually check(手动检查)
The page has a logical tab order该页面具有逻辑 Tab 键顺序。 测试可以用 tab 键盘浏览页面元素聚焦顺序遵循 DOM 顺序修复tabindex 属性可控制 Interactive controls are keyboard focusable交互式控件可通过键盘聚焦。 测试先通过 Tab 键浏览再使用 TAB或 SHIFT TAB到控制间来回移动并使用箭头键 ENTER 和 SPACE 操纵它们的值修复tabindex 来提高控件的可聚焦性可能还需要向自定义控件元素添加适当的 ARIA 角色 Interactive elements indicate their purpose and state交互元素表明它们的目的和状态。 测试tab 键测试:focus 可设置焦点指示器的样式 The users focus is directed to new content added to the page用户的焦点被定向到添加到页面的新内容。User focus is not accidentally trapped in a region用户焦点不会意外陷入某个区域。 测试使用键盘在所有页面元素之间导航。用于 TAB“向前”SHIFT TAB 导航和“向后”导航。修复提供一种键盘可访问的方法来转义模态创建可访问 modal模态和键盘陷阱 Custom controls have associated labels自定义控件具有关联的标签是可聚焦的。Custom controls have ARIA roles检查所有自定义控件是否具有 role 赋予其属性和状态的适当且任何必需的 ARIA 属性。Visual order on the page follows DOM order页面上的视觉顺序遵循 DOM 顺序。Offscreen content is hidden from assistive technology屏幕外内容对辅助技术隐藏。HTML5 landmark elements are used to improve navigationHTML5 地标元素用于改进导航如 main、nav、aside 等。
Passed audits(通过审核)
[aria-hiddentrue] is not present on the document body 上不能写 aria-hidden 属性[aria-hiddentrue] elements do not contain focusable descendents[aria-hidden“true”] 元素包含可聚焦的后代[aria-*] attributes have valid values[aria-*] 属性没有有效值[aria-*] attributes are valid and not misspelled[aria-*] 属性无效或拼写错误Buttons have an accessible name按钮没有可访问的名称aria-label 属性标识The page contains a heading, skip link, or landmark region页面不包含标题、跳过链接或地标区域Document has a element文档有元素Heading elements appear in a sequentially-descending order标题元素不是按顺序降序排列的即结构不佳element has a [lang] attribute元素没有lang属性element has a valid value for its [lang] attributelang属性没有有效值Form elements have associated labels表单元素没有关联的标签使用 for 属性引用元素的 idNo element has a [tabindex] value greater than 0某些元素的[tabindex]值大于 0会被认为是反模式
3、Best Practices(最佳实践) Trust and Safety(信任与安全) Ensure CSP is effective against XSS attacks确保 CSP 对 XSS 攻击有效Does not use HTTPS:没有使用 HTTPS有 不安全的请求
General(通用) Missing source maps for large first-party JavaScript缺少 JavaScript 的源映射。一般出现情况是可能开发环境是有的但是生产环境为了减少包大小一般不会配置*
Passed audits(审核通过) Links to cross-origin destinations are safe指向跨源目的地的链接不安全 问题使用target_blank属性链接到另一个站点上的页面时可能会面临性能和安全问题解决添加 relnoopener或 relnoreferrer Avoids requesting the geolocation permission on page load在页面加载时请求地理定位权限 问题代码调用 geolocation.getCurrentPosition()或 geolocation.watchPosition()并且尚未授予地理定位权限则审核失败 Avoids requesting the notification permission on page load请求页面加载通知权限 问题代码调用 notification.requestPermission()并且尚未授予通知权限则审核失败 Avoids front-end JavaScript libraries with known security vulnerabilities具有已知安全漏洞的前端 JavaScript 库 问题入侵者可以通过自动网络爬虫扫描站点查找已知的安全漏洞 Allows users to paste into password fields防止用户获取密码Displays images with correct aspect ratio显示纵横比不正确的图像Serves images with appropriate resolution提供响应式图像Page has the HTML doctype页面缺少 HTML 文档类型从而触发怪异模式Properly defines charset字符集声明缺失或在 HTML 中出现得太晚Avoids unload event listeners要避免遗留的生命周期 API事件或者监听器要注销Avoids Application Cache使用应用程序缓存 使用缓存 API 而不是应用程序缓存通过 Service Worker 使用缓存 API Detected JavaScript libraries列出所有前端使用的 JavaScript 库Avoids deprecated APIs使用已弃用的 APINo browser errors logged to the console没有浏览器错误被记录到控制台No issues in the Issues panel in Chrome DevtoolsChrome Devtools “Issues” 面板中没有未解决的问题
NOT APPLICABLE不适用 4、SEO(搜索引擎优化) Content Best Practices(内容最佳实践) Crawling and Indexing(爬取和索引) Additional items to manually check(需要手动检查的项目) Passed audits(审核通过) Has a tag with width or initial-scale视窗宽度和缩放比例Document has a element标题Document has a meta description元描述Page has successful HTTP status code成功的 HTTP 状态代码Links have descriptive text描述性链接文本Page isn’t blocked from indexing页面没有阻止搜索引擎爬虫编制索引Document has a valid hreflang有效的语言代码Document avoids plugins避免插件如 embed、object、applet
Not applicable(不适用) 5、PWA Installable(安装) Web app manifest or service worker do not meet the installability requirementsWeb 应用清单或 Service Worker 不符合可安装性要求
PWA Optimized(PWA 优化) Is not configured for a custom splash screen自定义启动画面Failures: No manifest was fetched. Does not set a theme color for the address bar为地址栏设置主题颜色 meta nametheme-color content#317EFB/ Manifest doesnt have a maskable icon没有可屏蔽图标No manifest was fetchedDoes not register a service worker that controls page and start_url没有注册 Service WorkerDoes not redirect HTTP traffic to HTTPS使用 HTTPS 进行保护Does not provide a valid apple-touch-icon添加 Apple 触摸图标 link relapple-touch-icon href/example.png
ADDITIONAL ITEMS TO MANUALLY CHECK需要手动检查 四、参考文档
Google dev开发指南 web.dev/
前端性能优化之概念术语介绍 https://juejin.cn/post/7231106434833547325#heading-2
前端性能优化之Lighthouse实战 “点对点”优化 https://juejin.cn/post/7016922364185149477#heading-14
