问题标签 [lighthouse]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
google-chrome-devtools - jekyll + service worker failure : service worker 没有成功服务于 manifest 的 start_url
无法为 jekyll 供电的项目站点设置服务人员，灯塔拒绝start_url价值并给出错误Unable to fetch start URL via service worker
app->manifest输出显示 root/
也尝试./index.html过 - 结果相同。有没有办法通过审核？
清单.json：
google-chrome - Chrome Canary 上的 Lighthouse 错误地给出了错误“视口的内容大小不正确”
灯塔审计工具给出以下错误：视口的内容大小不正确
即使这从未出现在普通的 Chrome 上
版本 69.0.3497.100（官方版本）（64 位）中的相同问题...
prefetch - Google Lighthouse 无法识别预连接和 dns-prefetch
Google Lighthouse 的性能报告提出了以下建议：
“避免到任何来源的多次、昂贵的往返旅行”......然后继续列出 8 个来源。
因此，我将以下代码添加到<head>我网站部分的顶部，其中 href 对应于每个来源。
我还尝试了它们<link rel='dns-prefetch' />以及它们和其他浏览器提示的某种组合。
但是，在一段时间后再次运行 Lighthouse 报告后，它没有任何变化。有人可以引导我朝着正确的方向前进，这样我就可以在 Lighthouse 中解决这个问题，并离完美报告更近一步吗？！
编辑：我猜想为什么这样做可能不会对 Lighthouse 报告产生影响，而且是在预连接完成之前在文档中调用了资源。因此，即使从技术上讲它启动得更快并节省了一些毫秒，但文档的其余部分非常小，它甚至在预取或预连接完成之前就请求了这些资源。听起来合乎逻辑？
google-pagespeed - 谷歌页面速度洞察和阻止 CSS 资源的灯塔行为
我有一个 NextJs 应用程序，托管在 Zeit Now 上，我已经对其进行了优化，因此它可以在 Google Page Speed Insight 中运行，得分为 100/100。
为了通过“消除首屏内容中阻止渲染的 JavaScript 和 CSS”测试，我必须为着陆页生成一个关键的 CSS，将其内联到 中的标签<style/>中<head/>，并将所有内容移到<link rel="stylesheet"/>身体标签。
现在，当我使用 Google Lighthouse 进行审核时，有时会收到“减少渲染阻止样式表”警告，有时不会。
当警告出现时，我会在 2 秒左右得到第一个有意义的绘画，当它不存在时，我会在 400 毫秒左右得到它。
所以我的问题是，我应该相信哪一个？
angular - 多个选项卡由同一个服务人员控制
所以我在 Stackblitz 编辑器中打开了我的 PWA。之后，我复制了应用程序的 URL 并在新窗口中打开它。然后我使用 lighthouse Chrome 扩展来测试 PWA，但我得到一个错误“多个选项卡正在由同一个服务人员控制”我该如何克服这个错误？我尝试在编辑器本身中进行测试，但这不起作用，因为它正在测试编辑器而不是我的应用程序。
javascript - 预加载 Google 字体
Light House 审核建议我预加载关键请求，特别是我在 React 应用程序中使用的两种谷歌字体。灯塔成员建议使用：
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
我知道它正在发出请求，因为我在瀑布中看到它并收到此控制台警告：
“资源https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用。请确保它具有适当的 as值，并且是有意预加载的。”
不幸的是，这两种字体不再显示在我的应用程序中。我需要用@font-face 或类似的东西在我的CSS 中定义这些吗？
manifest - Next.js PWA (Service Worker + Manifest.json)
我正在使用 Next.js 开发一个服务器端渲染网站，我想让它成为一个渐进式 Web 应用程序，但问题是我找不到让它正确发生的方法。
当我构建应用程序时，它正确地为服务工作者提供服务，但没有 manifest.json 并且在某些项目示例中它为 manifest.json 提供服务，但我在 Lighthouse 审计中尝试了它，它说
Service Worker 没有成功地为 manifest 的 start_url 提供服务
我使用的示例之一使用 Service Worker Precache 创建下一个应用程序
我认为问题在于 start_url 是 . 或 / 不是一个有效的文件，因为在 Next.js 中没有 index.html 从一开始就提供服务。
总之，我正在寻找一个使用 Next.js 将其构建到 dist 文件夹的示例，并且当我提供它时，它具有有效的 Service Worker 和有效的 Web Manifest。
html - 如何修复灯塔“链接没有可识别的名称”
灯塔建议修复我的 href 文本
我有一个这样的html
这里真正发生的是我只是通过使用 css 类在 href 中显示图像：
我不能这样做<a....>Twitter</a>，因为在这种情况下显示的文本会破坏视图。
我想不出其他任何东西，比如span在我的里面放一个带有文本的内容a并将其隐藏，例如<a....><span class="hide">Twitter</span></a>但想知道是否有任何适当的解决方案？
对此有什么建议吗？
google-chrome - 本地机器上的 Chrome 无头屏幕截图
我有一个用 ember 创建的 localhost 网站，它运行良好。
我想使用 Lighthouse 来获取一些关于一段时间内性能的指标。当然，我希望它在 Chrome 中并且是无头的。我使用 NPM 安装了 Lighthouse 并运行以下命令：
在上面运行时，我收到以下错误，导致一个问号作为性能指标：
我尝试使用 http-server 包运行 ember 的 dist 文件夹，但结果没有差异。发生同样的错误。
当我在我们的测试环境中针对 google.com 或网站运行测试时，我得到的是结果而不是错误。当同事在他的本地机器上运行它时，不会发生错误。我们能发现的唯一区别是他运行的是win8.1，而我的机器是win10。
当我在没有无头标记的情况下运行 Chrome 时，我也会得到一个结果，但我需要它无头工作。
我正在使用 Lighthouse、Chrome、Windows10、node 的所有最新版本。也尝试过 Chromium，但没有区别。
希望有人有想法
angular - 如何增加 Angular 6 中 js 和 css 文件的缓存寿命？
我一直在尝试使用lighthouse report优化我的网页。
其中一项性能诊断表明可以增加我的静态文件的缓存寿命。
报告中指示的文件是main.js、polyfills.js和。据我了解，这些是我网页的主要部分。我正在考虑使用角度服务工作者来增加缓存。但我找不到任何办法这样做。runtime.jsstyles.css
我发现最接近增加缓存时间的是角度服务工作者数据组。数据组支持缓存配置。
但我不知道如何为 AssetGroups 做同样的事情。据我了解，js 和 css 文件属于 AssetGroups。
这是灯塔报告的屏幕截图。
我正在工作的网页是 margvel.com 我在github上有代码。
我也在使用 firebase 进行托管。我有，或者我可以更改firebase上的缓存策略吗？
如何增加这些文件的缓存寿命？