Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ Building a Better Web - Part 1: A faster YouTube on web

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š Building a Better Web - Part 1: A faster YouTube on web


๐Ÿ’ก Newskategorie: Web Tipps
๐Ÿ”— Quelle: web.dev

The Chrome team often talks about "building a better web", but what does that mean? Web experiences should be fast, accessible, and use device capabilities in the moment when users need it most. Dogfooding is part of Google's culture, so the Chrome team has partnered with YouTube to share lessons learned along the way in a new series called, "Building a better web". The first part of the series will dive into how YouTube built a faster web experience.

PageSpeed Insights showing the Chrome UX Report data for YouTube Mobile Web passing the Core Web Vitals.
The YouTube for mobile web Watch page passing the Core Web Vitals thresholds.

Building a faster web #

At YouTube, performance relates to how fast videos and other contentโ€”such as recommendations and commentsโ€”load on web pages. Performance is also measured by how quickly YouTube responds to user interactions such as search, player control, likes, and shares.

Growing developing markets, such as Brazil, India, and Indonesia are important for YouTube mobile web. Because many users in these regions have slower devices and limited network bandwidth, ensuring a fast and seamless experience is a critical goal.

To provide an inclusive experience for all users, YouTube set out to improve performance metrics such as Core Web Vitals through lazy-loading and code modernization.

Improving Core Web Vitals #

To identify areas of improvement, the YouTube team used the Chrome User Experience Report (CrUX) to see how real users were experiencing video watch and search result pages on mobile in the field. They realized their Core Web Vitals metrics had a lot of room for improvement, with their Largest Contentful Paint (LCP) metric clocking in at 4-6 seconds in some cases. This was substantially higher than their target of 2.5 seconds.

Charts of FCP and LCP showing YouTube Watch page pass rates as well as the YouTube origin.

To identify areas for improvement, they turned to Lighthouse to audit the YouTube watch pages, revealing a low Lighthouse (lab) score with a First Contentful Paint (FCP) of 3.5 seconds and a LCP of 8.5 seconds.

Lighthouse Report for YouTube Mobile.
Chrome sets a target of 1.8s for FCP and 2.5s for LCP as a gold standard. The FCP and LCP were clearly in the yellow and red at 3.5s and 8.5s, respectively.

To optimize FCP and LCP, the YouTube team dove into several experiments, resulting in two big discoveries.

  1. The first discovery was that they could improve performance by moving the HTML for the Video Player above the script that makes the Video Player interactive. Lab tests indicated that this could improve both FCP and LCP from 4.4 seconds to 1.1 seconds.

  2. The second discovery was that LCP only considers <video> element poster images and not frames from the video stream itself. YouTube has traditionally optimized for the fastest time until the video starts playing, so to improve LCP the team started also optimizing how quickly they could deliver their poster image. They experimented with a few variations of poster images and picked the one that scored the best in user testing. As a result of this work, both FCP and LCP showed marked improvement, with field LCP improving from 4.6 seconds to 2.0 seconds.

Watch Page LCP Experiment for mobile web showing control, experiment A (image thumbnail) and experiment B (black thumbnail)
In the lab, we observed an improvement in FCP and LCP from 4.4s to 1.1s after this change landed. Experiment A: Using the actual video thumbnail works well on pages where the video starts out paused, but for auto-play video pages like the watch page it performed poorly in user studies. It also resulted in a drop in active users. Experiment B: Using a solid black poster image showed the best results in user studies. Users found the transition from solid black to the first frame of the video to be a less-jarring experience for autoplay videos.
The black thumbnail was deployed in production for all mobile web users July 2021 showing marked improvement in FCP and LCP, as seen in the above RUM analysis.
Black thumbnail was deployed in production for all mobile web users July 2021 showing marked improvement in FCP and LCP, as seen in the above RUM analysis.

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.

Modularization with lazy loading #

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.

YouTube player and controls visualized
The YouTube video player allows users to control playback speed, follow progress, skip sections, and others. When a user taps on a particular control, the change in the state must be communicated to other controls e.g. a user tap on the progress bar must be shared to controls such as play-head, subtitles etc.

Each progress bar touch-move event triggered two extra style recalculations and took 21.17 ms during performance test runs in the lab. As new controls were added over time, the pattern of decentralized control would often cause circular dependencies and memory leaks, negatively impacting watch page performance.

21.17 ms event shown on the Performance timeline.
Chrome DevTools with a 4 times CPU slow-down performance run.

To fix the issues due to decentralized control, the team updated the player UI to synchronize all updates, essentially refactoring the player to one top-level component that would pass down data to its children. This ensured only one UI update (render) cycle for any state change, eliminating chained updates. The new player progress bar touch-move event has no style recalculations during its JavaScript execution and now only requires 25% the time of the old player.

Reduced time in events shown on the performance timeline.

This code modernization also resulted in additional performance improvements such as improved watch load times on old devices, fewer abandoned playbacks, and a reduced number of non-fatal errors.

Conclusion #

As a result of YouTube's investment in performance, watch pages load much faster with 76% of YouTube's mobile website URLs now passing Core Web Vitals metric thresholds in the field. On desktop, lab LCP for the watch page was reduced from approximately 4.6 seconds to 1.6 seconds. Interaction and rendering performance of the site, especially on the YouTube video player, are seeing up to 75% less time spent in JavaScript execution than before.

Improvements to the performance of YouTube web over the last year have also improved business metrics, including watch time and daily active users. Based on the success of these efforts, we plan to continue exploring even more ways to optimize in the future.

In part two of this series, "Building an accessible web", youโ€™ll read how YouTube made their website more accessible for screen-reader users.

With special thanks to Gilberto Cocchi, Lauren Usui, Benji Bear, Bo Aye, Bogdan Balas, Kenny Tran, Matthew Smith, Phil Harnish, Leena Sahoni, Jeremy Wagner, Philip Walton, Harleen Batra and both the YouTube and Chrome teams for their contributions to this work.

...



๐Ÿ“Œ Building better batteries, faster


๐Ÿ“ˆ 26.68 Punkte

๐Ÿ“Œ The Art of Agile Software Development: Building Better Software, Faster


๐Ÿ“ˆ 26.68 Punkte

๐Ÿ“Œ You better watch out, you better not cry. Better not pout, I'm telling you why: SQLite vuln fixes are coming to town


๐Ÿ“ˆ 24 Punkte

๐Ÿ“Œ 2short.ai review: Grow your YouTube channel 10x faster using Youtube Shorts AI Maker


๐Ÿ“ˆ 22.88 Punkte

๐Ÿ“Œ The MDN Curriculum: Better web developers for a better web - Feb. 4, 2024


๐Ÿ“ˆ 21.87 Punkte

๐Ÿ“Œ Chrome Dev Summit 2018: Building a Faster, Smoother, Capable Web


๐Ÿ“ˆ 21.61 Punkte

๐Ÿ“Œ Svelte beats react: faster, simpler, and better for your next web app!


๐Ÿ“ˆ 21.26 Punkte

๐Ÿ“Œ Code better and faster websites with Espresso web editor


๐Ÿ“ˆ 21.26 Punkte

๐Ÿ“Œ A View to a Better, Faster Web โ€“ These Weeks in Firefox: Issue 143


๐Ÿ“ˆ 21.26 Punkte

๐Ÿ“Œ Do Faster Payments Mean Faster Fraud?


๐Ÿ“ˆ 20.66 Punkte

๐Ÿ“Œ Do Faster Payments Mean Faster Fraud?


๐Ÿ“ˆ 20.66 Punkte

๐Ÿ“Œ Microsoft Bounty Program Updates: Faster bounty review, faster payments, and higher rewards


๐Ÿ“ˆ 20.66 Punkte

๐Ÿ“Œ zoxide 0.4.1, a faster way to navigate your filesystem - now 2-3x faster


๐Ÿ“ˆ 20.66 Punkte

๐Ÿ“Œ Faster feedback loops make for faster developer velocity (Ep. 498)


๐Ÿ“ˆ 20.66 Punkte

๐Ÿ“Œ Faster Pandas: Make Your Code Run Faster and Consume Less Memory || Miki Tebeke


๐Ÿ“ˆ 20.66 Punkte

๐Ÿ“Œ I made Express faster than Fastify (100x faster JSON)


๐Ÿ“ˆ 20.66 Punkte

๐Ÿ“Œ [Nestia] Boost up your NestJS server much faster and easier (maximum 20,000x faster)


๐Ÿ“ˆ 20.66 Punkte

๐Ÿ“Œ [Nestia] Boost up your NestJS server much faster and easier (maximum 20,000x faster)


๐Ÿ“ˆ 20.66 Punkte

๐Ÿ“Œ Microsoft Bounty Program Updates: Faster bounty review, faster payments, and higher rewards


๐Ÿ“ˆ 20.66 Punkte

๐Ÿ“Œ Microsoft Bounty Program Updates: Faster bounty review, faster payments, and higher rewards


๐Ÿ“ˆ 20.66 Punkte

๐Ÿ“Œ Building a Better World Wide Web


๐Ÿ“ˆ 19.28 Punkte

๐Ÿ“Œ Youtube Music (Premium) und Youtube Premium ersetzen Youtube Red


๐Ÿ“ˆ 18.82 Punkte

๐Ÿ“Œ YouTube Kids: Eine neue Art, YouTube Kids auf Smart TVs zu schauen โ€“ Integration in YouTube-App kommt


๐Ÿ“ˆ 18.82 Punkte

๐Ÿ“Œ YouTube Unveils New Streaming Service 'YouTube Music,' Rebrands YouTube Red


๐Ÿ“ˆ 18.82 Punkte

๐Ÿ“Œ Building Faster, More Resilient Apps with Service Worker


๐Ÿ“ˆ 18.68 Punkte

๐Ÿ“Œ Building Faster, More Resilient Apps with Service Worker


๐Ÿ“ˆ 18.68 Punkte

๐Ÿ“Œ Making the Building of Firefox Faster for You with Clever-Commit from Ubisoft


๐Ÿ“ˆ 18.68 Punkte

๐Ÿ“Œ Building Faster AMD64 Memset Routines


๐Ÿ“ˆ 18.68 Punkte

๐Ÿ“Œ Breachway is a deck-building Slay the Spire meets FTL: Faster Than Light


๐Ÿ“ˆ 18.68 Punkte

๐Ÿ“Œ Building Faster AMD64 Memset Routines


๐Ÿ“ˆ 18.68 Punkte

๐Ÿ“Œ Building Faster AMD64 Memset Routines


๐Ÿ“ˆ 18.68 Punkte

๐Ÿ“Œ China is Building Nuclear Reactors Faster Than Any Other Country


๐Ÿ“ˆ 18.68 Punkte











matomo