Pagespeed-Optimierung für besseres Ranking

Pagespeed-Optimierung von Webseiten gemäss Gregor Meier von SEO One. Eine schnellere Ladezeit ist bei Nutzern beliebt und deshalb ein Google Ranking-Faktor. Schneller ladende Websites weisen weniger Absprünge auf. Das bedeutet mehr Conversions und eine bessere Usability. Auch der Suchmaschinen-Crawler braucht dann weniger Zeit, um die Inhalte herunterzuladen und zu indexieren.Deshalb gilt Pagespeed-Optimierung als Massnahme der Suchmaschinenoptimierung. Eine schnelle Ladegeschwindigkeit gilt als Ranking-Faktor. Nach ein paar Umstellungen konnte ich diesen Blog für Mobile und Desktop in den «grünen» Bereich optimieren:

Man muss nicht programmieren können, um die Ladezeit zu beschleunigen. Den Code im .htaccess-File kann jeder editieren. Ein teureres Hosting kann Sinn machen bei grossen Webseiten. Bei einigen 100 Besuchern am Tag kann man auch mit einem Shared Hosting gute Resultate erzielen. Die meisten CMS wie WordPress oder andere eignen sich für schnelle Webseiten. Mit wenig Zeitaufwand kann man gute Resultate erzielen. Die Ladezeit kann man einfach in Google Pagespeed Insights messen. 11 objektive Kriterien werden angewandt, um ein Ranking von 0-100 zu erstellen. Ab 85/100 wird der Balken im Google-Tool grün. Dies deckt aber noch nicht die effiziente Ladezeit dar. Auf die sollte man auch achten. Die Ladezeit kann man bei webpagetest.org messen. Hier werden alle Ladezeiten der einzelnen Elemente ausgewiesen. Nach spätestens einer Sekunde sollten Inhalte dargestellt werden. Mobile Webseiten brauchen allein für die Verbindung bereits eine halbe Sekunde!

1. Schritt: Bilder optimieren

Man sollte Bilder in der später auf der Website benötigten Grösse hochladen und nicht unbedingt in der ursprünglichen Originalgrösse. Die Komprimierung in JPG besteht aus Pixeln. Damit können mehr Informationen dargestellt werden, als das menschliche Auge überhaupt erkennen kann. JPG Mini oder TiniPNG.com konvertieren die JPG-Vorlagen in PNG-Formate. Für WordPress gibt es auch Plugins, die die Bilder beim Hochladen optimieren. Ich nutze auf diesem Blog das kostenpflichtige kraken.io. Kostenlos ist auch das Plugin EWWW zu empfehlen. Die Optimierung der Bilder bringt im Pagespeed Insights Tool von Google die grösste (und einfachste) Verbesserung!

Schritt 2: CSS optimieren

Im CSS-File legt man das Design einer Website fest unabhängig von den eigentlichen Inhalten. Das ist sehr praktisch. Unter cssminifier.com kann man CSS-Dateien um Kommentare und Leerschläge reduzieren. UnusedCSS ist ein Firefox-Plugin, das prüft, ob man CSS-Deklarationen effektiv nutzt, die alle geladen werden. Für WordPress gibt es ein Plugin Autoptimize. Die verschiedenen Optionen für die Kompression der Files sollte man auf einer Staging-Seite testen. Manche Einstellungen können das Layout einer Seite zerschiessen. Dasselbe gilt für das folgende Kapitel über JavaScript-Optimierungen.

Schritt 3: JavaScript optimieren

Mittels JavaScript können dynamische Effekte auf Webseiten umgesetzt werden. Das bedeutet aber oft auch grosse Datenmengen, die heruntergeladen werden müssen, z.B. bei Form-Validierung. Diese sollten nur geladen werden wo man sie effektiv benötigt. Wie bei CSS-Dateien kann man die Umbrüche und Leerschläge entfernen, z.B. JavaScriptMinifyer.com. Betreibt man eine technisch wenig ändernde Website, kann man dies einmalig tun.

Schritt 4: Browser-Caching einsetzen

Der Browser-Cache speichert Inhalte, damit sie bei einem nächsten Aufruf nicht wieder vom Internet, sondern lokal von der eigenen Maschine geladen werden. Geht man also auf eine Folgeseite der Webseite, lädt diese viel schneller als die erste, da viele Elemente zwischengespeichert wurden. Dafür kann man in der .htaccess-Datei einen mod_expires Eintrag erfassen. Damit weiss der Browser, bis wann bereits heruntergeladene Inhalte gültig bleiben und ab wann er sie wieder im Internet holen soll.

Schritt 5: HTML reduzieren

Hier ist viel Handarbeit nötig. Mann kann sich aber auf häufig geladene Elemente fokussieren, z.B. Header oder Footer.

Schritt 6: Komprimierung

Man kann Wiederholungen weglassen, aber dafür referenzieren. Z.B. folgendermassen:

Auch ein kleiner Beitrag ist ein Beitrag Auch ein kleiner Beitrag ein -4 -3

Dafür muss man GZIP-Kompression aktivieren, indem man in der .htaccess-Datei mod_gzip.c einträgt.

Schritt 7: Kritischen Rendering-Pfad optimieren

Man kann den Browser anweisen, welche Inhalte er zuerst laden soll. Optimal lädt man zuerst nur, was man für den obersten Teil der Webseite braucht (above the fold). Dies verstösst leider gegen den W3C-Standard. Dafür lädt man im Header die nötigsten Dateien, die restlichen im Footer. Per CriticalPathCSS-Tool kann man sich sagen lassen, welche Inhalte man above the fold braucht.

Schritt 8: Server-Cache aktivieren

Ähnlich wie im Browser-Cache kann man Daten auch auf dem Server zwischenspeichern. In WordPress kann man mit dem Plugin WP SuperCache den Server-Cache aktivieren. Seiten mit wenigen Besuchern müssen darauf achten, dass mindestens ein Besucher pro Seite vorbeikommt, damit der Prozess startet. Die Ablaufzeit ist mit 1440 optimal, das entspricht einem Tag. Mit diesen Massnahmen kann man im Google Pagespeed-Tool auf 100/100 kommen. Zusätzlich kann man Animationen durch CSS ersetzen. Image Maps für Icons können auch helfen. Content Delivery Networks beschleunigen, indem sie den Server entlasten, weil die Inhalte auf andere Server weltweit kopiert und von dort aufgerufen werden.