iFrames in Webflow: Lazy Loading | Optimize PageSpeed

From time to time, you have to integrate iFrames into a website. Be it for a YouTube video, podcast player or even a Google Maps map. The only stupid thing about this is that you uncontrollably bring a lot of code into the website, which of course also has to be loaded. Until now, browsers have always loaded such an iFrame directly when opening the page. However, an attribute now makes it possible to load this iFrame only as soon as the page visitor scrolls to this area (lazy-loading). The browser support is already pretty good and you can confidently add it to every iframe embed, as it will definitely not be long before it is supported by all browsers.

By default, lazy loading is enabled for all images in Webflow. With this trick, you can also get all iFrames to load later and optimize your loading time as well.

Why should you optimize your website page speed?

The website loading speed is an important criterion that is taken into account by search engines. The faster your site loads, the better it ranks in search results. Users of a fast website also have a better user experience.

If you let Webflow load your iFrames later, you can significantly improve your site's load time. Loading iFrames late prevents them from affecting the load time of the rest of the page.

Here's how it works: Your browser doesn't load the iFrames immediately, but only when the user actually scrolls to there.

What are iFrames?

iFrames are small windows that are embedded in a web page and display content from another page. This content can be videos, images, or even other websites.

The problem with iFrames is that they slow down a page's load time. This is because the browser must first load all of the content of the iframe before it can start rendering the rest of the page.

So if you have iFrames on your page, you should set them up so that they only load when the site visitor also scrolls to the appropriate location.