Anzahl der Requests reduzieren
Eingebundene Skripte und CSS-Dateien aufräumen
Jedes Theme, die meisten Plugins sowie auch WordPress selbst binden ihre eigenen JavaScript- und CSS-Dateien ein. Für jede dieser Dateien bedeutet einen neuen Request, also eine Anfrage an den Server. Und jede dieser Anfragen kostet ein paar Millisekunden. Das klingt erstmal nicht viel, aber bei der Masse an Dateien häuft sich dann doch einiges an.
Konventionelle Performance-Plugins reduzieren diese Anfragen, indem sämtliche .js- und .css-Dateien zusammengefasst werden. So gibt es von jedem Dateityp nur noch eine einzelne Datei, die alles beinhalten. Dadurch wird die Request-Menge tatsächlich erfolgreich reduziert, allerdings sind dann nach wie vor sämtliche Skripte und Stile eingebunden. Selbst, wenn diese eventuell gar nicht benötigt werden.
Sinnvoller ist es, genau zu analysieren, wann welches Skript und welcher Stil tatsächlich benötigt wird, und diese nur dann auch einzubinden. Ein gutes Beispiel hierfür sind Kontaktformulare. Diese werden in den meisten Fällen mittels Plugins wie Contact Form 7 oder Ninja Forms realisiert. Diese plugins wiederum binden, sobald sie aktiviert sind, auf jeder Seite ihre Skripte und Stile ein, auch wenn vielleicht nur auf einer Unterseite ein Formular vorhanden ist.
Ich sorge also dafür, dass diese Dateien nur dort eingebunden werden, wo ich die wirklich benötige. Dadurch wird die Anzahl der Requests, je nach Menge der verwendeten Plugins, teils deutlich reduziert und die Ladezeit der Webseite teils um mehrere hundert Millisekunden bis Sekunden reduziert werden.
Skripte und Stile im HTML-Code einbetten
Dieser erste Schritt bringt zwar schon einiges, kann aber noch deutlich optimiert werden. Die Requests lassen sich unter Umständen sogar komplett vermeiden, indem man die Dateien nicht als externe Ressourcen verlinkt sondern deren Inhalte direkt in den HTML-Code einbettet.
Hinweis: zu großer HTML-Code kann sich ebenfalls negativ auf die Geschwindigkeit der Seite auswirken, da es länger dauert, bis die HTML-Seiten vom Browser heruntergeladen ist. Eine konsequente Optimierung der benötigen Skripte ist also zwingend notwendig. Das Einbetten der Datei-Inhalte direkt in die Seite bringt einen zusätzlichen Vorteil: jedes Skript, jeder Stil lässt sich exakt dort einbinden, wo er benötigt wird.
Was bedeutet das? Die meisten Themes sind so programmiert, dass sämtliche Stile und sämtliche Skripte in jeweils eine CSS- und eine JS-Datei geschrieben werden. Heißt also, dass immer sämtliche Stile und Skripte des Themes auf einmal geladen werden müssen.
Da nun aber die Inhalte der Dateien ohnehin direkt im HTML eingebettet werden sollen, lassen sich diese auch leicht aufteilen in einzelne Bestandteile. Und diese können nun genau dort eingebunden werden, wo sie erstmalig benötigt werden. Also: in der Kopfzeile werden sämtliche Skripte und Stile eingebunden, die die Kopfzeile benötigt. Nicht mehr und nicht weniger. Und so funktioniert das für nahezu jedes Inhaltselement jeder Seite.
Auf diese Weise reduziert sich nicht nur die Ladezeit der Webseite, auch die optische Benutzererfahrung wird verbessert, da die "Above the Fold"-Informationen schneller geladen werden können. "Above the Fold", das ist alles, was man direkt beim Laden einer Webseite auf dem Bildschirm sieht. Alles was erst durch scrollen sichtbar wird, muss erst dann geladen werden, wenn die wichtigen, sichtbaren Elemente fertig sind. Wenn ein Besucher auf deine Webseite kommt, sieht er also durch diese Optimierung in besten Fall in Millisekunden-Schnelle direkt die fertige Seite, wie du sie haben willst - ohne, dass sich die Inhalte während des Ladevorgangs noch mehrfach unschön verschieben.
Lazyload
Viele Performance-Plugins nutzen diese Funktion. Aber was ist das eigentlich?
Lazyload bedeutet, dass gewisse Ressourcen wie beispielsweise Grafiken und Videos erst dann geladen werden, wenn sie benötigt werden, also wenn sie im Sichtfeld des Benutzers ist. Beim ersten öffnen der Seite werden also nur die Bilder vom Server heruntergeladen, die im aktuellen Bildschirm-Ausschnitt sichtbar sind. Scrollt der Nutzer nach unten, werden nach und nach alle Grafiken geladen, die durch das Scrollen ins Sichtfeld wandern. Auf diese Art und Weise steigt die Geschwindigkeit der Webseite, da zu Beginn weniger Ressourcen geladen werden müssen.
Da ich kein Plugin verwende, welches diese Funktion bereits beinhaltet, muss ich diese händisch einbinden. Das ist aber tatsächlich leichter, als es klingt, denn: es gibt zahlreiche fertige JavaScript-Libraries, die das ermöglichen. Es muss also einfach eine davon verwendet werden, Installationsanleitungen sind dort in der Regel vorhanden.
Bei meinen Themes reicht mir die Funktion dieser Libraries allerdings nicht aus, weshalb Ich mir mein eigenes Lazyload-Skript programmiert habe. Mit diesem ist es auch möglich, neben Grafiken, Videos und Hintergrundbildern zusätzlich ganze HTML-Abschnitte dynamisch erst dann zu laden, wenn diese ins Sichtfeld des Nutzers gescrollt werden. Das verringert zum einen die Download-Größe der Webseite, da zu Beginn weniger HTML-Code heruntergeladen werden muss (mehr dazu im zweiten Teil dieser Beitragsreihe). Zum anderen lassen sich beispielsweise Google Maps-Einbindungen erst im Nachhinein laden, die ansonsten den Aufbau der Webseite durch zusätzlich eingebundene JavaScript-Dateien bremsen oder gar blockieren würden.