Optimierung der Ladegeschwindigkeit einer Website

Heute werden wir am Beispiel dieser Website zeigen, wie man die Qualität und Ladegeschwindigkeit für den Service PageSpeed Insights optimieren kann.

Was ist PageSpeed Insights?

PageSpeed Insights ist ein kostenloses Tool von Google, das zur Analyse der Leistung von Webseiten dient. Es bewertet die Ladegeschwindigkeit von Seiten und gibt Empfehlungen zur Verbesserung, um die Leistung und Benutzererfahrung zu optimieren. Der Service ist sowohl für mobile als auch für Desktop-Geräte verfügbar und bewertet Seiten anhand verschiedener Kriterien, wobei detaillierte Berichte und Empfehlungen bereitgestellt werden.

PageSpeed Insights hilft Webmastern, Entwicklern und SEO-Spezialisten zu verstehen, wie ihre Seiten in realen Bedingungen funktionieren und welche konkreten Schritte unternommen werden können, um Verbesserungen zu erzielen. Die Verbesserung der vom Tool vorgeschlagenen Kennzahlen wirkt sich nicht nur positiv auf die Benutzererfahrung aus, sondern trägt auch dazu bei, die Positionen in den Suchergebnissen von Google zu verbessern.

Erste Optimierung der Website

Beim Erstellen der Vorlage habe ich folgende Prinzipien beachtet:

• Markup mit reinem HTML und CSS.
• Hinzufügen von Interaktivität nur mit reinem JavaScript.
• Verzicht auf Frameworks wie Bootstrap und jQuery.
• Lokales Hosting der Schriftarten auf dem Server mit der Website-Vorlage.
• Verwendung von weboptimierten Schriftformaten wie WOFF.

Durch den Verzicht auf Frameworks und die Verwendung von reinem HTML, CSS und JS konnte die Größe der beim Initialisieren der Website geladenen Dateien erheblich reduziert werden, was sich positiv auf die Ladegeschwindigkeit auswirkt.

Der Verzicht auf das Speichern von Schriftarten auf Drittanbieterdiensten wie Google Fonts wirkt sich positiv auf die Ladegeschwindigkeit der Website aus. Bei korrekter Konfiguration blockiert das Laden der Schriftarten nicht die allgemeine Ladewarteschlange und verlängert die Ladezeit der Website nicht.

Durch die Verwendung moderner Schriftformate wird der Datenverkehr erheblich reduziert. Zum Beispiel wiegt dasselbe Schriftformat im TTF-Format 103 KB, im WOFF2-Format jedoch nur 15 KB — das ist fast siebenmal weniger!

Für die SEO-Optimierung installieren wir das Plugin AIO SEO, nehmen die erste Konfiguration vor und senden die Website zur Überprüfung.

Ergebnisse nach anfänglicher Optimierung

Wie Sie sehen, haben schon diese einfachen Schritte fast perfekte Ergebnisse erzielt, und das ganz ohne Caching- und Datenkomprimierungseinstellungen.

Wir richten das Caching mit dem Plugin WP Fastest Cache ein und sehen uns an, welche Auswirkungen dies hat. Das Caching hat den Ladegeschwindigkeitsindex der Website leicht erhöht, was erfreulich ist.

Fehlerbehebung

Die Überprüfung ergab drei unkritische Probleme in Bezug auf die Barrierefreiheit:

• Die Hintergrund- und Vordergrundfarben der Links zu den Website-Kategorien sind nicht kontrastreich genug.
• Der Linktext zu meinem LinkedIn-Profil ist für Screenreader nicht erkennbar.
• Die Header-Elemente sind nicht in absteigender Reihenfolge angeordnet.

Wir beginnen mit der einfachsten Korrektur: den Linktext für Screenreader erkennbar zu machen.

Warum ist dieses Problem aufgetreten? Wenn wir uns das HTML-Markup des Links ansehen, stellt sich heraus, dass zwischen den Öffnungs- und Schlusstags <a></a> kein Text vorhanden ist, was ein Problem darstellt. Um die Markup-Struktur nicht zu ändern und Zeit zu sparen, habe ich einfach das Attribut „title“ zu diesem Link hinzugefügt. Das Problem ist nun gelöst.

Das nächste Problem betrifft die Reihenfolge der Header.

Was ist hier falsch? Auf der Seite werden <h1>– und <h2>-Header verwendet, im Footer jedoch ein <h5>. Die Header sind nicht in der richtigen Reihenfolge, was dem Validierungsdienst nicht gefällt. Die Lösung ist einfach: Ersetzen Sie die <h5>-Header in der Vorlage durch <h3> und nehmen Sie die gleiche Änderung in den CSS-Dateien vor. Sobald die Änderungen vorgenommen sind, können wir dieses Problem abhaken.

Das letzte Problem, das ich gelöst habe, betrifft den Kontrast zwischen dem weißen Text des Kategorienamens, zu dem der Beitrag gehört, und seinem roten Rahmen. Der Kontrast beträgt derzeit 3,86, während das Minimum bei 7,1 liegt. Mithilfe eines Kontrastrechners habe ich festgestellt, dass die rote Farbe etwas dunkler sein muss und die Schriftgröße erhöht werden sollte.

Nun ist auch das letzte Problem behoben. Jetzt wird die Website in den Augen von Google so gut wie möglich aussehen.

Ergebnisse der Website-Optimierung