CODEWITHSUNDEEP
google-chromelighthouse
Luca
Luca

Reputation: 63

Changing final screenshot resolution for (Chrome) Lighthouse report

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:

Can I get anything larger than that?

Upvotes: 4

Views: 2486

Answers (2)

Jacek Rosłan
Jacek Rosłan

Reputation: 333

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.

Upvotes: 0

Menelaos
Menelaos

Reputation: 26279

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:

Upvotes: 4

Related Questions