Lighthouse – The Missing Manual

Lighthouse is the best website performance tool, but it needs a bit of experience to use it effectively. This article is the missing manual for people in a hurry.

Two Towers

Google has different performance tools Lighthouse and Core Web Vitals, neatly combined in a tool called PageSpeed Insights. Knowing which one you need is essential – because only one matters for SEO; the others are to help.

Lighthouse is a tool that you can run yourself in Chrome or online. It immediately gives you results and reasons to optimize your page. But it's important to know that:

• The results vary with each run (for the same site) because it's dependent on the network, memory, and current computer or server speed. So if your computer does something entirely else during the run (like check or download a MacOS update in the background), it will influence the score quite a bit.

• Google does not look at these results to rank pages. They're just meant for you to debug your pages – so that when Google looks at them (keep reading), they'll be as fast as possible.

• When you run a Lighthouse test yourself in Chrome, always use Incognito Mode. The main reason is that browser extensions will be disabled. They significantly impact your score but aren't part of your site.

Core Web Vitals is data Google collects from every Chrome browser whenever you visit any website. Yes, you read that right: every time you visit a website, Chrome measures how quickly the site loads – and sends the results back to Google. This gives them a lot of data about how fast your site is for real users, which they use to rank your site. This has a significant impact on your SEO.

• Core Web Vitals are a mini version of Lighthouse. It only runs a smaller set of metrics and may calculate them differently.

• Lighthouse runs tests on old devices compared to your actual users. Lighthouse's default mobile test device is a 2016 Motorola phone, which is rare today and may not be very important to optimize for.

The best place to see Core Web Vitals is your Search Console. It shows you the data for the last 28 days. That also means picking up changes if you improve your site can take a while because the improvements are averaged over these 28 days. You can even access the raw data by recording users or using the public CruX database and building your reporting. Tools like Debugbear use this data.

And PageSpeed Insights is an online tool that both runs Lighthouse and shows Core Web Vitals at the same time.

The Difference

The most important thing to take away from everything above is that Google only uses the Core Web Vitals they record from real users when they visit your site for ranking and that Lighthouse is a debug tool to improve those.

Content and Audience

Most people assume that Lighthouse results greatly depend on the tool used to build the site because the tool determines how the site is generated. But the biggest determinator is the actual content on the site. As an extreme example, a wrong web builder can still get excellent Lighthouse scores for a text-only website. But even the best web builder can't get a fantastic score for a site that auto-plays multiple HD videos, has tons of animations, and loads all the 3rd party analytics tools in the background. It's all about a good trade-off.

Remember, the default Lighthouse test device is a 2016 Motorola phone. That device can only autoplay a single HD video without destroying your score. It just wasn't made for that. And again, typically, that doesn't matter because you won't see these devices anymore, so that they won't influence your Core Web Vitals and ranking. Making your site more boring for devices that never appear isn't a great trade-off; therefore, you'll see the best sites in the world be okay with so-so mobile Lighthouse scores. Currently, apple.com has a mobile Lighthouse score of 39.

In short, feel free to add some cool things to your site, like videos and animations, and don’t worry too much about a low mobile Lighthouse score. Just don’t overdo it.

Key Figures

The last thing we need to understand is what Lighthouse is measuring. The excellent official explanation gets complicated fast. Apart from maybe being too fond of acronyms, there isn’t a way around that, just like natural science. So let’s oversimplify a bit.

The score is a weighted calculation based on a few tests. Similar to tests like “how fast is your computer or internet speed.” The best way to simplify is to zoom in on the ones that matter the most and that you can influence: LCP, TBT, and CLS.

LCP (Largest Contentful Paint) is “how long does it take until most of the site is visible.” So it loads your site, starts a stopwatch, and stops it when the visible part of your site is ready. That means that everything that’s needed to show your page has to finish: the big image that you have in your header, the custom fonts that you use for your menu, the auto-playing product video, etc.

But it gets a bit trickier. Because Lighthouse stops the stopwatch when things “stop changing on the screen,” it can get some things wrong, like most heuristics. Say you have a charming welcome animation that plays when a page gets loaded; Lighthouse may interpret it as the site still not loading because it’s changing. An actual widespread mistake is that your cookie banner slows down your LCP because it appears after everything is loaded.

You’ll have to test and adapt your design for it. Luckily the Lighthouse tool is pretty good at highlighting the elements that cause delayed LCP. Run the Lighthouse test and look for “Largest Contentful Paint element.” It will highlight the very last visible part of your site.

Total Blocking Time (TBT) is “how much the page lags while loading.” But what exactly does “lagging” mean?

Every script on a page runs some JavaScript. While that JavaScript is running, the page stays frozen. Most JavaScript code is quick, so you don’t notice anything, but if any code takes more than 0.05s-0.1s, the science says you might start seeing lagginess. So, TBT is the total duration of that lagginess.

If it freezes the page for some time, every script increases TBT. That includes Framer and analytics scripts like Google Tag Manager, Facebook Pixel, etc. So if your TBT is high, one thing you can try is removing unnecessary analytics or ad scripts.

Also: know that bad TBT does not affect your search rank ( not included in Core Web Vitals).

Cumulative Layout Shift (CLS) is “how much the page jumps while loading.” If you ever went on a site, started reading it, and saw an ad pop up and move the place you were reading, that’s an example of CLS. Luckily, thanks to the tech of Framer canvas, CLS on Framer sites is almost always zero or close to zero.

Last Things

Before you go, make your site fast— a few more tips.

• Some things may not be measured, but they can make a huge difference. For example, your web server talks HTTP, but there are multiple versions of HTTP. The latest version is http/3 which is much faster than http/1. Modern tools like Framer automatically enable http/3 hosting, but only some tools do.

• If you use external services on your site, from Google Analytics to HubSpot to YouTube embeds, you typically have to insert a line or two of JavaScript on your page. These innocent-seeming lines can do whatever they want to your site. In practice, they can make your site twice as big (and slow). And they often do! So be careful what you add.

Thanks for making it until the end, and enjoy making your site fast!