![]() Include VanillaLazyLoadįor this implementation of LazyLoading, we will use the LazyLoad vanilla script. In this article, I'm going to explain how to optimally load an embedded YouTube video using lazy loading with JavaScript. It would only load when the video container is inside the viewport, loading the 272KB that the user would now see: ![]() So the solution, to remove those 272KBs that aren't needed yet, would be to load them only when it's visible on the viewport (using LazyLoad it wouldn't load immediately): In terms of optimization, this is really awful. In this case, if you embed the video as you traditionally would with the markup, the iframe of YouTube would add immediately the 272KB to the size of your page, even though the video is not visible to the user in the viewport. To understand what we are going to do in this approach with the IntersectionObserver API, consider the following example of a vertically scrollable webpage that contains a single YouTube video: LazyLoading with the IntersectionObserver API In this article, we are going to show you 2 approaches that will solve your problem. If you are looking for a way to optimize your web pages that contains YouTube embed videos, you definitely need to lazy load them. This by itself, is not an insignificant amount considering that the ideal size of a fast-loading page is 1MB (1024KB). It adds automatically an extra 272KB size to your page. In case you haven't noticed yet and you are just embedding any useful video of youtube that you find on a single website page, embedding a single video from youtube, for example:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |