Google Lighthouse has been one of the vital efficient methods to gamify and promote internet web page efficiency amongst builders. Utilizing Lighthouse, we will assess internet pages primarily based on total efficiency, accessibility, search engine marketing, and what Google considers “greatest practices”, all with the clicking of a button.
We would use these assessments to judge out-of-the-box efficiency for front-end frameworks or to have a good time efficiency enhancements gained by some diligent refactoring. And you understand you like sharing screenshots of your good Lighthouse scores on social media. It’s a well-deserved badge of honor worthy of a confetti celebration.
Simply the truth that Lighthouse will get builders like us speaking about efficiency is a win. However, while I don’t wish to be a celebration pooper, the reality is that internet efficiency is much extra nuanced than this. On this article, we’ll look at how Google Lighthouse calculates its efficiency scores, and, utilizing this info, we’ll try and “hack” these scores in our favor, all within the identify of enjoyable and science — as a result of ultimately, Lighthouse is just a superb, however tough information for debugging efficiency. We’ll have some enjoyable with it and see to what extent we will “trick” Lighthouse into handing out higher scores than we could deserve.
However first, let’s discuss knowledge.
Subject Information Is Necessary
Native efficiency testing is an effective way to know in case your web site efficiency is trending in the suitable route, nevertheless it gained’t paint a full image of actuality. The World Vast Net is the Wild West, and collectively, we’ve nearly definitely misplaced monitor of the number of gadget sorts, web connection speeds, display sizes, browsers, and browser variations that persons are utilizing to entry web sites — all of which might have an effect on web page efficiency and consumer expertise.
Subject knowledge — and plenty of it — collected by an utility efficiency monitoring device like Sentry from actual individuals utilizing your web site on their gadgets offers you a much more correct report of your web site efficiency than your lab knowledge collected from a small pattern dimension utilizing a high-spec super-powered dev machine below a set of managed situations. Philip Walton reported in 2021 that “nearly half of all pages that scored 100 on Lighthouse didn’t meet the really useful Core Net Vitals thresholds” primarily based on knowledge from the HTTP Archive.
Net efficiency is greater than a single core internet very important metric or Lighthouse efficiency rating. What we’re speaking about goes manner past the kind of uncooked knowledge we’re working with.
Net Efficiency Is Extra Than Numbers
Velocity is commonly the very first thing that comes up when speaking about internet efficiency — simply how lengthy does a web page take to load? This isn’t the worst factor to measure, however we should keep in mind that pace might be influenced closely by enterprise KPIs and gross sales targets. Google launched a report in 2018 suggesting that the chance of bounces will increase by 32% if the web page load time reaches greater than three seconds, and soars to 123% if the web page load time reaches 10 seconds. So, we should conclude that changing extra gross sales requires lowering bounce charges. And to cut back bounce charges, we should make our pages load quicker.
However what does “load quicker” even imply? Sooner or later, we’re bodily incapable of constructing an internet web page load any quicker. People — and the servers that join them — are unfold across the globe, and fashionable web infrastructure can solely ship so many bytes at a time.
The underside line is that web page load will not be a single second in time. In an article titled “What’s pace?” Google explains {that a} web page load occasion is:
[…] “an expertise that no single metric can absolutely seize. There are a number of moments through the load expertise that may have an effect on whether or not a consumer perceives it as ‘quick’, and in the event you simply focus solely on one, you may miss unhealthy experiences that occur throughout the remainder of the time.”
The important thing phrase right here is expertise. Actual internet efficiency is much less about numbers and pace than it’s about how we expertise web page load and web page usability as customers. And this segues properly right into a dialogue of how Google Lighthouse calculates efficiency scores. (It’s a lot much less about pure pace than you may suppose.)
How Google Lighthouse Efficiency Scores Are Calculated
The Google Lighthouse efficiency rating is calculated utilizing a weighted mixture of scores primarily based on core internet very important metrics (i.e., First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Structure Shift (CLS)) and different speed-related metrics (i.e., Velocity Index (SI) and Complete Blocking Time (TBT)) which might be observable all through the web page load timeline.
That is how the metrics are weighted within the total rating:
| Metric | Weighting (%) |
|---|---|
| Complete Blocking Time | 30 |
| Cumulative Structure Shift | 25 |
| Largest Contentful Paint | 25 |
| First Contentful Paint | 10 |
| Velocity Index | 10 |
The weighting assigned to every rating offers us perception into how Google prioritizes the completely different constructing blocks of a superb consumer expertise:
1. A Net Web page Ought to Reply to Consumer Enter
The very best weighted metric is Complete Blocking Time (TBT), a metric that appears on the whole time after the First Contentful Paint (FCP) to assist point out the place the primary thread could also be blocked lengthy sufficient to forestall speedy responses to consumer enter. The primary thread is taken into account “blocked” any time there’s a JavaScript activity working on the primary thread for greater than 50ms. Minimizing TBT ensures that an online web page responds to bodily consumer enter (e.g., key presses, mouse clicks, and so forth).
2. A Net Web page Ought to Load Helpful Content material With No Sudden Visible Shifts
The following most weighted Lighthouse metrics are Largest Contentful Paint (LCP) and Cumulative Structure Shift (CLS). LCP marks the purpose within the web page load timeline when the web page’s important content material has probably loaded and is due to this fact helpful.
On the level the place the primary content material has probably loaded, you additionally wish to preserve visible stability to make sure that customers can use the web page and aren’t affected by sudden visible shifts (CLS). A superb LCP rating is something lower than 2.5 seconds (which is lots greater than we would have thought, given we are sometimes attempting to make our web sites as quick as attainable).
3. A Net Web page Ought to Load One thing
The First Contentful Paint (FCP) metric marks the primary level within the web page load timeline the place the consumer can see one thing on the display, and the Velocity Index (SI) measures how rapidly content material is visually displayed throughout web page load over time till the web page is “full”.
Your web page is scored primarily based on the pace indices of actual web sites utilizing efficiency knowledge from the HTTP Archive. A superb FCP rating is lower than 1.8 seconds and a superb SI rating is lower than 3.4 seconds. Each of those thresholds are greater than you may anticipate when enthusiastic about pace.
Usability Is Favored Over Uncooked Velocity
Google Lighthouse’s efficiency scoring is, definitely, much less about pace and extra about usability. Your SI and FCP could possibly be tremendous fast, but when your LCP takes too lengthy to color, and if CLS is attributable to massive pictures or exterior content material taking a while to load and shifting issues visually, then your total efficiency rating can be decrease than in case your web page was a bit of slower to render the FCP however didn’t trigger any CLS. In the end, if the web page is unresponsive attributable to JavaScript blocking the primary thread for greater than 50ms, your efficiency rating will undergo greater than if the web page was a bit of sluggish to color the FCP.
To grasp extra about how the weightings of every metric contribute to the ultimate efficiency rating, you may play about with the sliders on the Lighthouse Scoring Calculator, and right here’s a rudimentary desk demonstrating the impact of skewed particular person metric weightings on the general efficiency rating, proving that web page usability and responsiveness is favored over uncooked pace.
| Description | FCP (ms) | SI (ms) | LCP (ms) | TBT (ms) | CLS | Total Rating |
|---|---|---|---|---|---|---|
| Gradual to indicate one thing on display | 6000 | 0 | 0 | 0 | 0 | 90 |
| Gradual to load content material over time | 0 | 5000 | 0 | 0 | 0 | 90 |
| Gradual to load the most important a part of the web page | 0 | 0 | 6000 | 0 | 0 | 76 |
| Visible shifts occurring throughout web page load | 0 | 0 | 0 | 0 | 0.82 | 76 |
| Web page is unresponsive to consumer enter | 0 | 0 | 0 | 2000 | 0 | 70 |
The general Google Lighthouse efficiency rating is calculated by changing every uncooked metric worth right into a rating from 0 to 100 in line with the place it falls on its Lighthouse scoring distribution, which is a log-normal distribution derived from the efficiency metrics of actual web site efficiency knowledge from the HTTP Archive. There are two important takeaways from this mathematically overloaded info:
- Your Lighthouse efficiency rating is plotted in opposition to actual web site efficiency knowledge, not in isolation.
- Provided that the scoring makes use of log-normal distribution, the connection between the person metric values and the general rating is non-linear, which means you can also make substantial enhancements to low-performance scores fairly simply, nevertheless it turns into harder to enhance an already excessive rating.
Learn extra about how metric scores are decided, together with a visualization of the log-normal distribution curve on developer.chrome.com.
Can We “Trick” Google Lighthouse?
I respect Google’s give attention to usability over pure pace within the internet efficiency dialog. It urges builders to suppose much less about aiming for uncooked numbers and extra about the actual experiences we construct. That being mentioned, I’ve puzzled whether or not in the present day in 2024, it’s attainable to idiot Google Lighthouse into believing {that a} unhealthy web page by way of usability and usefulness is definitely an ideal one.
I placed on my lab coat and science goggles to analyze. All assessments have been performed:
- Utilizing the Chromium Lighthouse plugin,
- In an incognito window within the Arc browser,
- Utilizing the “navigation” and “cell” settings (aside from the place described otherwise),
- By me, in a lab (i.e., no discipline knowledge).
That every one being mentioned, I absolutely acknowledge that my managed take a look at setting contradicts my recommendation on the high of this put up, however the experiment is an fascinating experience nonetheless. What I hope you’ll take away from that is that Lighthouse scores are just one piece — and a tiny one at that — of a really massive and sophisticated internet efficiency puzzle. And, with out discipline knowledge, I’m unsure any of this issues anyway.
Tips on how to Hack FCP and LCP Scores
TL;DR: Present the smallest quantity of LCP-qualifying content material on load to spice up the FCP and LCP scores till the Lighthouse take a look at has probably completed.
FCP marks the primary level within the web page load timeline the place the consumer can see something in any respect on the display, whereas LCP marks the purpose within the web page load timeline when the primary web page content material (i.e., the most important textual content or picture ingredient) has probably loaded. A quick LCP helps reassure the consumer that the web page is helpful. “Seemingly” and “helpful” are the essential phrases to remember right here.
What Counts as an LCP Factor
The kinds of parts on an internet web page thought of by Lighthouse for LCP are:
ingredient,parts,- A component with a background picture loaded utilizing the
url()perform, (and never a CSS gradient), and - Block-level parts containing textual content nodes or different inline-level textual content parts.
The next parts are excluded from LCP consideration because of the chance they don’t include helpful content material:
- Parts with zero opacity (invisible to the consumer),
- Parts that cowl the complete viewport (more likely to be background parts), and
- Placeholder pictures or different pictures with low entropy (i.e., low informational content material, similar to a solid-colored picture).
Nonetheless, the notion of a picture or textual content ingredient being helpful is totally subjective on this case and customarily out of the realm of what machine code can reliably decide. For instance, I constructed a web page containing nothing however a ingredient the place, after 10 seconds, JavaScript inserts extra descriptive textual content into the DOM and hides the ingredient.
Lighthouse considers the heading ingredient to be the LCP ingredient on this experiment. At this level, the web page load timeline has completed, however the web page’s important content material has not loaded, regardless that Lighthouse thinks it’s probably to have loaded inside these 10 seconds. Lighthouse nonetheless awards us with an ideal rating of 100 even when the heading is changed by a single punctuation mark, similar to a full cease, which is even much less helpful.
This take a look at means that if you’ll want to load web page content material through client-side JavaScript, we‘ll wish to keep away from displaying a skeleton loader display since that requires loading extra parts on the web page. And since we all know the method will take a while — and that we will offload the community request from the primary thread to an internet employee so it gained’t have an effect on the TBT — we will use some arbitrary “splash display” that incorporates a minimal viable LCP ingredient (for higher FCP scoring). This fashion, we’re giving Lighthouse the impression that the web page is beneficial to customers faster than it really is.
All we have to do is embody a legitimate LCP ingredient that incorporates one thing that counts because the FCP. Whereas I’d by no means advocate loading your important web page content material through client-side JavaScript in 2024 (serve static HTML from a CDN as a substitute or construct as a lot of the web page as you may on a server), I’d undoubtedly not advocate this “hack” for a superb consumer expertise, no matter what the Lighthouse efficiency rating tells you. This strategy additionally gained’t earn you any favors with serps indexing your web site, because the robots are unable to find the primary content material whereas it’s absent from the DOM.
I additionally tried this experiment with quite a lot of random pictures representing the LCP to make the web page even much less helpful. However provided that I used small file sizes — made smaller and transformed into “next-gen” picture codecs utilizing a third-party picture API to assist with web page load pace — it appeared that Lighthouse interpreted the weather as “placeholder pictures” or pictures with “low entropy”. Because of this, these pictures have been disqualified as LCP parts, which is an efficient factor and makes the LCP barely much less hackable.
View the demo web page and use Chromium DevTools in an incognito window to see the outcomes your self.
This hack, nevertheless, most likely gained’t maintain up in lots of different use circumstances. Discord, for instance, makes use of the “splash display” strategy if you hard-refresh the app within the browser, and it receives a tragic 29 efficiency rating.
In comparison with my DOM-injected demo, the LCP ingredient was calculated as some content material behind the splash display slightly than parts contained inside the splash display content material itself, given there have been a number of massive pictures within the focussed textual content channel I examined on. One might argue that Lighthouse scores are much less essential for apps which might be behind authentication anyway: they don’t should be listed by serps.
There are probably many different conditions the place apps serve user-generated content material and also you could be unable to regulate the LCP ingredient solely, significantly relating to pictures.
For instance, in the event you can management the sizes of all the pictures in your internet pages, you may be capable to benefit from an fascinating hack or “optimization” (in very massive quotes) to arbitrarily recreation the system, as was the case of RentPath. In 2021, builders at RentPath managed to enhance their Lighthouse efficiency rating by 17 factors when growing the dimensions of picture thumbnails on an internet web page. They satisfied Lighthouse to calculate the LCP ingredient as one of many bigger thumbnails as a substitute of a Google Map tile on the web page, which takes significantly longer to load through JavaScript.
The underside line is that you could acquire greater Lighthouse efficiency scores in case you are conscious of your LCP ingredient and in command of it, whether or not that’s via a hack like RentPath’s or mine or a real-deal enchancment. That being mentioned, while I’ve described the splash display strategy as a hack on this put up, that doesn’t imply one of these expertise couldn’t provide a purposeful and joyful expertise. Efficiency and consumer expertise are about understanding what’s occurring throughout web page load, and it’s additionally about intent.
Tips on how to Hack CLS Scores
TL;DR: Defer loading content material that causes structure shifts till the Lighthouse take a look at has probably completed to make the take a look at suppose it has sufficient knowledge. CSS transforms don’t negatively impression CLS, besides if used together with new parts added to the DOM.
CLS is measured on a decimal scale; a superb rating is lower than 0.1, and a poor rating is bigger than 0.25. Lighthouse calculates CLS from the most important burst of sudden structure shifts that happen throughout a consumer’s time on the web page primarily based on a mix of the viewport dimension and the motion of unstable parts within the viewport between two rendered frames. Smaller one-off cases of structure shift could also be inconsequential, however a bunch of structure shifts occurring one after the opposite will negatively impression your rating.
If you understand your web page incorporates annoying structure shifts on load, you may defer them till after the web page load occasion has been accomplished, thus fooling Lighthouse into considering there isn’t a CLS. This demo web page I created, for instance, earns a CLS rating of 0.143 regardless that JavaScript instantly begins including new textual content parts to the web page, shifting the unique content material up. By pausing the JavaScript that provides new nodes to the DOM by an arbitrary 5 seconds with a setTimeout(), Lighthouse doesn’t seize the CLS that takes place.
This different demo web page earns a efficiency rating of 100, regardless that it’s arguably much less helpful and useable than the final web page provided that the added parts pop in seemingly at random with none consumer interplay.
While it’s attainable to defer structure shift occasions for a web page load take a look at, this hack undoubtedly gained’t work for discipline knowledge and consumer expertise over time (which is a extra essential point of interest, as we mentioned earlier). If we carry out a “time span” take a look at in Lighthouse on the web page with deferred structure shifts, Lighthouse will accurately report a non-green CLS rating of round 0.186.
If you happen to do wish to deliberately create a chaotic expertise just like the demo, you should use CSS animations and transforms to extra purposefully pop the content material into view on the web page. In Google’s information to CLS, they state that “content material that strikes steadily and naturally from one place to a different can usually assist the consumer higher perceive what’s occurring and information them between state modifications” — once more, highlighting the significance of consumer expertise in context.
On this subsequent demo web page, I’m utilizing CSS remodel to scale() the textual content parts from 0 to 1 and transfer them across the web page. The transforms fail to set off CLS as a result of the textual content nodes are already within the DOM when the web page hundreds. That mentioned, I did observe in my testing that if the textual content nodes are added to the DOM programmatically after the web page hundreds through JavaScript and then animated, Lighthouse will certainly detect CLS and rating issues accordingly.
You Can’t Hack a Velocity Index Rating
The Velocity Index rating is predicated on the visible progress of the web page because it hundreds. The faster your content material hundreds nearer the start of the web page load timeline, the higher.
It’s attainable to do some hack to trick the Velocity Index into considering a web page load timeline is slower than it’s. Conversely, there’s no actual strategy to “faux” loading content material quicker than it does. The one strategy to make your Velocity Index rating higher is to optimize your internet web page for loading as a lot of the web page as attainable, as quickly as attainable. While not solely real looking within the internet panorama of 2024 (primarily as a result of it could put designers out of a job), you can go all-in to decrease your Velocity Index as a lot as attainable by:
- Delivering static HTML internet pages solely (no server-side rendering) straight from a CDN,
- Avoiding pictures on the web page,
- Minimizing or eliminating CSS, and
- Stopping JavaScript or any exterior dependencies from loading.
You Additionally Can’t (Actually) Hack A TBT Rating
TBT measures the full time after the FCP the place the primary thread was blocked by JavaScript duties for lengthy sufficient to forestall responses to consumer enter. A superb TBT rating is something decrease than 200ms.
JavaScript-heavy internet purposes (similar to single-page purposes) that carry out complicated state calculations and DOM manipulation on the consumer on web page load (slightly than on the server earlier than sending rendered HTML) are liable to struggling poor TBT scores. On this case, you can most likely hack your TBT rating by deferring all JavaScript till after the Lighthouse take a look at has completed. That mentioned, you’d want to supply some sort of placeholder content material or loading display to fulfill the FCP and LCP and to tell customers that one thing will occur in some unspecified time in the future. Plus, you’d need to go to additional lengths to hack across the front-end framework you’re utilizing. (You don’t wish to load a placeholder web page that, in some unspecified time in the future within the web page load timeline, hundreds a separate React app after an arbitrary period of time!)
What’s fascinating is that whereas we’re nonetheless doing all kinds of fancy issues with JavaScript within the consumer, advances within the fashionable internet ecosystem are serving to us all scale back the chance of a less-than-stellar TBT rating. Many front-end frameworks, in partnership with fashionable internet hosting suppliers, are able to rendering pages and processing complicated logic on demand with none client-side JavaScript. Whereas eliminating JavaScript on the consumer will not be the purpose, we definitely have a number of choices to make use of lots much less of it, thus minimizing the danger of doing an excessive amount of computation on the primary thread on web page load.
Backside Line: Lighthouse Is Nonetheless Simply A Tough Information
Google Lighthouse can’t detect all the pieces that’s flawed with a specific web site. While Lighthouse efficiency scores prioritize web page usability by way of responding to consumer enter, it nonetheless can’t detect each horrible usability or accessibility problem in 2024.
In 2019, Manuel Matuzović printed an experiment the place he deliberately created a horrible web page that Lighthouse thought was fairly nice. I hypothesized that 5 years later, Lighthouse may do higher; nevertheless it doesn’t.
On this ultimate demo web page I put collectively, enter occasions are disabled by CSS and JavaScript, making the web page technically unresponsive to consumer enter. After 5 seconds, JavaScript flips a swap and lets you click on the button. The web page nonetheless scores 100 for each efficiency and accessibility.
You actually can’t depend on Lighthouse as an alternative to usability testing and customary sense.
Some Extra Foolish Hacks
As with all the pieces in life, there’s all the time a strategy to recreation the system. Listed here are some extra tried and examined assured hacks to verify your Lighthouse efficiency rating artificially knocks everybody else’s out of the park:
- Solely run Lighthouse assessments utilizing the quickest and highest-spec {hardware}.
- Be sure your web connection is the quickest it may be; relocate if you’ll want to.
- By no means use discipline knowledge, solely lab knowledge, collected utilizing the aforementioned quickest and highest-spec {hardware} and super-speed web connection.
- Rerun the assessments within the lab utilizing completely different situations and all of the particular code hacks I described on this put up till you get the end result(s) you wish to impress your folks, colleagues, and random individuals on the web.
Be aware: One of the best ways to study internet efficiency and the best way to optimize your web sites is to do the exact opposite of all the pieces we’ve coated on this article the entire time. And at last, to noticeably degree up your efficiency abilities, use an utility monitoring device like Sentry. Consider Lighthouse because the canary and Sentry because the real-deal production-data-capturing, lean, imply, internet vitals machine.
And at last-finally, right here’s the hyperlink to the complete demo web site for academic functions.
(gg, yk, il)