PageSpeed-Optimierung: So machst du deine Seite schneller!

Schon länger ist der PageSpeed ein Rankingfaktor von Google. Das Unternehmen selber stellt sogar verschiedene Tools zur Verfügung, mit dem man nicht nur den eigenen PageSpeed-Score überprüfen kann, sondern auch direkt Verbesserungsvorschläge für die eigene Seite gibt. So kann man Punkt für Punkt abarbeiten und seinen PageSpeed-Score Schritt für Schritt verbessern.


PageSpeed Insights

PageSpeed als Rankingfaktor

Es ist nur logisch, dass der PageSpeed als Rankingfaktor einigen Einfluss hat, schließlich geht es hier um ein positives Nutzererlebnis – genau das, was Google sehen möchte. Wenn eine Webseite entsprechend schnell lädt, kann das nur gut für den Nutzer sein. Und da Google seinen Besuchern nur die besten Suchergebnisse zur Verfügung stellen möchte, fließt eben auch der PageSpeed mit in das Ranking mit ein.

Den eigenen Score verbessern

Zwar gibt Google in den PageSpeed Insights und in der Chrome-App schon alle Verbesserungsvorschläge vor, doch viele wissen gar nichts damit anzufangen. Deswegen möchten wir hier zeigen, wie man den PageSpeed-Score einfach erhöhen und somit verbessern kann.

Skalierte Bilder bereitstellen

Wenn Google diese Meldung in den Verbesserungen vorschlägt, sollte man handeln. Es werden Bilder anzeigt, die in der Originaldatei größer sind, als sie in der Webseite ausgegeben werden. Die Lösung ist einfach: Bild herunterladen, auf die passende Größe runter skalieren und wieder hochladen. So muss nicht bei jedem Aufruf das große Bild (Originaldatei) heruntergeladen werden, was sich auch in der Dateigröße wiederspiegelt, sondern nur noch die kleine Version des Bildes.

Bilder optimieren

Das optimieren der Bilder ist dafür gedacht, dass die Bilder in der Dateigrößte verkleinert werden und schneller vom Nutzer heruntergeladen und anschließend angezeigt werden können. Bilder werden durch eine Komprimierung optimiert und in der Dateigröße verkleinert. Wer den Google Chrome-Browser nutzt, kann sich die optimierte Version des Bildes dirkt herunterladen, da das Plugin Bilder automatisch optimiert und bereitstellt. Ansonsten: Bildbeabeitungsprogramm öffnen und Bilder komprimieren!

CSS reduzieren

Die Stylesheets einer Webseite sind oft aufgebläht, enthalten Leerzeilen und Kommentare. Auch diese vergrößern eine Stylesheet-Datei: Nicht nur im Inhalt, sondern auch in der Dateigröße. Deshalb empfiehlt Google, die Stylesheet zu reduzieren. Leerzeilen, Kommentare, etc. entfernen und wieder hochladen. Über das Chrome-Plugin kann die optimierte Variante der CSS-Datei direkt heruntergeladen werden.

HTML reduzieren

Das gleiche was für die CSS-Dateien gilt, gilt auch für die HTML-Dateien bzw. dem HTML-Code. Dieser sollte so schlank wie möglich gehalten werde, keine Leerzeilen enthalten und natürlich auch keine Kommentare beinhalten. Klar: Dadurch wird der Code übersichtlicher, aber die HTML-Datei auch in der Dateigröße größer.

JavaScript reduzieren

Auch in die Seite eingebundenes JavaScript kann den PageSpeed verringern. Deswegen sollte man drauf achten, dass man so wenig JavaScript wie nötig einbindet und dieses noch komprimiert.

Komprimierung aktivieren

Um Bytes zu sparen, die der Nutzer beim laden einer Webseite herunterladen muss, komprimiert man Webseite via gzip oder deflate. Hier kann man einige Punkte vom PageSpeed-Score gutmachen und die Ladezeit einer Webseite verbessern. Deswegen ist die aktivierte Komprimierung für mich einer der wichtigsten Punkte bei der PageSpeed-Optimierung.

Hier muss man schauen, ob der eigene Server gzip oder deflate aktiviert hat. Wenn nicht: Aktivieren, da dass ganze sonst nicht funktioniert. Es gibt auch verschiedene Möglichkeiten, die Komprimierung vorzunehmen:

1) via .htaccess-Eintrag

Tragt folgende Zeilen in die .htaccess im Root-Verzeichnis ein, um die Komprimierung zu aktiveren. Allerdings funktioniert das nur, wenn auf dem Server die Einstellung aktiviert ist bzw. der Server die Komprimierung unterstützt.

<IfModule mod_deflate.c>
<FilesMatch “\\.(js|css|html|xml)$”>
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

2) via PHP

Die Komprimierung funktioniert auch, wenn man einen kleinen Codeschnipsel an den Anfang der PHP-Dateien setzt, die komprimiert werden sollen. Das Problem: Diese Lösung funktioniert nur mit PHP-Dateien!

<?php
ob_start(“ob_gzhandler”);
?>

3) via manuelle Komprimierung

Natürlich kann man die eigenen Dateien auch manuell komprimieren. Aber Achtung: Das bedeutet, dass man alle Dateien einzeln komprimieren muss, was viel Zeit kostet. Wer es trotzdem macht, sollte es so machen:

  1. Software “7Zip” herunterladen
  2. Jede einzelne Datei auf dem Server herunterladen
  3. Jede Datei als gzip-Datei komprimieren
  4. Alle komprimierten Dateien umbenennen: Aus der Endung .gz wird .jgz
  5. Hochladen aller Dateien

Zum Schluss braucht die .htaccess nur noch einen kurzen Code eingetragen bekommen:

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.jgz -f
RewriteRule (.*)\.js$ $1\.js.jgz [L]
AddType “text/javascript” .js.jgz
AddEncodig gzip .jgz

Keep-Alive aktivieren

Oft spuckt PageSpeed Insights die Meldung aus, man solle doch Keep-Alive aktivieren. Keep-Alive bedeutet, dass eine Verbindung aufrecht erhalten wird, bis alle Dateien geladen wurden. Ohne Keep-Alive würde der Server nach jeder Datei die Verbindung schließen und für die nächste Datei auch eine neue Verbindung öffnen. Keep-Alive muss am Server aktiviert sein, dann kann man das Keep-Alive auch nutzen. Dazu einfach folgenden Code-Schnipsel in die .htaccess werden:

<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>

Browser-Caching nutzen

Browser-Caching ist extrem sinnvoll, da die Seiten in der Cache gespeichert werden und bei Bedarf aufgerufen werden. Der Vorteil: Der Nutzer spart sich die Datenbankabfragen und alles das, was die Webseite benötigt, um gerendert zu werden. So kann die Seite schneller geladen werden. Für mich ebenfalls einer der wichtigsten Punkte, nicht nur wegen dem PageSpeed-Score, sondern auch, um den Nutzer eine schnelle Seite zu bieten.

Das Browser-Caching kann durch einen einfachen Code in der .htaccess aktiviert werden, vorausgesetzt, dass das Browser-Caching vom Server unterstützt wird.

# BEGIN Cache-Control Headers
<ifmodule mod_headers.c>
<filesmatch “\\.(ico|jpe?g|png|gif|swf)$”>
Header set Cache-Control “max-age=5184000, public”
</filesmatch>
<filesmatch “\\.(css)$”>
Header set Cache-Control “max-age=5184000, private”
</filesmatch>
<filesmatch “\\.(js)$”>
Header set Cache-Control “max-age=216000, private”
</filesmatch>
</ifmodule>

JavaScript später parsen

Ein weiterer guter Tipp aus den Google PageSpeed Insights ist es, das JavaScript später laden zu lassen, also im Quelltext ans Ende der Seite zu verschieben, damit erst die Elemente für den Nutzer geladen werden können, bevor das JavaScript geladen wird. So bekommt der Nutzer schon eine Seite angezeigt und muss nicht lange warten.

Dazu einfach das eingebundene JavaScript im Quelltext ans Ende der Webseite verschieben und somit zum Schluss laden lassen.

Cache-Validierer angeben

Es kann vorkommen, dass Google diese Meldung bzw. diese Verbesserung vorschlägt. Dieses Problem kann man ebenfalls mit einem kleinen Eintrag in der .htaccess-Datei lösen. Dazu einfach folgenden Eintrag hinzufügen:

# Turn ETags Off
<ifmodule mod_headers.c>
Header unset ETag
</ifmodule>
FileETag None

Bilder in CSS-Sprites kombinieren

Wer viele Bilder auf einer Seite eingebunden hat, der wird diese Meldung kennen. Der Grund ist einfach: Jedes Bild muss einzeln geladen werden, was viele Serveranfragen bedeutet. Deshalb wird empfohlen, aus mehreren Bilder nur noch eines zu machen und dieses dann via CSS-Sprites den entsprechenden Teil des Bildes auszugeben. Der Vorteil ist klar: Statt viele Bilder zu laden, lädt der Besucher nun nur noch ein einziges.

Wie man die CSS-Sprites erstellt, lest ihr hier.

Viele weitere Möglichkeiten

Natürlich hat Google noch viele andere Verbesserungsvorschläge parat, die man nutzen sollte, um den PageSpeed der eigenen Seite zu verbessern. Aber: In der Regel werden nur wenige angezeigt, die dann aber mehr ins Gewicht fallen. Wer sauber programmiert bzw. ein sauberes Theme nutzt, wird auch immer nur wenige Handgriffe tun müssen, um den PageSpeed-Score zu erhöhen.

Fällt der PageSpeed stark ins Gewicht?

Ich selber bin ein großer Fan vom PageSpeed und versuche ihn bei den meisten meiner Projekte zu pushen. Wie stark der PageSpeed ins Gewicht beim Ranking fällt, weiß niemand so genau. Allerdings denke ich, dass man den PageSpeed auf dem Schirm haben sollte, denn er ist ein Messwert, der aus dem Hause Google kommt. Und wieso sollte man diesen dann nicht beachten?

Zudem kann man – so denke ich – sich einen kleinen Vorteil gegenüber denjenigen verschaffen, die den eigenen PageSpeed-Score nicht auf dem Schirm haben bzw. den Score nicht optimieren.


» Neu ausgerollt: Image Extensions für AdWords
» SEOCruise Spezial: Karl Kratz und Björn Tantau über Email-Marketing