A GraphQL web client in ReactJS and Apollo
- Part of the Website Performance Series
- Lighthouse Metrics (in weighted order of importance)
Part of the Website Performance Series
Lighthouse Metrics (in weighted order of importance)
To help web developers in their quest for a speedy site, Google brought us Lighthouse. You will at least need Chrome installed in your machine, and is available in a few workflows that suit you best.
- In Chrome DevTools. Easily audit pages that require authentication, and read your reports in a user-friendly format.
- From the command line. Automate your Lighthouse runs via shell scripts.
- As a Node module. Integrate Lighthouse into your continuous integration systems.
- From a web UI. Run Lighthouse and link to reports without installing a thing.
Lighthouse has 6 important metrics that contribute to the final performance score. Each metric has different weights, as a result, those that have a heavier weight contribute more. The following describes each and their corresponding weights:
Time to Interactive (TTI) (weight 5X)
TTI is the most important metric and is defined as the amount of time it takes for the page to become fully interactive. Interactivity is the point where:
1) the page has started displaying some content,
2) the visible page elements’ event handlers have been registered, and
3) the page can now respond quickly to user actions.
Speed Index (weight 4X)
- Speed Index shows how quickly the contents of a page are visibly populated, for this metric, the lower the number the better.
- Techniques to improve Speed index are similar to ones for TTI, but a couple of good articles: Optimizing Content Efficiency shows how modern web pages contain an increasing amount of data and techniques that can be applied for optimizing content efficiency. Optimizing the Critical Rendering Path will delve into techniques to deliver the first pixels to the screen as early as possible.
Tip #1 - The secret Lighthouse Calculator - Well it’s not really secret, but not many know about it’s existence.
The Lighthouse team created a spreadsheet that can guide you in measuring and planning your speed improvements. The Lighthouse v5 Score Weighting worksheet (image below) is a tool that helps one understand the numbers to be aiming for to achieve a particular Lighthouse performance score.
To achieve a particular performance score, play with the values in the
Potential valuecolumn (in milliseconds), and it will calculate the performance score taking into account the 5 metrics and its corresponding weights.
This is the same calculation that Lighthouse uses, so yeah it will prove handy in your mission to improve your site, and get the performance score you want, without guesswork.
First Contentful Paint (weight 3X)
- First Contentful Paint (FCP) marks the time at which the first text or image is painted. From when a user navigates to a page until such time that something appears on the DOM, this is FCP, and marks a milestone for the user and gives feedback that something is happening and the page is actually loading. The lower the metric the better.
- Techniques to improve FCP are similar to TTI and SI as they try to achieve similar outcomes.
First CPU Idle (weight 2X)
- First CPU idle is defined as the first point at which the page is minimally interactive. Whereas TTI measures the time when the page become fully interactive, Fist CPU Idle measures the time when some items have loaded on the screen and the page now contains interactive elements.
Tip #2 - Webpack Bundle Analyzer - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. This nifty tool works because it presents the output visually, an interactive map of your bundles showing their sizes in relation to each other. So it is quite obvious since large bundles will stick out.
First Meaningful Paint (weight 1X)
- First Meaningful Paint (FMP) is similar to FCP, measures the time the first
meaningfulitem on the screen. The meaning of
meaningfulthough is vague, depends the type of your site. But in simple terms is the primary content of your page.
First Input Delay (weight 0X)
- Whereas FCP and FMP are designed to measure how fast your site can put up pixels on the page, therefore how fast your page loads, First Input Delay is measuring the time when those pixels are ready and responsive to user interaction.
- The lower the value of this Input Latency, the faster your site feels to the user.
Tip #3 - Bundle Phobia - Bundle Phobia is a web application that calculates the size of an NPM package including its size minified, and gzipped, and estimates it’s download times. This is a tool that every JS developer needs!
In this post, we explored Lighthouse, the open-source utility that Google made available in Chrome.
To get a performant site, make sure you score highly against 6 Lighthouse metrics - Time to Interactive, Speed Index, First Contentful Paint, First CPU Idle, First Meaningful Paint and First Input Delay in order of importance. There were lots of details in this article, perhaps we can focus on a particular metric and examples in the next one.
Bonus Tip - Import Cost VSCode Extension - This VSCode extension will display inline in the editor the size of the imported package. Another tool that will be an asset to the gun JS developer.
From source to cloud using Serverless and Github Actions
How GraphQL promotes thoughtful software development practices
Why you might not need external state management libraries anymore
My thoughts on the AWS Certified Developer - Associate Exam, is it worth the effort?
Running Lighthouse on this blog to identify opportunities for improvement
Use the power of influence to move people even without a title
Real world case studies on effects of improving website performance
Speeding up your site is easy if you know what to focus on. Follow along as I explore the performance optimization maze, and find 3 awesome tips inside (plus...
Tools for identifying performance gaps and formulating your performance budget
Why web performance matters and what that means to your bottom line
How to easily clear your Redis cache remotely from a Windows machine with Powershell
Trials with Docker and Umbraco for building a portable development environment, plus find 4 handy tips inside!
How to create a low cost, highly available CDN solution for your image handling needs in no time at all.
What is the BFF pattern and why you need it.