Geschwindigkeit ist immer noch Trumpf
Die Geschwindigkeit, die eine Website zum Laden benötigt, zählt nach wie vor zu den wichtigsten Stellschrauben bei der Suchmaschinenoptimierung. Nicht nur Besucher:innen, sondern gerade Suchmaschinen ziehen die Zeit, die beim Aufruf einer Seite ins Land streicht, als wichtiges Bewertungskriterium heran. Ein schlanker und komprimierter Code und der Einsatz von Mechanismen zum Caching zählen ebenso zu den erprobten Lösungsansätzen für gute Ladezeiten und eine schnelle Webpräsenz wie die Verwendung komprimierter Bilder.
In fünf Schritten zur Ladezeitenoptimierung
Webspace
Erster Ausgangspunkt ist der passende Server(platz), hinsichtlich Umfang und Ausstattung sollte dieser zum Projekt passen. Über die Datei .htaccess lassen sich auf Apache das Komprimieren von Inhalten, bevor sie an den Browser übertragen werden und das Setzen von Headern und die Cache-Kontrolle von Grafiken, Schriften u.ä. einrichten. Mittels H2PushResource kann, falls erforderlich, das Laden von einzelnen Dateien nach hinten aufgeschoben werden.
WordPress
Sowohl Page Builder als auch fertige Multi Purpose Themes statt individueller Programmierung haben die Tendenz einen gewaltige Overhead, ein aufgeblähtes Backend und dadurch eine eingeschränkte Performance mit sich zu bringen, weshalb ich ausschließlich selbst erstellte Themes statt Produkte von der Stange nutze.
Hinsichtlich Plugins stellt sich als Erstes immer die Frage, ob dieses überhaupt erforderlich ist oder es sich um eine Aufgabenstellung handelt, die problemlos anderweitig, beispielsweise in der functions.php, erledigt werden kann. Überprüfen Sie daher die Nutzung in der Website und entfernen Sie diejenigen, die nicht mehr benötigt oder verwendet werden.
Bilder
Für ein optimales Laden der Website sollten Bilder nicht nur im passendem Format (Höhe x Breite) entsprechend dem Endgerät des Nutzers bereitgestellt werden, sondern auch neuere Dateiformate berücksichtigt werden. Ein einmalig zu installierendes Tool wie das Plugin WebP Express liefert entsprechend automatisch generierte Bilder, ältere Browser erhalten die gewohnten Formate. Mit Smush kann man Bilder von unnötigen Dateiinformationen befreien.
Außer dem Headerbild bzw. Bildern, die im sofort sichtbaren Bereich einer Seite eingesetzt werden, verwende ich natives loading="lazy", sodass diese erst dann geladen werden, wenn Besucher:innen zu diesen hin scrollen.
Zubehör
Asynchrones Laden von Skripten und Schriften, wann immer möglich. Ich bevorzuge defer da dann die Reihenfolge und somit die Abhängigkeiten eingehalten werden. Minifizierung des Quelltextes, der Stylesheets und Javaskripten, d.h. Entfernung alle unnötigen Zeichen aus dem Quellcode. Dies erledige ich mit wp_html_compression bzw. bereits während der Programmierung mit Atom sowie Visual Studio Code. Ggf. sollten Schriften für das Erscheinungsbild mit rel="preload" vorgeladen werden. Analog wird mit rel="stylesheet preload" as="style" mit Stylesheets verfahren. Nur wichtige Dateien landen im Header, der Rest verschwindet im Footer.
Wann immer möglich binde ich Skripts und Styles (z.B. für Karten, Formulare, Tabellen etc.) nur dann ein, wenn diese tatsächlich benötigt werden, anstatt diese durch alle Seiten mitzuschleppen. In der Regel nehme ich hierfür entsprechende Einträge direkt in der functions.php von WordPress vor, um diese nur dann zu laden, wenn wir sie wirklich brauchen.
Page Speed
Die Geduld von Besucher:innen einer Website ist sehr begrenzt: rund die Hälfte ist nicht mehr interessiert, wenn die Ladezeit bei über drei Sekunden liegt. Time to First Paint, d. h. die Zeit während der Nutzer erst mal gar nichts sieht und Time to First Contentful Paint, gemeint ist der Zeitpunkt ab dem erste Inhalte sichtbar sind, sollten so gering wie möglich sein. Hauptaugenmerk liegt auf dem Largest Contentful Paint. Dieser Wert bildet das größte Element im sofort sichtbaren Bereich der Website, dem sogenannten above the Fold und dessen Rendering- bzw. Ladezeit ab.
Cache
Um ein schnelleres Laden zu ermöglichen, werden die einzelnen Seiten mittels eines Cache ohne Datenbankabfragen oder spontane Komprimierung ausgeliefert, anstatt Daten für jeden Besucher dynamisch zu generieren. Caching in WordPress erledige ich beispielsweise mit den schlanken Plugins Cache Enabler oder Hyper Cache. Die im Cache vorgehaltenen statischen Seiten aktualisieren sich automatisch entsprechend der eingestellten Anzahl an Stunden oder Tagen bzw. bei einer Änderung oder Neueinstellung eines Beitrags bzw. einer Seite.
Es gibt Plugins mit wesentlich mehr Funktionen wie LiteSpeed bzw. W3 Total Cache, die auf einer bzw. drei Millionen Sites genutzt werden. Ich habe es lieber minimalistisch, da ich alles, was die Plugins zusätzlich können, bereits vorher erledigt habe. Die häufig angebotene Kombination von bereits minifizierten CSS- bzw. JS-Dateien darf auf modernen Servern als obsolet gelten.
Nutzer und Suchdienste glücklich machen
Die genannten Maßnahmen legen die Basis für eine gute technische Optimierung der Website, die Besucher als auch Suchdienste schätzen und langfristig Ihren Erfolg sichern werden. Daneben gibt es weitere Ansätze zur Verbesserung, die ich grundsätzlich bei Umsetzung eines Webprojektes einfließen lasse.
Cumulative Layout Shift
Hierbei handelt es sich im Wesentlichen um einen Rankingfaktor der Verschiebungen des Layouts, während die Seite lädt, misst. Meine bisherige Best Practice zur Vermeidung ist, dass Bilder Größenangaben bekommen und mehrere Versionen eines Bildes je nach Größe des Endgeräts angeboten werden. Insbesondere im Header macht bei Bildern noch ein aspect ratio, also die Definition des Seitenverhältnisses (16:9, 4:3 etc.) Sinn. Schriften sowie die Styles für den Header werden im Kopfbereich geladen. Das Attribut font-display ermöglicht, in das Verhalten beim Rendern von benutzerdefinierten Schriften einzugreifen. Mit diesen Maßnahmen müssen sich Nutzer:innen dann nicht neu orientieren, weil beispielsweise Teile der Seite wegen eines nachgeladenen Bildes nach unten rutschen. Anzeigen (Banner bzw. Ads), Einbettungen wie Iframes u.ä. vermeide ich daher an dieser Stelle oder lade zumindest einen Platzhalter vor.
Sie brauchen Ideen für die Optimierung Ihrer Website?
Sichern Sie sich ganz unkompliziert hier Ihr kostenfreies Vorgespräch
Bei sorgfältiger Planung und Realisierung des Webprojekts lassen sich alle Schritte für eine optimale Ladezeit, mit Ausnahme der Umwandlung der Bilder in das Format WebP und der Bereitstellung des Cache, in WordPress ohne Plugins ausführen. Und was kann ich für Sie tun?