"Every embedded video comes with a real cost to page load performance. Each player loads extra resources, whether the user ever hits play or not, as Chris Coyier noted in his blog post on "YouTube Embeds are Bananas Heavy and it's Fixable". The approach of using in that article works well when the video appears further down on the page and loads outside of the initial viewport. If the video is directly in the initial viewport, it can still cause a cumulative layout shift (CLS)."
"The most common use case these days is creating an accordion without JavaScript. The visitor clicks the summary element, which behaves like a button, and the rest of the content is revealed. For that, the open attribute gets set on the <details> element. The visitor clicks the summary again, and the content collapses. When the page loads, the content inside <details>, except the <summary> element, is not displayed by default, making it an ideal tool for displaying content only after user interaction."
Embedded videos add significant page load cost because each player loads extra resources even if the user never plays them. Native lazy loading for images and iframes exists, but indiscriminate lazy loading can hurt Largest Contentful Paint by roughly 20%, especially when lazy-loading content directly into the viewport. The <details> and <summary> elements hide non-summary content by default, so placing iframes or videos inside <details> delays their loading until user interaction. That approach enables lazy-loading videos with only HTML and CSS, preventing initial viewport resource loading and reducing cumulative layout shift even above the fold.
Read at Frontendmasters
Unable to calculate read time
Collection
[
|
...
]