While bringing these optimizations to all platforms, YouTube also took advantage of the new
fetchpriority
attribute
, which we use with
<link rel=preload>
to prioritize discovering and loading the poster image early:
<link as="image" rel="preload" href="poster.jpg" fetchpriority="high">
While these optimizations did improve LCP, the team felt that the current definition of the LCP metric wasn’t fully capturing, from the user’s perspective, when the “main content” of the page had loaded-which is the goal of LCP.
To address these concerns, members of the YouTube team partnered with members of the Chrome team to explore ways that the LCP metric could be improved to address their use case. After considering the feasibility and impact of a few options, the teams landed on a
proposal
to consider the paint time of the first frame of a video element as an LCP candidate.
Once this change lands in Chrome, the YouTube team is excited to continue their work optimizing for LCP. And the updated version of the metric will mean these optimizations will have a more direct impact on real-user experiences.
YouTube pages contained many modules that were eagerly loaded. To optimize how 50+ components were rendered, the team built a component to JS module map that would tell the client which modules to load. By marking components as lazy, the JS modules would load later, reducing the initial load time of the page and the amount of unused Javascript sent to the client.
However, after lazy loading was implemented, the team noticed a waterfall effect that lazy loaded components and their dependencies would load at suboptimal times.
To solve this problem, the team determined the minimal set of components needed in a view and batched them in a single network request. The results were improved page speed, reduced JavaScript parse time, and, ultimately, better initial rendering times.
State-management across components
YouTube was experiencing performance issues due to its player controls, especially on older devices. Code analysis showed that the player, which allows users to control features such as playback speed and progress, had become over-componentized over time.