The problem

Pages embed video players that fetch the video, or a heavy player script, as soon as the page opens, whether anyone watches or not.

The fix you can use today

• Show a poster image and fetch the video only on click.
• Use preload="none" on video elements.
• Swap a lightweight placeholder for third-party players until they are used.

GreenCode's own website loads its films only when someone presses play.

Tools that help

• Lighthouse: audits a page for total byte weight, unused JavaScript and CSS, image formats and offscreen images
• WebPageTest: loads a real page and shows every request, its size and when it loaded

How GreenCode helps

GreenCode helps tackle this by practising it on greencode.ai: films load only when someone presses play, and static pages, WebP images and scripts only where they are used cut the home page's first view from 6,766 KB to 1,719 KB. More on this.

Tags

#video#web-performance#frontend

Sources

• Green hosting: films delivered only when wanted
• HTTP Archive, Web Almanac 2024, Sustainability: video preload and autoplay
• W3C, Web Sustainability Guidelines: disable autoplay, use facades for heavy media

All GreenCode Tech Tips