【每日鲜蘑】前端第一次使用Google LightHouseGoogle Lighthouse 是一种工具，您可以使用它

啥是 Google Lighthouse

Google Lighthouse 是一种工具，您可以使用它对您的网站进行审核。您可以将其用作简单的 Google Chrome 扩展程序或与 Chrome DevTools（这是一个 Web 开发人员工具的集合，直接在 Chrome 中）一起使用。

在 Chrome DevTools 中大致的样子如下

我做了个关于AI绘画分享的网站(目前仅有开发环境)，在上线前比较关心该网站是否符合要求，这时候最简单的方式是使用Google Lighthouse生成审核报告。

报告大致分为了以下几部分

我最关心的一项是性能，大致如图

性能大致如下，显示了从进入网页到加载出来的全部耗时情况。其中主要指标如下

First Contentful Paint 标记了绘制出首个文本或首张图片的时间。详细了解 First Contentful Paint 指标。

Largest Contentful Paint 标记了绘制出最大文本或图片的时间。详细了解 Largest Contentful Paint 指标

当任务用时超过 50 毫秒时计算首次内容绘制 (FCP) 和可交互时间之间的所有时间段的总和，以毫秒表示。详细了解 Total Blocking Time 指标。

Cumulative Layout Shift 旨在衡量可见元素在视口内的移动情况。详细了解 Cumulative Layout Shift 指标。

Speed Index 表明了网页内容的可见填充速度。详细了解 Speed Index 指标。

也可以点击查看树状图

无障碍主要是一些软指标，会给出一些建议，比如关于对比度的情况。

一些最佳实践，会提供一些建议。

此类检查可确保您的网页遵循了基本的搜索引擎优化建议。还有很多其他因素可能会影响您的网页在搜索引擎结果中的排名，但未被 Lighthouse 纳入此处的评估范围，其中包括核心网页指标衡量结果。详细了解 Google Search Essentials。

此类检查会验证渐进式 Web 应用的各个方面。了解如何构建优秀的渐进式 Web 应用。

如果需要做PWA，需要根据清单逐项改造。