Tech Tip #52: Load video only when someone presses play

Autoloaded video can outweigh the rest of the page.

Video created by explainapaper.com

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

Transcript

Autoloaded video can outweigh the rest of the page. Many pages embed a video player that starts loading straight away. It fetches the video, or a heavy player script, the moment the page opens. Whether anyone watches or not. Every one of those bytes uses energy, on the network and the device. Here is the fix you can use today. First, show a poster image, and fetch the video only on click. Next, tell video elements not to preload. Then use a light placeholder for other sites' players, until someone uses them. Check what still loads, using tools like Lighthouse and WebPageTest. GreenCode's own website loads its films only when someone presses play. A two to three minute film there is around ten megabytes. Visitors who never press play never download it. GreenCode helps tackle this by practising it on its own website. Static pages, lighter images, and scripts only where they are used. That was GreenCode Tech Tip number fifty-two. Follow for the next tip, and find more on greencode.ai/tech-tips.

All GreenCode Tech Tips · All GreenCode videos

  • Tip #52
  • For Developers
  • Length 1:05
  • Category Web and front-end
GreenCode

Want this checked on your own system? Talk to the GreenCode team.

Get in touch