Technisches SEO: So optimiert ihr die Ladezeiten eurer Webseiten

Mindestens 90 von 100 Punkten, sowohl in der Desktop- als auch in der Smartphone-Ansicht: Das sollten eure Webseiten in Googles PageSpeed-Insights-Test herausholen, damit der Suchmaschinenriese euren Online-Auftritt als schnell ladend einstuft. Wie ihr diesen Wert verbessern könnt, habe ich für euch zusammengefasst.

Für eine größere Ansicht in das Bild klicken bzw. Smartphone quer halten:

PageSpeed-Insights-Auswertung am Beispiel meines Blogs

PageSpeed Insights ist ein kostenloses, offizielles Google-Tool, das ihr ohne Anmeldung nutzen könnt. Für meinen Blog liefert es das oben abgebildete Ergebnis: Bei der Desktop-/Laptop-Ansicht kann ich mich über die volle Punktzahl freuen (in der mobilen Ansicht sind es 96 Punkte).

Was sagen diese Werte aus?

➤ Leistung ist der Gesamtwert (maximal 100) und berechnet sich aus den darunter genannten Messwerten. Diese werden unterschiedlich stark gewichtet (Prozentangabe in Klammern).

Die Detail-Werte:

➤ First Contentful Paint (10 %): Dieser Wert misst, ab wann ein erster Inhalt (nicht der gesamte Inhalt) einer Webseite für Nutzer sichtbar ist (z. B. die obere Navigation der aufgerufenen Webseite).

➤ Speed Index (10 %): Er misst, wie schnell die Inhalte einer Seite sichtbar dargestellt werden.

➤ Largest Contentful Paint (25 %) misst, wie schnell der Haupt-Inhalt einer Webseite geladen wird. Vom ersten Laden bis zu dem Moment, wenn der größte Text- oder Bild-Block der Webseite zu sehen ist.

➤ Total Blocking Time (30 %): Dieser Wert wiegt am schwersten. Er misst, wie lange es dauert, bis die ladende Webseite durch den Nutzer bedienbar ist (z. B. durch Maus-Klick, Screen-Berührung, Tastatur-Befehl). Den thematisch verwandten Wert "Time to Interactive" berücksichtigt Google künftig nicht mehr.

➤ Cumulative Layout Shift (25 %) misst, wie stark eine geladene Webseite "hüpft", sich der Inhalt also plötzlich nochmal nach oben oder unten verschiebt. Ihr besucht eine Webseite und wollt einen Link klicken, als plötzlich die Webseite springt und ihr versehentlich auf einen anderen Link klickt, den ihr gar nicht klicken wolltet? Das ist ein (für den User hochgradig ärgerlicher) Layout Shift. Zu diesen Layout Shifts kommt es, wenn Webseiten-Inhalte asynchron (verzögert) geladen werden (z. B. Bilder, Videos, Werbe-Banner, etc.). Wie der Cumulative-Layout-Shift-Wert berechnet wird, erfahrt ihr auf den Seiten von Google Developers.

Webseiten-Ladezeiten: So optimiert ihr eure PageSpeed-Insights-Werte

Euer PageSpeed-Insights-Leistungswert ist niedriger als 80 oder gar rot? Dann solltet ihr handeln. Mit dieser 10-Punkte-Checkliste könnt ihr die Seitenladezeiten eures Online-Auftritts beschleunigen:

1. Requests reduzieren: Je mehr Ressourcen (Bilder, Schriftarten, CSS- und JavaScript-Dateien) eine Webseite enthält, desto mehr Anfragen (Requests) muss der Browser des Users an den Webserver stellen. Je mehr Anfragen es gibt, desto länger lädt die Seite. Deshalb solltet ihr (bzw. euer Webmaster) prüfen, ob auf Elemente verzichtet werden kann.

2. Die Zahl der Schriftarten verringern: Mehr als zwei Schriftarten (Webfonts) solltet ihr nicht auf einer Website einsetzen. Diese sollten auch nicht von einem externen Server nachgeladen werden müssen. Auf der sicheren Seite seid ihr mit Systemschriften (z. B. Arial, Verdana, Trebuchet MS, Helvetica, Georgia, Times New Roman), da diese auf Windows- und MacOS-Rechnern vorinstalliert sind.

3. Bildergröße optimieren: Je größer die Bilder auf euren Webseiten, desto langsamer laden eure Seiten. Faustregel: Nutzt Bilder, die höchstens 150 Kilobyte groß sind. Tools wie imagecompressor.com oder tinypng.com helfen euch, Bilder verlustfrei zu verkleinern.

4. Content Delivery Network (CDN) nutzen: Ein CDN ist ein Verbund von Servern, die weltweit verteilt sind. Sie können statische Website-Dateien (CSS, JavaScript, Bilder, Schriftarten) zwischenspeichern. Bei einer Browser-Anfrage werden diese Dateien dann von dem Server ausgeliefert, der geografisch am nächsten gelegen ist. Nur die HTML-Datei wird noch vom eigenen Server übermittelt.

5. Daten auf dem Server komprimieren: Mittels des Kompressions-Programms gzip lassen sich über den htaccess-Eintrag HTML-, CSS- und JavaScript-Dateien auf dem Server zusammenfassen. 

6. HTML-, CSS- und JavaScript-Dateien minifizieren: Die sogenannte Minifikation entfernt im Quellcode all das, was für die Ausführung des Codes nicht notwendig ist (z. B. Zeilenumbrüche, Leerzeichen, Einrückungen). Eine Minifikations-Tools-Übersicht findet ihr auf den Seiten von wp-rocket.me.

7. Lazy Loading bedeutet sinngemäß "verzögertes Laden". Es stellt sicher, dass auf einer Webseite zunächst nur die Bilder im sichtbaren Bereich (above the fold) geladen werden. Anders formuliert: Lazy Loading lässt Bilder erst dann laden, wenn sie benötigt werden. Das wiederum beschleunigt das Laden der Webseite. Alle Bilder im nicht-sichtbaren Bereich werden nachgelagert geladen. Die Implementierung erklärt ionos.de unter dem Titel "Wie lässt sich Lazy Loading umsetzen".

8. Kritisches CSS extrahieren: Nicht benötigte CSS-Dateien blockieren das Rendern einer Webseite (wörtlich bedeutet "to render" auf Deutsch "erbringen", gemeint ist das Umwandeln von Code in eine interaktive Webseite). CSS-Anweisungen für den sichtbaren Bereich (kritisches CSS) können extrahiert werden, um vorrangig geladen zu werden. Eine Anleitung findet sich auf den Seiten von Google Developers. 

9. JavaScript asynchron laden: Findet der Browser JavaScript-Code in einem HTML-Dokument, will er diesen zuerst ausführen, was die Ladezeit erhöht. Dies könnt ihr umgehen, indem ihr den JavaScript-Code verzögert (asynchron) laden lasst. Erreichen lässt sich das über die Code-Attribute "async" oder "defer".

10. Datenbank aufräumen: Mit der Zeit sammeln sich nicht mehr benötigte Eintragungen in einer Datenbank an. Sie sollten gelöscht werden.

Ladezeiten optimieren: Es lohnt sich

User surfen flüchtig, weshalb langsam ladende Webseiten zum K.-o.-Kriterium für den Website-Besuch werden können. Das gilt besonders für Online-Shops, genauso aber für jeden anderen Online-Auftritt. 

Für Google ist die Ladezeit zudem ein Ranking-Faktor. Deshalb: Drückt auf die Tube – bis PageSpeed Insights euch einen Leistungs-Wert von mindestens 80 anzeigt.

Viel Erfolg!

Link-Tipps: 

• PageSpeed Insights von Google
• Mobile Ladezeiten: So sprintet eure Website auf dem Smartphone
• So optimiert ihr eure Bilder für die Google-Suche
• SEO: Der optimale JavaScript-Einsatz auf euren Webseiten [Teil 1]
• SEO: Der optimale JavaScript-Einsatz auf euren Webseiten [Teil 2]
• Technical SEO auf einen Blick: Die 15-Punkte-Checkliste