Google Chrome Lighthouse – A Brief Introduction

Article Updated: 04 Feb 2019

In case you were living under the rock for the past few years, Google’s PageSpeed Insights received a ground-breaking update in the form of an open-source project named Lighthouse. Started as optional extension, Lighthouse is, in fact, now integrated into our favorite Google Chrome Browser‘s DevTools console!

INTRO: Google Lighthouse

What is Google Lighthouse? Another browser perhaps?

Lighthouse (check project’s GitHub page) is a modern, comprehensive and much stricter web app performance auditing tool. Also, it is much harder to achieve a perfect 100 score in comparison to the old PageSpeed algorithm.

Google Chrome Lighthouse Logo

Google Chrome Lighthouse Logo

Lighthouse is grouped into 5 separate sections:

  1. Performance
  2. Progressive Web App
  3. Accessibility
  4. Best Practices
  5. SEO

Each designed to profile key performance indicators of your website / web app and make a real-world assessment with practical hands-on suggestions how to fix and optimize common bottlenecks and problems! It sure removed a lot of mystery from the old PageSpeed, which was sometimes covered with vague issue descriptions, providing no practical solutions.

How do I access Lighthouse in Chrome?

  1. run Google Chrome
  2. open DevTools (hit F12 key)
  3. select Audits tab

If you don’t see Audits tab, hit DRAWER (3 dots) in the top right corner of DevTools window (not Chrome’s window!) and select Audits from the menu.

Google Chrome Lighthouse - DevTools Console

Google Chrome Lighthouse – DevTools Console

How To Achieve 100 Performance Score In Lighthouse?

Unfortunately, that is easier said than done! You must closely follow all the listed recommendations under the Performance section of your asset (website / web app). As every website is different, recommendations / goals will vary. But, the most common ones are listed below.

Google Chrome Lighthouse Web App Performance Comic

Google Chrome Lighthouse Web App Performance Comic

  • Minify HTML / CSS / JavaScript
  • Defer unused JavaScript & CSS portions of your code
  • Use efficient media compression algorithms (WebP, HEIC, AV1 – still under developement)
  • Optimize rendering of above-the-fold content (defer/lazyload huge images and text outside window size)
  • Prefetch domains of external resources
  • If your app is built on certain frameworks like React.js, Vue.js etc. enable server-side rendering
  • Use CDN (Content Delivery Network) whenever possible
  • Optimize loading and rendering of external fonts (do not block initial display of native fonts)
  • Use fast server(s) with high CPU and Network load capacity
  • Use caching

Lighthouse is not perfect. As web performance is not exactly 100% repeatable in nature, there are several properties which hugely influence Lighthouse’s scoring algorithm and you should take received results with some reservations.

Lighthouse performance score is affected by some Chrome extensions. Receiving lower or higher score can partially be because of them. To achieve realistic score, disable all extensions before testing. (how much we miss global disable extensions button in Chrome!)

Lighthouse performance score is affected by overall test system/device performance (CPU power, RAM, GPU acceleration…), unfortunately. Tests on different computers (e.g. less powerful laptop and powerhouse desktop) will achieve different scores!

Lighthouse performance score is affected by network speed, including DNS resolving and other delays, which will also affect the final performance score.

Lighthouse performance score is affected by different Chrome versions! In our latest and most shocking discovery, without touching absolutely anything in our test system (e.g. identical OS version / laptop) or our website, we received a score of 77 for Performance in Chrome 71.0.3578.98 and score of 100 (perfect!) in Chrome 72.0.3626.81 which either indicates significant Chrome speed improvements or Lighthouse performance score calculations and algorithm changes.

Comments


Post A Comment

I have read and consent to Privacy Policy and Terms and Conditions