17. Oktober 2012 | Suchmaschinen | Keine Kommentare

Schneller mit Page Speed

Google hat bekannt gemacht, dass die Ladezeit einer Website möglicherweise den Ranking in den Suchergebnissen beeinflussen kann. Zur Optimierung stellt er gleich auch die Erweiterung Page Speed für Firefox/Fireburg zur Verfügung. Sie hilft einige Probleme zu erkennen, einige davon kann man beheben, einige muss man hilflos akzeptieren.

Page Speed Screenshot

Das größte Problem, welches man nicht beheben kann, ist wohl die Aktivierung der Komprimierung (enable compression). Dies liegt nicht in der Macht des Webdesigners oder Webmasters, sofern man nicht einen eigenen Webserver betreibt. Was mit PHP 4 problemlos möglich war, ist bei PHP 5 deaktiviert, weil es angeblich zu viele Ressourcen verbraucht.

Die einzige gute Nachricht dabei ist, nur die Minderheit der Websites liegt auf einem eigenen Webserver, dem Rest werden wohl die gleichen Punkte abgezogen.

Die nützlichen Features im Überblick:

Minify JavaScript

Durch die Entfernung von Kommentaren und Leerräumen kann man einige Kilobytes sparen. Benutzen kann man dazu JS Minifier. Kopieren Sie den Script in das obere Fenster und klicken auf JSmin. Den ausgegebenen Kode statt den alten hinein kopieren. Einen Fehler macht JS Minifier doch, er entfernt in der Regel alle Kommentarzeichen ausser dem Ersten. Im Internet Explorer führt es zum Fehler. Dieses Zeichen (<!--) muss man immer selbst entfernen.

Combine external JavaScript

Es sollte wenn möglich, nur eine externe Datei mit der Endung .js existieren. Es ist durchaus möglich, alle Scripte in eine Datei zusammen zu fügen.

Use efficient CSS selectors

Dieses Feature ist beeindruckend und es lohnt sich damit zu beschäftigen. Ich hatte selbst 48 nicht effektive Regeln und nach der Berichtigung war meine CSS Datei nur dadurch um 7Kb kleiner.

Minify CSS

Es werden Kommentare und Leerzeichen entfernt, die Ersparnis kann sehr hoch sein. Zum Download angeboten wird eine optimierte Version.

Optimaze images

Es werden alle Bilder gefunden, deren Größe man ohne Verlust verkleinern kann. Diese Bilder werden auch sofort zum download angeboten.

Combine external CSS

Statt 2 CSS Dateien, jeweils für media=”screen” und media=”print” können wir innerhalb einer Datei 2 Blöcke machen, einer mit @media screen{} und einer mit @media print{}. Bringt gleich 2 Punkte mehr:-)

Bei diesen Anforderungen ist eine Verbesserung nur durch Einträge in die .htaccess Datei möglich:

Specify a Vary: Accept-Encoding header

<IfModule mod_headers.c>
Header set Vary *
</IfModule>

Leverage Browser caching

# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
ExpiresDefault "access plus 2 months"
FileETag none

Die nicht ganz nachvollziehbaren Features:

Remove unused CSS

CSS Selektoren, die auf einer bestimmten Seite nicht gebraucht werden, werden als Fehler angesehen. Schlussfolgerung: Für jede Seite einer Website sollten wir eine eigene CSS Datei haben. Womit wohl der Sinn und Zweck einer externen CSS Datei verloren gehen würde.

Minify HTML

Eine im Grunde gute Sache Leerräume im HTML entfernen. Aber die angebotene optimierte Version entfernt auch den doctype, den head und den body tag!!??

Zusammenfassung:

Eine nützliche Hilfe, sollte aber nicht als Alpha und Omega der Optimierung gesehen werden. Eine Verbesserung bis zum 10-15 Prozent ist aber möglich. Wie weit das Ranking wirklich dadurch beeinflusst wird, kann man nur raten. Manche Websites die als erster Treffen erscheinen haben eine Punktezahl von 73 (max 100) und Google selbst hat auf der Ergebnisseite nur eine Punktezahl von 79:-)