Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

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

PHP Quellcode
Ein Ausschnitt aus dem Quellcode einer typischen Webseite.

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

Beispiele für Fremdskripte:

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
Für das Beispiel "HolidayCheck" habe ich das in meinem Blog beschrieben.

"Echtes" Defer Loading erfordert leider mehr Aufwand. Dieser Artikel [Englisch] beschreibt die Technik.

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

Einen Musterfall habe ich hier beschrieben: Cookie Hinweis selbst erstellt

Warum habe ich den Mehraufwand betrieben? Weil alle verfügbaren Fremdskripte extrem aufgebläht waren, teilweise sogar fehlerbehaftet, und nicht meinen Designwünschen entsprachen.

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.

Ihr Kommentar zu diesem Artikel:

Über Ihren Kommentar oder Ihre Frage zu diesem Artikel freue ich mich. Ich behalte mir jedoch vor, Einträge wider die guten Sitten, unsinnige Einträge, oder Spam kommentarlos zu entfernen.