Web Speed: 12 Innovations of 2022

In this article, we'll delve into some of the features, techniques, and tools that caught our attention the most in 2022.

1) WebP and AVIF Images in Almost All Browsers#

The support for new formats has improved once again. Modern image formats like WebP and AVIF can significantly speed up websites by encoding the same information into smaller files.

While WebP has been widely supported for over two years, AVIF support only appeared in Safari this September with the release of iOS 16 and macOS Ventura. Keep in mind that not all Safari users have upgraded yet, and Edge still doesn’t support AVIF. However, you can use WebP with almost no hesitation.

2) Change in CLS Metric Calculation#

As we've discovered in the PageSpeed.ONE consultant team, correctly understanding the calculation of metrics is a fundamental prerequisite for successful optimization.

The methodology for measuring the Cumulative Layout Shift metric has changed several times, most recently quite significantly. If you want to understand concepts like Session Window and Session Gap, and see how they all work together, read our article on CLS.

3) Early Hints: Load Resources Even Before Preloading#

An interesting innovation called Early Hints made its way to Chrome in 2022. It’s an HTTP status code (103 Early Hints) that allows sending the server “hints” about critical sub-resources.

While the server generates the main resource, critical files (CSS, JS) are already downloading to the browser thanks to Early Hints, which can improve website speed.

4) Priority Hints in Chrome and Edge from Version 101#

Chrome and Edge from version 101 bring a feature that goes much further in priority management. Priority Hints work with the fetchpriority attribute, which can be added to an HTML element to increase or decrease its download priority. You can learn more on web.dev.

5) Step-by-Step Web Speed Measurement (and Our Tester 3.0)#

Martin Michálek has prepared an up-to-date guide to measuring website speed for you. Are you measuring correctly? Are you measuring the domain, specific URLs, and groups of pages as Google wants? The text is primarily for non-technical people and shows how to simplify measurement with the third version of our tester.

6) Arrival of a New Metric: Interaction to Next Paint (INP)#

Interaction to Next Paint is currently an experimental metric that measures a website's responsiveness after user interaction. Google claims it should eventually replace First Input Delay (FID) in Core Web Vitals since 95% of websites currently meet the FID criteria. FID also only measures the first interaction and one part of the interaction cycle. INP will measure all interactions while browsing, with a current threshold set at 200 ms. You can find more in our article on the INP metric. We also add a few tips on how to optimize INP.

7) Performance Insights: Simpler and Clearer View on Speed#

If you want to tune speed but find the Performance tab in Chrome DevTools too complicated, try Performance Insights. It displays only the most relevant information, primarily related to Web Vitals. A detailed guide on how to use the tool is available on the Chrome Developers website.

8) CSS size-adjust: Harmony Between System and Web Fonts#

We have started to extensively use the CSS size-adjust rule, which already has high browser support. The difference between the web font from your site's design and the system font can cause unwanted layout shifts (CLS). For these situations, there's a new CSS property size-adjust and ascent-override, and this tool makes implementation easier.

9) CLS: Ensuring Image Aspect Ratios to Avoid Unwanted Layout Shifts#

In his article, Jake Archibald describes two techniques to achieve a stable layout with images. One is the CSS property aspect-ratio, and the other is the good old width and height attributes in HTML. The author also adds many interesting details. Did you know about the aspect-ratio: auto 16/9 notation? It ensures that the element is set to a 16

ratio, but if the image has a different ratio, it applies upon loading.

10) Full Support for Native Lazy Loading Now in Safari#

Since Safari version 15.4, released this March, all browsers support the loading="lazy" attribute for images. To support lazy loading for <iframe>, the feature still needs to be enabled in some browsers. Native lazy loading of images ensures that images load only when they are about to appear in the viewport, saving bandwidth and prioritizing more important page content.

11) Back/Forward Cache in Chrome#

Bfcache is a browser memory cache that stores a complete snapshot of the page (including a lot of JavaScript) while the user navigates away. If the entire page is in memory, the browser can quickly and easily restore it when the user decides to return.

Since Chrome version 96, Bfcache is available for all Chrome users on both desktop and mobile devices. This can have interesting impacts on speed for real users, as well as data from the Chrome UX Report.

12) Prerendering Entire Pages in Chrome#

Sometimes it's very likely that a user will soon navigate to a new page, and starting with Chrome version 108, the browser begins loading the page even before transitioning to it.

When the transition happens, the page that was loaded in the background is “prerendered,” or else it is immediately rendered.

This concludes our summary for 2022. What do we expect in 2023? Surely, there will be improvements in the support of already introduced features across all browsers.

We also look forward to seeing how and when Google will utilize the INP metric. We will certainly keep an eye on developments around Web Performance and bring you fresh updates. Follow us on Twitter, LinkedIn, or Facebook.

Tags:Web PerformanceINP