Post by account_disabled on Jan 8, 2024 0:30:03 GMT -5
灯塔用户流量报告 然而，最近很难生成其他各个方面的灯塔报告，例如： 使用热缓存加载页面 具有激活的 Service Worker 的页面 考虑潜在的用户交互 大多数核心 Web Vitals 指标都是基于页面加载或根据页面加载进行测量的。但是，诸如累积布局偏移 (CLS)之类的指标是在用户会话的整个范围内进行测量的。 然而，Lighthouse 无法测量上述因素，这意味着它丢失了重要信息。 LIGHTHOUSE用户流程介绍 为了解决这个问题，Google 发 WhatsApp 号码数据 布了新的Lighthouse 用户流程 API，它允许我们在用户会话的整个过程中随时进行实验室测试。 在 puppeteer 的帮助下，我们可以使用 puppeteer 脚本来模仿任何用户操作。在这些不同的交互过程中，可以随时调用 Lighthouse 以实时捕获多个关键见解。
这意味着在 API 的帮助下，我们不仅可以在页面加载期间进行性能检查，还可以在用户交互的任何时刻进行性能检查。可访问性检查不仅可以在初始帧中完成，还可以在用户会话的整个范围内完成。 在执行几乎任何 puppeteer 脚本时可以随时调用 Lighthouse，以检查关键指标和最佳实践。 下面我们将向您展示在暖导航和冷导航上执行 Lighthouse 审核的分步指南。 设置 我们将使用 Node.js 为冷导航和暖导航生成 LightHouse 报告 请按照以下步骤操作。 下载适用于 Windows 的Node.js > nodejs.org/en/download/ 安装它。 下载 Visual Studio Code 并安装。 创建一个名为“Lighthouse Web”的文件夹。 在 Visual Studio 中打开同一文件夹，在屏幕截图中我的文件夹名称是“Lighthouse 2” 打开一个新终端，然后输入命令 npm init，> 按 Enter 直到 package.json 显示在左侧面板中。 单击 package.json > 在描述下方输入以下行。 “类型”：“模块”， 将“main”文件名更改为“index.mjs” 在“Lighthouse Web”文件夹下创建一个名为“index.mjs”的文件。 转到此 URL > web.dev/lighthouse-user-flows/ 在终端窗口中输入以下行： npm 初始化 -y npm 安装 lighthouse puppeteer 打开 npm 安装铬 等待安装完成 对冷航运行灯塔审核 单击index.mjs 文件并输入以下代码行。 从 'fs' 导入 fs； 从“打开”导入打开； 从 'puppeteer' 导入 puppeteer； 从
”中的 URL 至 thatware.co/ 运行并调试 > 选择 Chrome 单击返回 index.mjs 选项卡并转到终端窗口。 输入以下行来运行代码：node index.mjs 该脚本打开一个简单的传统灯塔报告，通过默认删除用户缓存来报告重要的性能指标和最佳实践。 将生成以下报告 > 下载它。 与 Lighthouse 的典型情况一样，此页面加载时首先清除所有缓存或本地存储，但访问站点的真实用户将混合访问冷缓存和热缓存，并且冷加载之间可能存在很大的性能差异，例如这以及用户返回到带有仍热缓存的页面。 对 WARM NAVIGATION 进行 LIGHTHOUSE 审核 在此模式下，Lighthouse 会默认禁用缓存清除。通过这种方式，它可以模仿用户加载带有热缓存的页面。这种类型的导航称为温暖导航。 转到 Lighthouse Web 文件夹并删除.vscode文件夹 清除index.mjs文件中的代码，并输入以下代码行： 从 'fs' 导入 fs； 从“打开”导入打开； 从 'puppeteer' 导入 puppeteer； 从 'lighthouse/lighthouse-core/fraggle-rock/api.js' 导入 {startFlow}； 异步函数 captureReport() { const browser = wait puppeteer.launch({headless: false}); const page = 等待 browser.newPage(); const testUrl = 'https://thatware.co/'; const flow = wait startFlow(page, {name: '冷暖导航'}); 等待 flow.navigate(testUrl, { stepName: '冷导航' }); 等待 flow.navigate(testUrl, { stepName: '温馨导航', 配置上下文：{ 设置覆盖：{disableStorageReset：true}， }, }); 等待浏览器.close(); const 报告 = 等待 flow.generateReport(); fs.writeFileSync('flow.report.html', 报告); open('flow.report.html', {wait: false}); } 捕获报告（）； 运行并调试 > 选择 Chrome 通过在终端窗口中输入node index.mjs来运行新代码。
这意味着在 API 的帮助下，我们不仅可以在页面加载期间进行性能检查，还可以在用户交互的任何时刻进行性能检查。可访问性检查不仅可以在初始帧中完成，还可以在用户会话的整个范围内完成。 在执行几乎任何 puppeteer 脚本时可以随时调用 Lighthouse，以检查关键指标和最佳实践。 下面我们将向您展示在暖导航和冷导航上执行 Lighthouse 审核的分步指南。 设置 我们将使用 Node.js 为冷导航和暖导航生成 LightHouse 报告 请按照以下步骤操作。 下载适用于 Windows 的Node.js > nodejs.org/en/download/ 安装它。 下载 Visual Studio Code 并安装。 创建一个名为“Lighthouse Web”的文件夹。 在 Visual Studio 中打开同一文件夹，在屏幕截图中我的文件夹名称是“Lighthouse 2” 打开一个新终端，然后输入命令 npm init，> 按 Enter 直到 package.json 显示在左侧面板中。 单击 package.json > 在描述下方输入以下行。 “类型”：“模块”， 将“main”文件名更改为“index.mjs” 在“Lighthouse Web”文件夹下创建一个名为“index.mjs”的文件。 转到此 URL > web.dev/lighthouse-user-flows/ 在终端窗口中输入以下行： npm 初始化 -y npm 安装 lighthouse puppeteer 打开 npm 安装铬 等待安装完成 对冷航运行灯塔审核 单击index.mjs 文件并输入以下代码行。 从 'fs' 导入 fs； 从“打开”导入打开； 从 'puppeteer' 导入 puppeteer； 从
”中的 URL 至 thatware.co/ 运行并调试 > 选择 Chrome 单击返回 index.mjs 选项卡并转到终端窗口。 输入以下行来运行代码：node index.mjs 该脚本打开一个简单的传统灯塔报告，通过默认删除用户缓存来报告重要的性能指标和最佳实践。 将生成以下报告 > 下载它。 与 Lighthouse 的典型情况一样，此页面加载时首先清除所有缓存或本地存储，但访问站点的真实用户将混合访问冷缓存和热缓存，并且冷加载之间可能存在很大的性能差异，例如这以及用户返回到带有仍热缓存的页面。 对 WARM NAVIGATION 进行 LIGHTHOUSE 审核 在此模式下，Lighthouse 会默认禁用缓存清除。通过这种方式，它可以模仿用户加载带有热缓存的页面。这种类型的导航称为温暖导航。 转到 Lighthouse Web 文件夹并删除.vscode文件夹 清除index.mjs文件中的代码，并输入以下代码行： 从 'fs' 导入 fs； 从“打开”导入打开； 从 'puppeteer' 导入 puppeteer； 从 'lighthouse/lighthouse-core/fraggle-rock/api.js' 导入 {startFlow}； 异步函数 captureReport() { const browser = wait puppeteer.launch({headless: false}); const page = 等待 browser.newPage(); const testUrl = 'https://thatware.co/'; const flow = wait startFlow(page, {name: '冷暖导航'}); 等待 flow.navigate(testUrl, { stepName: '冷导航' }); 等待 flow.navigate(testUrl, { stepName: '温馨导航', 配置上下文：{ 设置覆盖：{disableStorageReset：true}， }, }); 等待浏览器.close(); const 报告 = 等待 flow.generateReport(); fs.writeFileSync('flow.report.html', 报告); open('flow.report.html', {wait: false}); } 捕获报告（）； 运行并调试 > 选择 Chrome 通过在终端窗口中输入node index.mjs来运行新代码。