How YouTube built a faster experience for developing countries by improving Core Web Vitals
Summary of a case study
YouTube aimed to improve its website's performance and user experience, particularly for users in developing markets like Brazil, India, and Indonesia who may have slower devices and limited network bandwidth.
To do this, YouTube focused on optimizing performance metrics such as Core Web Vitals through techniques like lazy-loading and modernizing its code.
Problem identification
YouTube checked how fast videos and other content were loading on mobile devices in different parts of the world using Chrome User Experience Repor(CrUX)
They found Largest Contentful Paint (LCP) was taking as long as 4-6 seconds to load. The optimal time is less than 2.5 seconds.
They used Lighthouse to audit their watch pages and found their First Contentful Paint (FCP) was 3.5 seconds and their LCP was 8.5 seconds
Solution
Change the order of the code
The team found that they could make the webpage load faster by changing the order of some of the code. They moved the HTML code for the video player to the top of the webpage, above the script that makes the video player interactive.
YouTube tested this change using a tool called Lighthouse and saw that it improved the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) from 4.4 seconds down to 1.1 seconds.
Optimize delivery of the video poster image
Image credit: web.dev
The YouTube team made another important discovery while they were working on improving the Largest Contentful Paint (LCP) of their webpage.
They found that LCP only measures how long it takes for the poster image of a video to load, not the actual frames of the video.
This was surprising because YouTube had always focused on making the video start playing as quickly as possible.
To improve LCP, the team started working on how fast they could deliver the poster image for their videos.
They tested different versions of the poster image and chose the one that was the best in user testing. As a result of this work, both the First Contentful Paint (FCP) and LCP improved a lot.
The LCP in the field (i.e., for real users) went from 4.6 seconds down to 2.0 seconds. This was a big improvement and would make a huge difference in the user experience.
Optimize resource loading with Priority Hints
YouTube also used an attribute called "fetchpriority" with the "link rel=preload" element. This helped them prioritize the loading of the poster image so that it would be discovered and loaded quickly. They used these optimizations on all platforms to improve the user experience.
<link as="image" rel="preload" href="poster.jpg" fetchpriority="high">
Conclusion
“76% of YouTube's mobile web URLs now pass the Core Web Vitals metrics, with improvements to business metrics like watch time as a result.”
If you liked what you read, please subscribe for interesting articles on System Design, UI/UX, and engineering careers.