iFrames in Webflow später laden | PageSpeed optimieren

Hin und wieder muss man iFrames in eine Website integrieren. Sei es für ein YouTube Video, Podcast Player oder auch eine Google Maps Karte. Das blöde dabei ist nur, dass man sich dadurch unkontrolliert viel Code mit in die Website holt, der natürlich auch geladen werden muss. Bisher haben die Browser so ein iFrame immer direkt beim Öffnen der Seite geladen. Jetzt ist es aber durch ein Attribut möglich, dieses iFrame erst zu laden, sobald der Seitenbesucher zu diesem Bereich hin scrollt (lazy-loading). Der Browser Support ist auch schon ziemlich gut und du kannst es getrost bei jedem iFrame-Embed mit dazuschreiben, da es bestimmt nicht mehr lange dauert, bis es von allen Browsern unterstützt wird.

In Webflow ist bei allen Bilder standardmäßig lazy loading aktiv. Mit diesem Trick bekommst du auch alle iFrames dazu, erst später zu laden und optimierst damit auch noch deine Ladezeit.

Warum solltest du deinen Website Page Speed optimieren?

Die Website Ladegeschwindigkeit ist ein wichtiges Kriterium, das von Suchmaschinen berücksichtigt wird. Je schneller deine Website geladen wird, desto besser rankt sie in den Suchergebnissen. Außerdem haben Nutzer einer schnellen Website eine bessere User Experience.

Wenn du deine iFrames in Webflow später laden lässt, kannst du die Ladezeit deiner Website erheblich verbessern. Durch das späte Laden der iFrames wird verhindert, dass sie die Ladezeit der restlichen Seite beeinträchtigen.

So funktioniert es: Dein Browser lädt die iFrames nicht sofort, sondern erst, wenn der Nutzer auch tatsächlich dort hin scrollt.

Was sind iFrames?

iFrames sind kleine Fenster, die in einer Webseite eingebettet sind und Inhalte von einer anderen Seite anzeigen. Diese Inhalte können Videos, Bilder oder auch andere Webseiten sein.

Das Problem bei iFrames ist, dass sie die Ladezeit einer Seite verlangsamen. Das liegt daran, dass der Browser erst alle Inhalte des iFrames laden muss, bevor er mit dem Rendern der restlichen Seite beginnen kann.

Wenn du also iFrames auf deiner Seite hast, solltest du sie so einrichten, dass sie erst geladen werden, wenn der Seitenbesucher auch zu der entsprechenden Stelle scrollt.