PageSpeed-Optimierung - Alles, was Sie wissen müssen
Für Google ist der Page Speed einer der etwa 200 Ranking-Faktoren, die die Platzierung in den Suchergebnissen beeinflussen. Der Page Speed einer Seite gibt an, wie lange eine Website braucht, bis sie komplett dargestellt wird.
Das ist nur logisch: Benötigt eine Seite lange, um ihre Inhalte darzustellen, springen Nutzer unter Umständen innerhalb von Sekunden zurück zu den Suchergebnissen. Google möchte seine Nutzer schon mit dem ersten Klick auf die bestmögliche Seite führen. Deshalb wird es als negativ gewertet, wenn Nutzer sofort wieder abspringen. Mit einer schnelleren Seite steigen also die Chancen, eine gute Platzierung zu erreichen. Die Ladezeit ist dabei ein Baustein unter mehreren; wo sie in der Reihenfolge aller Maßnahmen steht, zeigen die Schritte der SEO-Optimierung.
Wo finden Sie Ihren Page-Speed-Wert? Wer keine Stoppuhr und sehr schnelle Finger hat, nutzt besser Googles hauseigenes Tool „Page Speed Insights“. Dort geben Sie einfach die URL der zu prüfenden Website ein und warten die Ergebnisse ab.
Hier geht’s zu Google PageSpeed Insights.
Wenn Sie die Google Page Speed Insights Ihrer Seite abrufen, wird Ihnen anhand eines Ampelsystems gezeigt, welche Punkte verbessert werden können. Ist alles im grünen Bereich, besteht kein Handlungsbedarf. Werden einige Punkte jedoch gelb oder sogar rot markiert, besteht Verbesserungspotenzial. Im Folgenden gehen wir die einzelnen Punkte aus den Page Speed Insights durch und ergänzen weitere Faktoren, die die Ladezeit Ihrer Seite beeinflussen.
1. Bilder optimieren
Auf Seiten, die viele Inhalte über Fotos oder Grafiken übermitteln, können nicht aufgearbeitete Bilder die Ladezeiten unnötig verlängern. Wir können allerdings:
- Nutzen Sie Tools wie Photoshop, um Bilder über den Befehl „Für Web Speichern“ zu verkleinern.
- Wählen Sie ein zum Motiv passendes Bildformat und vergleichen Sie Qualität und Dateigröße. Moderne Formate wie WebP oder AVIF können dafür sinnvoll sein. Prüfen Sie das Ergebnis im tatsächlich verwendeten Seitenlayout.
- Entfernen Sie die Metadaten Ihrer Bilder und Grafiken (z.B. via kraken.io).
Die einfachste Lösung bieten aber die Page Speed Insights selbst an: Rufen Sie die PageSpeed Insights Ihrer Seite auf. Klicken Sie unter „Bilder optimieren“ auf „Fehlerbehebung anzeigen“, dann sehen Sie die Pfade auf dem FTP Server zu den Bildern, die Sie optimieren müssen. Weiter unten auf der Seite haben Sie die Möglichkeit, die Bilder in optimierter Größe herunterzuladen.
Erstellen Sie auf dem FTP Server eine Kopie von der Originaldatei und ersetzen Sie die ursprüngliche Datei daraufhin mit dem optimierten Bild. Durch die Kopie bleibt das Originalbild erhalten und Sie können es bei Bedarf jederzeit wiederherstellen.
Optisch werden Sie durch die Optimierung der Bilder keinen Unterschied bemerken, Sie sparen aber wertvolle Zeit beim Laden der Seite.
Achtung: Die Bildgröße via HTML einzustellen mag zwar die Darstellung anpassen, verkleinert aber keinesfalls die Datenmenge!
2. Browser Caching nutzen
Mit aktiviertem Browser Caching speichert der Browser statische Dateien wie Stylesheets, JavaScript oder Bilder lokal auf dem Rechner der Nutzer. Beim erneuten Aufruf der Website lädt er diese Elemente dann deutlich schneller.
Sollten Sie ein CMS benutzen, kann das Browser Caching über eine Erweiterung aktiviert werden (z.B. WP Fastest Cache bei WordPress). Andernfalls kann es für Apache Webserver mittels .htaccess-Datei aktiviert werden. Dafür muss das Modul „mod_expires“ aktiv sein. Standardmäßig ist das meist der Fall. Sollten sich die Maßnahmen jedoch nicht positiv auf den PageSpeed Ihrer Seite auswirken, überprüfen Sie, ob das Modul aktiviert ist.
Der folgende Code muss in die .htaccess-Datei eingefügt werden:
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-shockwave-flash
</ifmodule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 month”
ExpiresDefault “access plus 14 days
</ifModule>
3. CSS, JavaScript und HTML reduzieren
Als Entwickler oder Designer folgen Sie beim Erstellen eines Dokuments einer bestimmten Syntax, zum Beispiel dem Hausstil des Unternehmens, in dem Sie arbeiten. Dabei entstehen häufig überflüssige Zeichen wie Leerzeichen oder Kommata. Um die Dateigröße zu verringern, minifizieren Sie den Code: Alle unnötigen Zeichen fallen weg, der verbleibende Code steht ohne Umbrüche in einem zusammenhängenden Block.
Zum Reduzieren der Dateien empfehlen wir diese Tools:
- cssminifier für CSS Dateien
- javascript-minifier für JavaScript Dateien
- HTML minifier für HTML Dateien
Alternativ laden Sie die optimierten Dateien wie die Bilder unter den Page Speed Insights herunter und ersetzen sie via FTP.
4. Komprimierung aktivieren
Mit Komprimierung verkleinern Sie CSS-, HTML- und JavaScript-Dateien, die trotz Minifizierung noch immer groß sind, ein weiteres Mal. Der Webserver stellt diese Dateien im gzip-Format bereit, sodass der Browser sie schneller herunterlädt. Auch andere Dateien können mit Gzip verkleinert werden, was wiederum Bandbreite einspart.
Genau wie das Browser Caching kann die gzip-Komprimierung über Erweiterungen im CMS oder bei Apache Webservern über die .htaccess-Datei aktiviert werden. Für letzteres muss folgender Code hinzugefügt werden:
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
Aber Vorsicht: Bilder sollten Sie nicht mit Gzip komprimieren, dafür nutzen Sie die bereits oben genannten Werkzeuge.
5. Unnötige Weiterleitungen vermeiden
Mehrfache Redirects (Weiterleitungen) sollten Sie möglichst vermeiden. Jede Weiterleitung erhöht die Wartezeit für den Nutzer, bis der HTTP-request-response-Zyklus durchgelaufen ist. Diese Zeit sparen Sie ein, indem Sie direkt auf das endgültige Ziel verlinken. Nehmen Sie immer den kürzesten Weg.
Weitere Informationen zu Weiterleitungen gibt es in unserem Wiki.
404 und ähnliche Fehler-Statuscodes sollten Sie ebenfalls vermeiden. Der erste Schritt dahin ist das Tilgen von toten Links, also von Links zu Inhalten, die nicht mehr existieren.
6. JavaScript asynchron laden
Damit Skripte den Aufbau Ihrer Seite nicht blockieren, platzieren Sie JavaScript generell am Ende des Codes. Ist das nicht möglich, laden Sie JavaScript über das Async-Attribut verzögert und umgehen so eventuelle Probleme.
Matt Cutts erklärt in diesem Video wie Google den Page Speed berechnet:
- Die Toolbar-Aussage im eingebetteten Matt-Cutts-Video beschreibt einen historischen Stand. Für eine heutige Untersuchung sollten Sie aktuelle Messdaten und die dokumentierten Leistungskennzahlen verwenden.
- Google bezieht auch die Internetverbindung verschiedener Nutzer aus verschiedenen Ländern in diesen Wert mit ein.
- Auch die im Video genannte Quote von einer betroffenen unter 1.000 Seiten ist eine damalige Aussage. Sie erlaubt keine Einschätzung, ob die Ladezeit Ihrer heutigen Website Rankings oder Nutzung beeinträchtigt. Messen Sie die konkrete Seite.
- Weiterhin sagt er, dass es immer sinnvoll ist, den Nutzern Inhalte möglichst schnell zu liefern, und dass sich eine Verbesserung des Page Speeds auszahlt. Für die Suchmaschinenoptimierung ist das eine klare Ansage.
7. Inhalte nachladen
Um nicht die gesamte Seite in einem Stück bereitstellen zu müssen, können Sie Inhalte mit AJAX und sogenanntem Lazy Load (faules oder müßiges Laden) erst beim Scrollen nachladen. So verkürzen Sie die initiale Ladezeit Ihrer Website erheblich. Da ohnehin nicht alle Nutzer die gesamte Seite von oben bis unten betrachten, sparen Sie mit Lazy Load Ressourcen ein.
Vor allem im mobilen Bereich sollten Sie diese Funktion nutzen: Durch die schmalen Smartphone-Bildschirme entstehen bei Seiten mit Responsive Design schnell sehr „lange“ Inhalte. Da die Absprungrate bei mobilen Nutzern noch höher ist, sollten Sie hier besonders auf kurze Ladezeiten achten.
8. Server Response Time verbessern
Die Zeit, die Ihr Server zum Antworten braucht (Response Time), hängt von mehreren Faktoren ab: von der Menge an Inhalten, die jede Seite lädt, von der Zahl der Besucher, von der serverseitig eingesetzten Software und vom gewählten Hosting-Paket. An genau diesen Punkten setzen Sie an, um die Response Time zu verbessern. Nutzen Sie zur Überprüfung zum Beispiel dieses Tool. Übrigens: Ein guter Wert für die Response Time liegt bei unter 200ms.
9. Kein Inline JavaScript oder CSS benutzen
Inline CSS setzen Sie nur ein, wenn keine andere Methode bleibt. Vermeiden Sie es außerdem, CSS oder JavaScript überhaupt im HTML- oder PHP-Dokument anzulegen. Besser ist, wenn für CSS und JavaScript separate Dateien angelegt und diese in ein Webdokument geladen werden.
Die Vorteile einer einzigen Datei liegen auf der Hand: Möchten Sie etwas an CSS (oder JavaScript) ändern, finden Sie den gesamten Code an einer Stelle. Ist dort alles sinnvoll ausgezeichnet, erleichtert das die Arbeit. Aber: Jedes Dokument, das auf dieses Stylesheet zugreift, lädt es in seiner Gesamtheit. Dabei zählt nicht, ob das CSS oder JavaScript auf der jeweiligen Seite überhaupt genutzt wird.
Einzelne CSS- und JavaScript-Dateien je Dokument bieten den Vorteil, dass nur die Styles oder Skripte geladen werden, die auch benötigt werden. Mit diesem System müssen Sie jedoch sorgfältig arbeiten, damit auf dem Server kein Chaos an Dateien entsteht.
10. Plugins beobachten
Wird ein Content Management System (CMS) benutzt, können Plugins (wie Galerien oder Sidebar-Elemente) die Ladezeit erhöhen. Halten Sie Ihre Plugins immer Up-To-Date, um mit der neuesten Version des CMS kompatibel zu sein. Deaktivieren Sie außerdem Plugins, die Sie nicht nutzen.
Um zu prüfen, ob installierte Plugins den Page Speed ausbremsen, schalten Sie die Plugins nacheinander ab. So erkennen Sie, welches Plugin die Ladezeit verlängert.
