Миниатюры Lighthouse имеют очень низкое разрешение - PullRequest
Новая
       33

Миниатюры Lighthouse имеют очень низкое разрешение

0 голосов
/ 08 июня 2019

Я пробовал маяк (нпм) последние несколько недель и все еще вхожу в него.

Одна проблема, с которой я столкнулся, заключается в получении очень низкого разрешения миниатюр, которые снимаются во время загрузки страницы.

Я проверяю эскизы и окончательный снимок экрана.

По какой-то причине миниатюры сделаны в непригодном для использования разрешении, и я не знаю, что я делаю неправильно. Окончательный скриншот выглядит хорошо, хотя. (скриншоты внизу)

Я использую маяк в сочетании с кукловодом, и он работает в облаке.

Параметры запуска 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
);

МаякКонфиг: 

{
  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"
    ]
  }
};

На данный момент я обнаружил, что разрешение снимков экрана напрямую связано с размером области просмотра, поскольку область просмотра определяет пиксели как для ширины, так и для высоты.

Но, как показывает документ кукловода, установка defaultViewport: null приводит к установке максимально возможного окна просмотра.

Вот два примера, оба с одного маяка:

уменьшенное изображение

окончательный снимок экрана

Я вмешиваюсь в область просмотра, устанавливая disableDeviceEmulation или emulatedFormFactor?

Спасибо за любую помощь.

...