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 teilt uns mit wie lange eine Website braucht, bis sie komplett dargestellt wird.
Das ist nur logisch: Benötigt eine Seite lange um ihre Inhalte darzustellen, springen User unter Umständen innerhalb von Sekunden zurück zu den Suchergebnissen. Google möchte seinen Nutzern 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.
Wo finden wir unseren Page Speed Wert? Wer keine Stoppuhr und sehr schnelle Finger hat nutzt besser Google hauseigenes Tool „Page Speed Insights“. Dort gibt man einfach die URL der zu prüfenden Website ein und wartet die Ergebnisse ab, die ausgegeben werden.
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, können Sie sich entspannt zurücklehnen. Werden einige Punkte jedoch gelb oder sogar rot markiert, besteht Verbesserungspotenzial. Im Folgenden wollen wir die einzelnen Punkte, die in den Page Speed Insights aufgeführt werden, und auch weitere Punkte, die die Ladezeit Ihrer Seite beeinflussen, einmal genauer unter die Lupe nehmen.
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:
- Tools wie Photoshop nutzen um Bilder über den Befehl „Für Web Speichern“ zu verkleinern.
- Uns an die gängigen Dateiformate für das Web halten (.jpg, .png oder .gif), welche alle die Möglichkeit bieten gute Qualität und relativ kleine Dateigröße zu vereinen.
- Die Metadaten unserer Bilder und Grafiken entfernen (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. Wenn Sie unter „Bilder optimieren“ auf „Fehlerbehebung anzeigen“ klicken, werden Ihnen die Pfade auf dem FTP Server angezeigt, über die Sie zu den Bildern kommen, die optimiert werden 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 zur Sicherheit erhalten und kann bei Bedarf zu einem späteren Zeitpunkt ohne Probleme wiederhergestellt werden.
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
Dateien wie Stylesheets, JavaScript oder Bilder (alle Elemente, die sich nicht verändern, statisch sind) werden durch aktiviertes Browser Caching im Speicher des Computers gelagert und können so beim erneuten Aufrufen der Website schneller geladen werden.
Sollten Sie ein CMS benutzen, kann das Browser Caching eventuell ü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. Dies ist standartmäßig 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 folgt man beim Erstellen eines Dokuments einer bestimmten Syntax (z.B. nach dem Hausstil des Unternehmens in dem man arbeitet). Dies erzeugt manchmal überflüssige Zeichen, wie Leerzeichen oder Kommata. Um die Größe dieser Dateien zu optimieren werden sie reduziert (minified). Das bedeutet, dass alle unnötigen Zeichen entfernt werden und der Code zu einer Masse verschmilzt.
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 können die optimierten Dateien auch wie die Bilder unter den Page Speed Insights heruntergeladen und via FTP ersetzt werden.
4. Komprimierung aktivieren
Durch Komprimierung können CSS, HTML und JavaScript Dateien die trotz Reduzierung noch immer eine enorme Größe haben, weiter verkleinert werden. Dateien werden dabei vom Webserver im gzip-Format bereitgestellt und können schneller heruntergeladen werden. 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 nicht mit Gzip komprimiert werden, dafür nutzen wir die bereits oben genannten Werkzeuge.
5. Unnötige Weiterleitungen vermeiden
Die Überschrift sagt alles: Es sollten unter allen Umständen mehrfache Redirects (Weiterleitungen) vermieden werden. Jede Weiterleitung erhöht die Wartezeit für den Nutzer bis der HTTP request-response Zyklus durchgelaufen ist. Das ist Zeit, die wir auf logischem Wege einsparen können und wollen. Es gilt immer den kürzesten Weg zu nehmen.
Weitere Informationen zu Weiterleitungen gibt es in unserem Wiki.
404 und ähnliche Fehler-Statuscodes sollten ebenfalls vermeiden. Der erste Weg dahin wäre das tilgen von toten Links, also Links zu Inhalten die nicht mehr existieren.
Um zu verhindern, dass Skripte den Aufbau unserer Seite blockieren, wird JavaScript generell am Ende des Codes platziert. Sollte das nicht möglich sein kann JavaScript über das Async-Attribut verzögert geladen und so eventuelle Probleme umgangen werden.
Matt Cutts erklärt in diesem Video wie Google den Page Speed berechnet:
- Um den Page Speed einer Seite zu bestimmen nutzt Google vor allem Daten aus der Toolbar.
- Google bezieht auch die Internetverbindung verschiedener Nutzer aus verschiedenen Ländern in diesen Wert mit ein.
- Matt Cutts gibt auch Entwarnung: Nur etwa eine unter 1000 Seiten hat ein derartiges Problem mit dem Page Speed, dass das Ranking beeinflusst wird.
- Weiterhin sagt er, dass es immer eine gute Idee ist den Nutzern Inhalte möglichst schnell zu liefern und dass eine Verbesserung des Page Speeds sich immer auszahlt. Für die Suchmaschinenoptimierung ist das eine tolle Aussage.
Um nicht die gesamte Seite in einem Stück bereitstellen zu müssen gibt es die Möglichkeit mit AJAX und sogenanntem Lazy Load (faules oder müßiges Laden) Inhalten erst beim Scrollen nachzuladen. So kann die initiale Ladezeit unser Website erheblich verkürzt werden. Da ohnehin nicht alle Nutzer die gesamte Seite von oben bis unten betrachten werden, können wir mit Lazy Load effizient Ressourcen einsparen.
Vor allem im mobilen Bereich sollte diese Funktion genutzt werden: 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 sollte man darauf achten, hier noch etwas schneller zu sein.
Die Zeit, die unser Server zum Antworten braucht (Response Time) wird durch mehrere Faktoren beeinflusst: Von der Menge an Inhalten, die jede Seite nutzt; von der Menge an Besuchern; von der Software, die serverseitig verwendet wird; sogar vom Hosting-Paket das man gewählt hat. Das sind Punkte, an denen man ansetzen kann 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.
Nur wenn keine andere Methode übrig bleibt benutzt man inline CSS. Des Weiteren sollte es möglichst vermieden werden, 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 sind leicht ersichtlich: Möchten Sie etwas an CSS (oder JavaScript) ändern, kann der gesamte Code in einer Datei gefunden werden. Ist dort alles sinnvoll ausgezeichnet, erleichtert das die Arbeit. Aber: Jedes Dokument, das auf dieses Stylesheet zugreift lädt es in seiner Gesamtheit. Es wird kein Unterschied zwischen CSS oder JavaScript gemacht das benutzt oder nicht benutzt wird.
Einzelne CSS und JavaScript Dateien zu jedem Dokument bieten den Vorteil, dass nur die Styles oder Skripte geladen werden, die auch benötigt werden. Mit diesem System muss jedoch sorgfältig gearbeitet werden, damit auf dem Server kein Chaos an Dateien entsteht.
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. Es empfiehlt sich außerdem ungenutzte Plugins zu deaktivieren.
Um zu überprüfen, ob die installierten Plugins einen negativen Effekt auf den Page Speed haben, schalten Sie die Plugins nacheinander ab und identifizieren damit das Problemkind.