Fetch and Render as Googlebot

puppeteer-fetch-and-render.js

// This code allows you to render a page as Googlebot with puppeter (headless Chrome).
// It even renders elements with the lazy-load implemented through IntersectionObserver. 
// Copy and paste it here: https://try-puppeteer.appspot.com/

const browser = await puppeteer.launch();
const page = await browser.newPage();

// Descriptors for other mobile devices: https://github.com/puppeteer/puppeteer/blob/main/src/common/DeviceDescriptors.ts
const mobile = {
   name: 'Nexus 5X',
    userAgent:
      'Mozilla/5.0 (Linux; Android 8.0.0; Nexus 5X Build/OPR4.170623.006) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
    viewport: {
      width: 412,
      height: 732,
      deviceScaleFactor: 2.625,
      isMobile: true,
      hasTouch: true,
      isLandscape: false,
  }
};

// Comment the next line if you want to render with the desktop version
await page.emulate(mobile);

// Modify with the URL you want to render
await page.goto('https://rawgit.com/GoogleChromeLabs/puppeteer-examples/master/html/lazyload.html', {waitUntil: 'load'}); 

await autoScroll(page);
console.log(await page.browser().version());
console.log(await page.content());
await page.screenshot({path: 'screenshot.png', fullPage: true});
await browser.close();

async function autoScroll(page){
    await page.evaluate(async () => {
        await new Promise((resolve, reject) => {
            var totalHeight = 0;
            var distance = 100;
            var timer = setInterval(() => {
                var scrollHeight = document.body.scrollHeight;
                window.scrollBy(0, distance);
                totalHeight += distance;

                if(totalHeight >= scrollHeight){
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        });
    });
}

Colab version: https://colab.research.google.com/drive/1L_XCfYmynjYSvoPTrVypmEeTt9nJ0deB?usp=sharing