Sie sind hier: Startseite · Artikel · Fremdskripte

Skripte von Drittseiten einbinden, ohne die Performance der eigenen Site zu beeinträchtigen

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Ein Ausschnitt aus dem Quellcode einer typischen Webseite.

Kaum eine moderne Website kommt ohne die Einbindung von Drittanbieter-Skripten aus.

Beispiele für Fremdskripte:

• Script-Bibliotheken, z. B. jQuery
• Analytic Tools z. B. Google Analytics
• Bewertungsportale, z. B. HolidayCheck
• Social Media Buttons
• Cookie Hinweis gem. EU Richtlinie

tl;dr: Hardcore-Coder lesen hier weiter, wie man daraus resultierende Performance-Probleme vermeidet.

Das Problem dabei: Diese externen Skripte können die Performance der eigenen Website negativ beeinflussen, oder schlimmstenfalls die eigene Website unbenutzbar machen. Zum einen durch die schiere Größe und die Anzahl der HTTP requests. Schlimmstenfalls können nicht reagierende externe Skripte den Aufbau der eigenen Seite extrem verlangsamen oder gar gänzlich verhindern.

Um Performance-Einbußen zu vermeiden oder zumindest zu minimieren, muss jede Einbindung eines externen Skripts genau bedacht werden.

1. Generiert genau dieses Skript wirklich einen Mehrwert für meine Besucher? Wenn nicht: Weglassen! Meine Lösung für Social Media Buttons. :-)
2. Kann ich das Skript eventuell selbst hosten? Kein Server ist zu 100% verfügbar. Jeder Zugriff auf einen fremden Server multipliziert die Ausfallwahrscheinlichkeit.
3. Was passiert beim Ausfall eines Drittservers? Funktioniert meine Site dennoch? Dieses Szenario kann – und sollte – man testen. Dazu weiter unten mehr.
4. Skripte sollten generell den Seitenaufbau nicht beeinträchtigen. Wenn möglich, Skripte (sowohl selbst gehostete, als auch externe) erst nach dem Seitenaufbau laden. Stichwort: Defer Loading

Lösungsansätze

Defer Loading

In manchen Fällen genügt ein "defer" oder "async" Attribut im script-Tag. Beschreibung bei w3schools.com

"Echtes" Defer Loading erfordert leider mehr Aufwand.

Eine Lösung, die auch volle Kontrolle über die Ladereihenfolge mehrerer Skripts gibt, findet sich bei stackoverflow.com

CDN

Script-Bibliotheken wie jQuery werden auf zahlreichen CDNs (content delivery network) zur Verfügung gestellt. Die Verwendung von CDNs kann den Skriptaufruf enorm beschleunigen. CDN Server sind in der Regel sehr schnell. Vor allem aber ist die Wahrscheinlichkeit groß, dass ein Skript, das von einem CDN aufgerufen wird, bereits im Cache des Benutzers liegt, weil es eben auf vielen Seiten eingesetzt wird.
Die Ausfallwahrscheinlichkeit von bekannten CDNs ist darüber hinaus vernachlässigbar gering.

Bekannte Skripte wie jQuery liegen auf verschiedenen CDN Servern. Ein vergleichender Test (siehe weiter unten) kann bei der Wahl des jeweils schnellsten CDN helfen.

Fremdskripte durch eigene, optimierte Skripte ersetzen

Vielleicht die beste Lösung, wenn es denn möglich ist.

Testen, testen, testen

Welchen Einfluß einzelne Skripte auf die Performance einer Seite haben, kann man sehr genau auf webpagetest.org testen. Auf der Startseite gibt es unter Advanced Settings - SPOF sogar die Möglichkeit, den Ausfall einzelner Domains zu simulieren. Also maßgeschneidert für unser Problem.

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.