How can I improve the loading speed of web pages with multiple YouTube videos on Webflow?
TL;DR
To improve the loading speed of Webflow pages with multiple YouTube videos, use lazy loading and lightweight embeds. Here's how:
1. Use YouTube’s Embed URL Parameters
- Add
?rel=0&modestbranding=1to the embed URL to reduce external requests.
2. Use Lite YouTube Embeds
- Instead of traditional iframes, use a lightweight approach like lite-youtube-embed. This only loads the video player when clicked.
- See lite-youtube-embed on GitHub for implementation.
3. Lazy Load iframes
- Webflow doesn’t support native iframe lazy-loading directly, but you can:
- Add
loading="lazy"to the iframe manually. - Use a placeholder image and load the iframe only when clicked.
4. Use a Thumbnail with a Play Button
- Load a static thumbnail instead of the iframe on page load.
- Replace the image with the full YouTube embed when users click it.
5. Limit the Number of Videos Per Page
- Paginate or collapse video sections to reduce initial load time.
6. Host Videos on Webflow (if applicable)
- If the content allows, upload videos directly to Webflow’s CMS instead of embedding from YouTube.
Summary
Use lazy loading techniques like lite-youtube-embed or thumbnail placeholders to defer loading YouTube videos. This dramatically improves page speed and user experience.