Question

过去几周我一直在尝试灯塔（npm），现在仍在尝试。

我遇到的一个问题是页面加载过程中获取的缩略图的分辨率非常低。

我正在审核缩略图以及最终的屏幕截图。

由于某些原因，缩略图以无法使用的分辨率拍摄，我不知道自己做错了什么。最终的屏幕截图看起来不错。（底部的屏幕截图）

我将灯塔与Puppeteer结合使用，并且在云中运行。

Puppeteer启动选项：

{
  args: ["--no-sandbox"],
  headless: true,
  defaultViewport: null
}

执行灯塔：

const results = await lighthouse(
  projectUrl,
  {
    port: new URL(browser.wsEndpoint()).port,
    output: "json",
    disableDeviceEmulation: true,
    emulatedFormFactor: "desktop",
    throttling: {
      requestLatencyMs: 70,
      downloadThroughputKbps: 1200,
      uploadThroughputKbps: 1200,
      cpuSlowdownMultiplier: 2
    };
  },
  lighthouseConfig
);

lighthouseConfig：

{
  extends: "lighthouse:default",
  maxWaitForLoad: 4500000,
  settings: {
    passes: [
      {
        recordTrace: false,
        pauseAfterLoadMs: 50000,
        networkQuietThresholdMs: 50000,
        cpuQuietThresholdMs: 50000
      }
    ],
    onlyAudits: [
      "is-on-https",
      "redirects-http",
      "redirects",
      "diagnostics",
      "network-requests",
      "network-server-latency",
      "uses-http2",
      "http-status-code",
      "viewport",
      "load-fast-enough-for-pwa",
      "content-width",
      "font-size",
      "meta-viewport",
      "uses-responsive-images",
      "tap-targets",
      "first-contentful-paint",
      "first-meaningful-paint",
      "time-to-first-byte",
      "first-cpu-idle",
      "interactive",
      "speed-index",
      "screenshot-thumbnails",
      "final-screenshot",
      "estimated-input-latency",
      "max-potential-fid",
      "bootup-time",
      "uses-rel-preload",
      "uses-rel-preconnect",
      "dom-size",
      "doctype",
      "html-has-lang",
      "html-lang-valid",
      "unminified-css",
      "unminified-javascript",
      "unused-css-rules",
      "uses-webp-images",
      "uses-optimized-images",
      "is-crawlable",
      "robots-txt",
      "hreflang",
      "errors-in-console",
      "font-display",
      "geolocation-on-start",
      "notification-on-start"
    ]
  }
};

到目前为止，我发现屏幕截图的分辨率与视口的大小直接相关，因为视口决定了宽度和高度的像素。

但是，由于操纵up文档的状态，将defaultViewport设置为null会导致设置最大可能的视口。

这里有两个示例，它们都是来自同一灯塔运行的：

thumbnail image

final screenshot

我是通过设置disableDeviceEmulation还是emulatedFormFactor来干扰视口吗？

感谢您的帮助。

灯塔缩略图的分辨率很低

0 个答案: