PageSpeed Score and Core Web Vitals have been on everyone’s lips since 2021. Seeing web performance become more democratic and reach an ever-wider audience obviously fills us with joy!
2022 undoubtedly marks the moment when Core Web Vitals have become central.
In her aptly named talk “ What’s new in Web performance ” at performance.now(), Katie Hempenius, Software Engineer at Google, discusses the topics that will have marked 2022. Selection of what caught our attention.
Bfcache Adoption and the Impact on Core Web Vitals
In January 2022, the number of sites passing the Core Web Vitals increased suddenly , and this is linked to the fact that the bfcache (or back/Forward Cache) was used much more with an impact not only on the LCP , but also very important on the CLS .
Field data showing the evolution of the number of sites passing Core Web Vitals, with a visible increase in early 2022 (from Katie Hempenius’ presentation at performance.now())
In practice, 10% of desktop navigations and 20% of mobile navigations are “back/forward” navigations:
Proportion of back/forward navigations on desktop and mobile in 2022 (excerpt from Katie Hempenius’ presentation at performance.now()))
But what is bfcache? It is what allows for ultra-fast forward/backward navigation . After starting to load a page, if the user leaves it and returns to it, the page loads from the bfcache for instant display. In other words, the browser pauses what it was doing, and resumes the thread immediately when the user returns to the page.
This technique, initially available on Firefox, is now supported by Chrome.
Still on the subject of new developments, let us note that a small revolution could well take place around the measurement of interactivity.
Innovations in measuring interactivity
Measuring interactivity is about evaluating how a browser responds to a user action. The principle is simple, the reality is much more complicated, since the way to measure this interactivity raises many methodological questions.
After the Time To Interactive which evaluates the moment when a page becomes interactive in a sustainable way and without latency (and which is part of the PageSpeed score ), the First Input Delay (Core Web Vitals) which measures the time between the moment when a user interacts for the first time with a page and the moment when the browser is actually able to respond to this interaction… make way for the Interaction To Next Paint (INP)!
As Nic Jansma, Senior Principal Lead Software Engineer at Akamai, points out in his talk “ Modern Metrics ”: the challenge for measuring interactivity with Real User Monitoring (RUM) tools is knowing when to start and when to stop measuring, knowing that users continue to interact after loading, and that they also interact before loading (before or after the pageload event).
For a better measurement of interactivity, a newcomer among the webperf metrics that could well join the Core Web Vitals: the INP, which measures the time between a user interaction and the appearance of the next display, by taking the longest response time by slice of interactions (for pages with less than 50 interactions in total, the INP is the interaction with the greatest latency; for pages with many interactions, the INP most often corresponds to the 98th percentile of the interaction latency).
Field studies show that the sensation of instantaneity is at 100 ms, but since this is difficult to achieve for certain browsing conditions, Google considers that the INP is good from 200 ms.
To measure INP, you can use the following tools:
- CrUX,
- the Web Vitals extension with “heads up display” enabled to see latency across all different interactions,
- Lighthouse,
- Dev Tools, which added an Interaction tracks option.
Tech tips to optimize the INP: the fewer scripts and JavaScripts, the more they are split, the more the main thread is free . Also, splitting the JS allows to multiply the opportunities for the browser to respond quickly, and the prioritization of the tasks of the Main Thread also has a role to play for good interactivity.
New tools to measure loading speed
On the API side, isInputPending() has been available since Chrome 87, and indicates whether there are user actions waiting for a response from the browser. As mentioned about the INP, breaking scripts into smaller pieces ( chunks ) can be a good solution to promote interactivity, but it has its limits. For each “ chunk ” (which in practice represents a window of opportunity to interact), if the user interacts, the browser needs time to respond. isInputPending() eliminates the need to manage this tradeoff: if there is a user action, the browser behaves accordingly, and if there is none, the rest of the chunks continue to be loaded.
postTask() is another API that helps organize loading and indicates the priority of a task to determine when it should be processed. For example, since not all JS is equally important, postTask() helps prioritize micro-tasks (visible or not to users) that can block interactions.
On the tools side, WebPageTest displays two new features:
- to test the impact of optimizations locally, without modifying the original code (a bit like the Local Override option in Chrome DevTools);
- and to collect information and perform accurate diagnostics on the Core Web Vitals – the LCP element, the target of the FID, the thing that has undergone the biggest layout shift … and understand where to put the effort.
As for Lighthouse which only tested the initial loading of a page (while some scripts only load after accepting the cookie consent banner, or the CLS can increase because of interactions…), it now allows two new measurement methods:
- Time span mode , to measure performance over a given period of time (useful for CLS and INP);
- Snapshot , for audits at different specific times.
As we mentioned in the introduction, the points we have just covered are those that have struck us. But in reality, they are not the only ones. 2022 has been rich in announcements and innovations! Our comrades at DebugBear make a very good summary of it here .
In a few key points:
- Chrome has stopped OSCP requests since version 106
- Since February, Page Experience update also applies to desktop searches
- The HTTP/3 protocol has been standardized since June
- Since September, Safari supports AVIF , as well as Native image lazy loading (loading attribute only for images)
- PageSpeed Insights added scores beyond Performance Score in the fall
- Chrome is giving more insight into render-blocking requests, and Chrome DevTools is helping to better understand issues impacting Core Web Vitals in its new Performance Insights tab
- Since November, Chrome version 108 allows you to start loading a page’s resources before navigation.
And in 2023?
Can we cut out the ritual of early-year predictions? Not easy 
At Fasterize, in 2023, we predict the start of a swing back between client-side and server-side rendering – a prediction whose reality is already starting to become tangible.
Concretely, after having overloaded the browser with work, we observe a tendency to lighten the work on the browser side, and in particular to return to Server-Side Rendering (SSR), so that a maximum of operations are processed in the space where the greatest computing power is located: the servers, rather than the users’ browsers.
It is to take advantage of this computing power, and to bypass the limits of CMS, frameworks, browsers, or even technical resources, that we have developed an Edge SEO solution.
What is Edge SEO?
To optimize the images and front-end of a site, our engine acts as a Next-Gen CDN. That is to say, beyond the storage and distribution of content, our solution instantly rewrites the code to make the necessary optimizations and serves these optimized pages to users.
What we knew how to do for good web performance practices, it seemed obvious to us that we had to apply it to SEO!
No need to wait for technical teams to have the bandwidth to deploy your SEO roadmap, put agility back at the heart of your strategy with a Test & Learn approach and continuous improvement in complete autonomy . Also regain control of your content even if you don’t have it on your origin or on your CMS.
Correct your HTML tags, deploy your redirects, regain control of your robot.txt, optimize your linkbuilding, the tagging of your content, your rich snippets, and the indexing of your sites in JS…
Discover all the features of our Edge SEO solution:
