标签: lighthouse

I am running the Google Page Speed test for https://www.oceanluxe.com.au and get the following message:

> Lighthouse returned error: NO_FCP. Something went wrong with the recording
> the trace over your page load. Please run the Lighthouse again. (NO_FCP)
> (NO_FCP)

Can anyone help?

Tried on different servers, tried various URLs as well http://oceanluxe.com.au

我想提高使用Vuetify构建的 Web 应用程序的Google Lighthouse分数。

为了提高性能得分，我一直试图摆脱诊断：

确保文本在 webfont 加载期间保持可见

利用字体显示 CSS 功能确保在加载 webfonts 时文本是用户可见的。了解更多

网址：https ://cdn.jsdelivr.net/npm/@mdi/font@latest/fonts/materialdesignicons-webfont.woff2 ? v = 4.5.95 (cdn.jsdelivr.net)

这个结果也是Roboto通过https://fonts.googleapis.com安装的，当我添加display=swap到链接时它消失了，如下所示：

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link 
  rel="preload" 
  as="style" 
  href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" 
  crossorigin>
<link 
  rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" 
  crossorigin>

但是，显然，添加到MaterialDesignIcons css 文件没有任何区别，例如：display=swap

<link 
  rel="preload"
  as="style"
  href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css?display=swap"
  crossorigin>
<link 
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css?display=swap"
  crossorigin>

这样做，诊断项目不会消失。我应该如何加载materialdesignicons.min.css以便在 webfont 加载期间文本保持可见？

我从Lighthouse得到以下信息：

如何更改Nuxt.js SSR 网站上的缓存 TTL？我找到了一些答案，但没有找到关于 Nuxt.js 的信息...

重要提示：部署在 Google App Engine 中

为什么Google 速度测量工具（例如Lighthouse / PageSpeed Insights）中报告的累积布局移动指标与Search Console中报告的不同？

以下是我用来生成报告的步骤，我的以下问题就是根据该报告得出的：

1. 在 Chrome 浏览器上启动此网址：“https://www.americanexpress.com/us/credit-cards/business/” 打开开发工具并单击“Lighthouse”选项卡。确保设备复选框为“桌面”。然后单击“生成报告”按钮。该报告将如下图所示：灯塔视图。请注意，LCP 值为 2.2 秒（2200 毫秒）
2. 现在单击屏幕下部的“查看原始跟踪”按钮。结果视图将如下图所示：性能视图。请注意，LCP 值约为890 毫秒（约为 2200 毫秒的 1/3）。

所以这是我的问题：为什么灯塔视图上的 LCP 为“ 2200 毫秒”（2.2 秒），而“性能”选项卡上的 LCP（来自同一测试运行）显示为低得多的“ 890 毫秒”？

这就是我问这个问题的原因：我们的开发团队付出了巨大的努力，在某些其他活动之前尽快绘制页面，以提高感知的页面性能。所以我认为性能选项卡上的 LCP 890ms是正确的值。但不幸的是，“官方”报告取自 Lighthouse 选项卡中更高的值“ 2200ms ”。我之所以提到“官方”这个词，是因为“ PageSpeed Insight ”网站使用与Lighthouse报告相同的算法。您认为灯塔报告存在错误还是暂时状态？您认为“性能”选项卡上的实际 LCP 将来最终会被采用吗？

预先感谢您提供的任何帮助。威廉

我正在预加载谷歌字体，如下所示

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;500;800&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;500;800&display=swap">

然而，lighthouse 仍然给了我 151ms 的累积布局偏移，并且我可以看到字体闪烁。为什么预加载不起作用？

还。如果我从显示=交换更改为可选，灯塔会说“带有字体显示的字体：可选未预加载”。这一定意味着它实际上没有预加载

我将 lighthouse ci 设置为在 Github 操作中运行，但我的应用程序是用 Gatsby 制作的，并不打算成为 PWA，当我运行时，lhci autorun它不断要求我包含清单和一堆与 PWA 相关的内容。我想要 lighthouse 检查的唯一方面是可访问性。

这是我实际的 github 操作：

lighthouseci:
   runs-on: ubuntu-latest
   steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v1
     - run: yarn && sudo yarn global add @lhci/cli@0.6.x
     - run: yarn build
     - run: lhci autorun

我正在使用图像滑块（猫头鹰旋转木马 2）并实现了图像，如下所示：

<img loading="lazy" itemprop="image" srcset="
image-320.jpg 320w,
image-480.jpg 480w, 
image-640.jpg 640w" 
sizes="(max-width: 680px) 320px, 480px" 
src="image-640.jpg"
width="480" height="720">

在 Chrome 开发工具中针对移动视图运行 Lighthouse 时，我收到（除其他外）以下“投诉”：

**Properly size images**
Serve images that are appropriately-sized to save cellular data and improve load time.

由此 Lighthouse 引用image-640.jpg

然而，根据我的图像标签中的定义，应该考虑 image-320.jpg 。至于 SRC 属性，我想保留 image-640.jpg 变体。

我的图片标签的结构有问题吗？

预先非常感谢并致以最良好的祝愿，亚历克斯

我开始尝试我的第一个 Next.js 项目。

通过创建新项目后create-next-app，我在网络应用程序“Lighthouse”中运行性能选项卡（结果可以在下面的选项卡中查看）。然而，绩效报告的得分为 79 分；所有其他测试都在90以上。

有人可以向我解释为什么会出现这些结果吗？

该项目是新创建的，并且完全是空的，人们会假设一份绩效报告会为这样的项目返回一个很好的分数，但事实并非如此。如果您有任何见解可以帮助澄清为什么性能测试会返回我上面解释的结果，我们将不胜感激。谢谢你！

我正在尝试提高使用第三方 JS 的网站的性能（他们都这样做:)）。

运行灯塔分析后，报告显示：

减少第三方代码的影响第三方代码阻塞主线程

由于每个 JS 通过下载、解析和执行脚本来阻塞关键路径，因此我将所有非关键 JS 推到页面底部并添加了defer属性

尽管如此，我仍然认为特定的 JS 资源阻塞了主线程。

推迟资源应该并行下载它，并在渲染完成后执行它，所以我真的不明白为什么 Lighthouse 一直在主线程阻塞资源列表中显示它。当然，它会在主线程上解析和执行，但它不会阻塞关键路径，也不会对用户体验产生太大影响

例如，在不影响 Lighthouse 性能分数的情况下向网页添加 Tidio 聊天小部件的最佳解决方案是什么？

干杯

编辑

我已经测试过，延迟和异步都会阻止主线程

下面的代码也阻止了它

  window.addEventListener('DOMContentLoaded', (event) => {
    var tidioScript = document.createElement("script");
    tidioScript.src = "//code.tidio.co/xxxx.js";
    document.body.appendChild(tidioScript);
  });

有效的方法是显式延迟将脚本标签注入到 DOM 中：

setTimeout(function() {
    var tidioScript = document.createElement("script");
    tidioScript.src = "//code.tidio.co/#{tidio_id}.js";
    document.body.appendChild(tidioScript);
  }, 3 * 1000);

但这感觉就是错误的：/我认为 defer 应该达到相同的结果：/