问题标签 [lighthouse]

我有一个输出页面负载分析测试结果的 Node.JS 文件。我已将结果存储在一个文件results.json中，其中JSON.stringify().

现在我想在浏览器中显示结果，所以我想把 JSON 翻译成 HTML。我想为此使用 mustache，但这些行对我不起作用：

我收到错误“未定义结果”，这样的小胡子无法读取 JSON 文件。我不能用原始 JSON 初始化“myObj”，因为它大约有一百万行（我需要稍后对一大堆页面运行测试，所以我现在不能硬编码）。

我不确定如何将我现在拥有的这个 JSON 文件翻译成 HTML。有没有人有任何想法？我是 Node 和 Mustache 的初学者，非常感谢任何提示。

我是 React 新手，首先使用create-react-app创建一个带有样板代码的新应用程序。该工具运行良好，我可以在本地运行简单的应用程序。

接下来，在继续之前，我想确保它是Progressive Web App (PWA)。从 create-react-app 的最新发行说明来看，create-react- app 默认创建了一个 PWA。

我一直在使用Chrome 的 Lighthouse 扩展来创建一个报告，显示 PWA 的所有方面是否都已实现。但是针对使用 create-react-app 创建的默认应用程序创建的报告并没有检查 PWA 的一些重要方面，这是一个快照：

任何使用 create-react-app 创建 PWA 的指导都将不胜感激。

所以我一直在用 Lighthouse 查看 Chrome 的新审核面板，并慢慢改进我网站的指标。它目前位于 95（性能）、97（可访问性）和 75（最佳实践）。

我开始浏览这些建议，并点击了几个部分的“了解更多”链接。因此，我现在正在阅读 Google Developers 网站。然而，对我的问题特别重要的两篇文章是Render-Blocking Resources和Render-Blocking CSS。

来自Render-Blocking Resources文章，这里是最重要的摘录（CSS 文章作为一个整体基本上更详细地进行了这一点）：

• 对于关键脚本，请考虑将它们内联到您的 HTML 中。对于非关键脚本，请考虑使用asyncordefer属性对其进行标记。请参阅添加与 JavaScript 的交互性以了解更多信息。
• 对于样式表，考虑将样式拆分为不同的文件，按媒体查询组织，然后media为每个样式表链接添加一个属性。加载页面时，浏览器仅阻止第一次绘制以检索与用户设备匹配的样式表。请参阅渲染阻止 CSS以了解更多信息。
• 对于非关键的 HTML 导入，用async属性标记它们。作为一般规则，async应尽可能与 HTML 导入一起使用。

现在，为了让我的网站达到目前的分数，这是目前的情况。（我应该注意，如果可能的话，我确实计划利用它们。这只是网站目前的情况。）

当前的实现

• 该网站 100% 设计为移动优先，并兼容 240 像素到 3840 像素宽度的设备分辨率。我正在使用自适应设计，有几个断点。
• 我正在使用 HTTPS。
• 我正在使用图标精灵。
• 我正在使用非缩小的 CSS 和 JavaScript，分成几个文件，因为站点主题仍在开发中。CSS 文件包含媒体查询。
• <a>元素正在使用target="_blank"并且rel="noopener"不存在。
• <script>元素没有使用async或defer属性。
• 我没有使用 HTTP/2 或服务人员。
• 我通过 cPanel（“优化网站”）启用了 GZIP 压缩，针对所有内容。（如果平均加载时间更快，我准备将其限制为 HTML、PHP、CSS、JavaScript、纯文本和 XML [我计划运行一个基准测试来测试这两种场景，每个场景加载 10 次——我还没有机会对此进行测试]。）

问题

主 CSS 文件相当大（目前为 75 kiB）。除此之外，还有已经缩小的 jQuery 文件 (95 kiB)，以及几个特定于网站某些区域的较小的 CSS 文件。由于我的站点（微处理器信息库）的性质，用户还应该在一次访问中查看多个页面。

为了遵守上面概述的准则，我正在考虑拆分 CSS 文件，使其不仅依赖于当前站点的部分，而且还通过媒体查询，通过使用属性的<link>元素链接到它们，media与 CSS 文件本身中的查询相比。

对于 JavaScript，我正在考虑将所有async脚本组合在一个文件中，并将所有defer脚本组合在另一个文件中。我假设将 jQuery API 代码与其他自写函数分组没有问题？

好的。有我的计划，但在退后一步思考如何实施时，有几个问题引起了我的注意，我希望你们能帮助我做出决定。这种思考过程对我来说是非常新的（部分原因是我以前从未有过这种规模的网站），所以任何输入都会很棒。

问题

1. 由于所有 CSS 文件都已下载，无论它们是否被使用，我不确定是否一个大的主 CSS 文件是最好的方法，或者是否有更多的 HTTP 请求并按媒体类型/查询和部分拆分的网站。无论采用何种方法，CSS 都会被缩小。

   /li>

2. 第一个问题也适用于 JavaScript 文件。我有我的函数的主 JS 文件，以及 jQuery API 文件。但是，由于函数将被async或defer属性分割，这将导致更多的 HTTP 请求，但大小更小。JS 也会被缩小。

   /li>

3. 我的最后一个问题实际上是关于减少网页加载的罪魁祸首——jQuery API 文件和网络字体。由于它们无论如何都会占用 HTTP 请求，您是否建议直接从 jQuery CDN 和 Google 外包，而不是在本地托管文件？我提出这一点是因为我假设 CDN 的服务速度会更快。但是，我会尽可能利用服务人员来减少下载文件的需要。

谢谢你！

感谢您阅读这篇长文。我知道我可能已经介绍了太多细节，但我不想遗漏任何可能很重要的内容。

你好，

尝试使用Lighthouse解决字体真棒图标/元素的可识别名称的审核点我不知道如何回答这个挑战：如何使字体真棒元素具有可识别的名称？

Lighthouse 中的实际结果要求“元素具有可识别的名称”

这是基本代码

此致

J。

Having run a Lighthouse report on my budding PWA, the report tells me that:

User will not be prompted to Install the Web App Failures:
Manifest start_url is not cached by a Service Worker.

But it is! I can SEE it in the cache in the "Application" tab on Chrome's F12 tools

I can confirm that the entry in the manifest.json is correct too as the "App Manifest" area in F12 tools shows this

I have tried changing it to work with just a basic HTML only page and get the same issue in the report. I have also tried changing the URL to just / but no change in the Lighthouse report.

What am I doing wrong?

是否需要将优化应用于 Angular CLI Hello World 或者这是一个有效的“性能”结果？

在将 Lighthouse 应用于我们的实时 Angular 4 项目时，我们将其与 Angular CLI Hello World 进行了比较。

从控制台：

在 Chrome -> F12 -> 审核 -> 运行 Lighthouse。

• 性能为 39/100。
• 第一次有意义的绘制是 15,250 毫秒
• 感知速度指数：15,248（目标：< 1,250）
• 拥有巨大的网络负载：总大小为 2,453 KB（目标：< 1,600 KB）

更新 1

感谢@Moshe，使用：

给出以下结果： - 性能为 96/100。- 第一次有意义的绘画是 2,040 毫秒 - 感知速度指数：2,054（目标：< 1,250）；92/100 级

最终很难为此形成一个单一、简洁的问题。我知道 ng serve 即使使用 ags 也不用于生产用途。但这允许我在发布之前在我的本地主机上进行测试。

我正在为一个项目使用 gulp，并在 gulp 任务中添加了灯塔，如下所示：

这是我的launchChromeAndRunLighthouse()函数

它在命令行中为我提供了 json 输出。我可以在这里发布我的 json并获取报告。

有什么方法可以使用gulp生成 HTML 报告？

如果您认为这个问题对未来的读者有帮助，欢迎您开始赏金。

我的网络应用程序的源代码可以在这里找到：- https://drive.google.com/open?id=0B7Rmd3Rn8_hDNW1zSWRoXzBTclU

请参阅 RegisterServiceWorker.js 中的第 11 行，其中我清楚地注册了一个 ServiceWorker，但 Lighthouse 目前正在报告：-

不注册 Service Worker 并且不会提示用户安装 Web App 失败：Manifest 没有至少 192px 的图标，Site 没有注册 Service Worker，Manifest start_url 没有被 Service Worker 缓存。

为什么没有看到我注册的 Service Worker？

I am using Lighthouse to perform some assessment of an Angular/Node/ionic mobile app. I am achieving 81% - 94% scores. However, I don't know the score is computed. I want to use the score to determine the level of effort to improve the code by the 6% - 19%.

Is it weighted? Is it per audit with a binary pass/fail? How many audit criteria are possible? etc.

有没有人使用 Google Chrome Lighthouse的 Node CLI 版本来自动化网站审核过程？（我对可访问性审计最感兴趣，但我认为这个问题没有那个警告）。

我想知道是否有办法将其设置为抓取整个网站，而不仅仅是页面，如果您使用 Lighthouse 或任何类似的审计应用程序完成了此操作，您能否分享一些提示或示例？

如果您还没有，当我们在我们的组织中发现它时，人们会对此感兴趣吗？