How we improved the Lighthouse score of our landing page to 96.

Page Performance with Google Lighthouse

  1. Some key requests are blocking the page rendering for at least 550 ms.
  2. The network payload is pretty big, with more than 2.5 Mb of mostly images, CSS, and JS.
  3. We are delivering images as PNGs and might benefit from using a next-gen format.

Preload fonts & allow for swapping swap

Image compression with IMGBot

Image to WebP and the picture tag

brew install webp
for i in *.png; do cwebp -q 90 $i -o "${i%.*}.webp"; done

Lazy loading of images

<img loading="lazy" class="rounded" src="/alternative/home-dashboard@2x.png" alt="Alternative to Pingdom" />

Optimize CSS with purge and minify

Lazyload Intercom

Other optimizations

Result:

  1. https://web.dev/browser-level-image-lazy-loading/
  2. https://www.npmjs.com/package/gulp-purgecss

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store