标签: lighthouse

我正在测试我的Polymer应用程序,我在Lighthouse上获得了不错的分数.但是,我还有一个小问题.我有一个manifest.json包含所有内容的文件,因此应用程序可以添加到主屏幕,但灯塔仍然失败说:Manifest start_url is not cached by a Service Worker..我正在使用Polymer Starter Kit 2.0,我不知道如何使用Service Worker缓存它.我有一个sw-precache-config.js包含:

module.exports = {
  staticFileGlobs: [
    '/index.html',
    '/index.html?launcher=true',
    '/manifest.json',
    '/bower_components/webcomponentsjs/*',
  ],
  navigateFallback: '/index.html',
};

/index.html?launcher=true清单的start_url 在哪里.

我正在使用gulp进行项目,我在这个gulp任务中添加了灯塔:

gulp.task("lighthouse", function(){
    return launchChromeAndRunLighthouse('http://localhost:3800', flags, perfConfig).then(results => {
      console.log(results);
    });
});

这是我的launchChromeAndRunLighthouse()函数

function launchChromeAndRunLighthouse(url, flags = {}, config = null) {
  return chromeLauncher.launch().then(chrome => {
    flags.port = chrome.port;
    return lighthouse(url, flags, config).then(results =>
      chrome.kill().then(() => results));
  });
}

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

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

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

在将 Bootstrap (4.5) 网格用于两列布局并更改列顺序时，我遇到了高 CLS（内容布局移位）的问题。

CLS是一个 Core Web Vital 指标。基本上，当页面加载时网页部分移动时，Google 会发现问题。据说这个指标会影响搜索引擎优化。

在高分辨率下，我的布局由两列组成。右侧的主要内容和左侧的侧边栏。在较低分辨率下，侧边栏内容被推到主要内容下方。所以 HTML 看起来像这样：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8 order-lg-2">
        </div>
        <div class="col-lg-4 order-lg-1">
        </div> 
    </div> 
</div>

问题是，当页面在桌面上呈现时，主要内容出现在左侧的一小段时间内，然后几毫秒后它转移到右侧的正确位置。对于简单的页面（具有简单的 DOM 或没有外部资源），这种转变是无法检测到的。 

我准备了一个这样的页面的例子。（源代码在 github 上）。为了测量 CLS，我在 Chrome 中使用 Lighthouse。在我的情况下，当我刷新页面时，我可以看到列在移动，并且 Lighthouse 通知我 CLS 值为 0.326。结果可能取决于渲染资源，因此您可能会得到不同的结果。但似乎Google Page Insight给出了类似的结果：

无论如何，有没有办法在页面呈现时避免这种转变？ 

使用 google chrome chrome dev，我正在为移动设备运行灯塔分析。

Lighthouse 显示最大内容绘制 (LCP) 的延迟为 7.0 秒：

我决定深入研究并单击：“查看原始跟踪”。

它将我重定向到性能选项卡：

这里说 LCP 是 749.7 毫秒（= 0.7497 秒）。

LightHouse 和 Performance 选项卡之间的这种差异来自哪里？

• 0.7497 秒的性能
• LightHouse 7.0 秒

我需要从一个19,000行CSS文件中提取使用过的CSS,其中98.4%是未使用的(ouch).我知道您可以使用Chrome开发者工具查看CSS Coverage,如下所示:

但它不允许你甚至跳到绿线.手动通过19K线似乎不太可行.

Chrome Lighthouse似乎没有为您提供仅选择开发人员工具所需的规则的选项.

我已经尝试过Firefox的"CSS Usage"附加组件(很多网站都推荐),但它需要FireBug,FireBug本身在当前版本的FireFox中不兼容.

任何人都可以想到一种方法来拉出以某种方式使用的CSS吗？

我已将我的html页面的body css设置为100%并且没有边距或填充,但它仍然没有通过以下Google Lighthouse审核"内容大小正确用于Viewport".

如果window.innerWidth === window.outerWidth,则审计通过

它表示视口大小为422px,而窗口大小为412px,因此这意味着窗口比想要的宽10px.

当我检查身体元素时,它显示为412px宽.

我想通过这次审核,有什么想法导致这个？

我正在尝试使用 Lighthouse DevTools 执行审计。我的网站需要身份验证。当我运行测试时，灯塔将我注销，只分析 /login。

如何使用 Lighthouse DevTools 来分析我的站点？我可以提供登录凭据吗？

在 Chrome 开发人员工具中运行灯塔审核时，我收到了以下关于 JavaScript 执行的报告。我发现与脚本解析（5 毫秒）相比， main.js 在脚本评估 （455 毫秒）中花费了很多时间。但我无法弄清楚这个脚本评估时间是什么？是下载脚本所花费的时间吗？我怎样才能减少它？