seo Question posted in
Some basic information to get you started with this can be found here.

Changing final screenshot resolution for (Chrome) Lighthouse report – SEO

I am using lighthouse for creating performance reports for a bunch of our own websites. I also need to take a screenshot to see how the website looks on a desktop computer.

It seems like Lighthouse by default takes a screenshot with mobile resolution.

How can I change that?

I am trying to avoid using other libraries like Puppeteer if possible.

Here’s some code that runs lighthouse

import lighthouse from 'lighthouse';
import chromeLauncher from 'chrome-launcher';

const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
const options = {
    logLevel: 'info',
    output: 'json',
    onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
    port: chrome.port
};
const runnerResult  = await lighthouse(url, options);

Lighthouse returns display captures from the audits for:

  • screenshot-thumbnails – 120px x 213px
  • final-screenshot – 280px x 498px

Can I get anything larger than that?

Tags:

2

Answers


  1. 0

    Intro

    You need to make use of the lighthouse CLI options listed in the documentation – for example see the github readme and the node-npm documentation.

    There are many options, but the ones that are the most interesting option is:

    --screenEmulation

    Note: See also --preset option, or use --screenEmulation.disabled
    to disable.

    Otherwise you can set these 4 parameters individually:

    --screenEmulation.mobile
--screenEmulation.width=360 
--screenEmulation.height=640 
--screenEmulation.deviceScaleFactor=2

    Also please have a look at the device emulation / emulatedUserAgents, and specifically play with params like the following:

    lighthouse <url> --chrome-flags="--window-size=1024,768"    
lighthouse <url> --screenEmulation.desktop--screenEmulation.width=1024 --screenEmulation.height=768 --screenEmulation.deviceScaleFactor=2     
lighthouse <url> --screenEmulation.mobile --screenEmulation.width=1024 --screenEmulation.height=768 --screenEmulation.deviceScaleFactor=2

    and

    lighthouse <url> --preset=desktop

    Have a look also at some additional configs located at: https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/config

    Through Nodejs

    In terms of launching through nodejs, I need to find my example that I had, but I did find the example from the documentation of lighthouse. In order to run lighthouse + chrome headless from nodejs use the following:

    const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

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

const flags = {
  chromeFlags: ['--headless']
};

launchChromeAndRunLighthouse('https://github.com', flags).then(results => {
  // Use results!
});

    PS: Will update with more information soon

    Sources:

    Login or Signup to reply.
  2. 0

    Use full-page-screenshot audit

    Worth to mention that in Lighthouse version 7.5 (don’t know how it is in previous versions) full sized screenshot is in audit named full-page-screenshot.

    Take into account that this is a ‘full-page’ screenshot so its whole website from top to bottom (not only visible above-the-fold content).

    Apart from this, @menelaos answer describes everything about manipulating window size and device emulating you would need to get screenshot of any size.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search