Skripte verzögern, bis sie benötigt werden
Laden Sie JavaScript bei Bedarf mithilfe von IntersectionObserver und Benutzerinteraktions-Triggern
Skripte verzögern, bis sie benötigt werden
Laut dem [url=https:\/\/almanac.httparchive.org\/en\/2025\/page-weight]2025 Web Almanac[\/url] liefert die durchschnittliche mobile Seite 251 KB an ungenutztem JavaScript aus. Das ist JavaScript, das der Browser herunterlädt, analysiert und kompiliert, bevor ein Besucher es überhaupt benötigt. Formulare, auf die niemand geklickt hat. Chat-Widgets, die niemand geöffnet hat. Kartenintegrationen, die sich unter dem Falz (below the fold) befinden. All dies konkurriert während der kritischsten Phase des Seitenladens um Bandbreite und CPU-Zeit.
Der effektivste Weg, damit umzugehen, besteht darin, Skripte erst dann zu laden, wenn sie tatsächlich benötigt werden. Dies unterscheidet sich von der Verwendung des [url=\/pagespeed\/async-vs-defer-javascript-and-core-web-vitals]async- oder defer-Attributs[\/url] in einem Skript-Tag. Diese Attribute laden das Skript immer noch während des Seitenladens herunter; sie ändern lediglich den Zeitpunkt der Ausführung. Das Laden bei Bedarf (On-demand loading) lädt das Skript überhaupt nicht herunter, bis ein Trigger ausgelöst wird.
Zuletzt überprüft von [url=https:\/\/www.linkedin.com\/in\/arjenkarel\/]Arjen Karel[\/url] im März 2026
Bei Bildern machen wir das schon lange. Es nennt sich Lazy Loading. Beim Lazy Loading wird ein Bild unter dem Falz erst kurz vor dem Hineinscrollen in den Sichtbereich geladen. Der Browser kann seine Ressourcen für das Herunterladen, Analysieren und Zeichnen von Dingen aufwenden, die tatsächlich benötigt werden. Das gleiche Prinzip gilt für JavaScript. Es behebt die [url=\/pagespeed\/reduce-unused-javascript-lighthouse]Lighthouse-Warnung "Ungenutztes JavaScript reduzieren"[\/url] und verbessert Reaktionsmetriken wie [url=\/core-web-vitals\/interaction-to-next-paint]Interaction to Next Paint (INP)[\/url].
Leider ist es nicht so einfach wie das Hinzufügen von Um Skripte nach dem Seitenladen zur Seite hinzuzufügen, benötigen wir eine kleine Funktion, die ein Skript-Element erstellt und es an den Dokumentenkopf anhängt.loading="lazy" zu einem Bild, aber mit einer kleinen Hilfsfunktion und einem Trigger können wir es umsetzen.
Der Hilfsskript zur Skript-Injektion
function injectScript(scriptUrl, callback) {const script = document.createElement('script');script.src = scriptUrl;if (typeof callback === 'function') {script.onload = callback;}document.head.appendChild(script);
}