Google Page Speed - Teil 1: Geschwindigkeit

Im Moment ist das Thema "Google Page Speed" in aller Munde. Darum möchte ich kurz aufzeigen, worum es dabei geht, und was zu beachten ist. Nicht alles was Google möchte ist in der Realität möglich, aber vieles!

Durch den kompletten ReDesign der Webliste wurde das Thema Page Speed und responsives Design zum aktuellen Thema. Darum habe ich mich damit etwas auseinander gesetzt, und bin manchmal fast verzweifelt... aber es geht eben doch. Google unterscheidet die Bewertung in verschiedenen Abschnitten (ich verweise dabei auf die originale Anleitung bei Google) und schreibe nur meinen Kommentar dazu:

Regeln für eine höhere Geschwindigkeit

Zielseitenweiterleitungen vermeiden

Grundsätzlich sind Weiterleitungen nicht zu empfehlen und sollten nur in Ausnahmefällen oder temporär zum Einsatz kommen.

Komprimierung aktivieren

Eine der einfachsten und doch effektivsten Massnahmen ist die Komprimierung auf dem Webserver. Sollte Ihr Provider diese nicht bereits zur Verfügung stellen, fragen Sie ihn danach. Ansonsten gibt es genügend professionelle Provider welche die Komprimierung anbieten. Die Komprimierung ist ein MUSS.

Antwortzeit des Servers verbessern

Wählen Sie einen Provider der seine Hardware in der Schweiz betreibt. Wenn Ihre Webseiten jedesmal über "Timbuktu" geschickt werden müssen, dauert das natürlich etwas länger.

Browser-Caching nutzen

Hier wird es technisch. Lesen Sie dazu die Anleitung von Google. Klar ist, dass eine Webseite beim Benutzer schneller lädt (beim zweiten Mal), wenn zum Beispiel alle Bilder bereits beim Benutzer im Cache liegen.

Ressourcen reduzieren (HTML, CSS und JavaScript)

Nicht nur die CSS Dateien können komprimiert (minifyed) werden. Dies gilt auch für .js Javascripts.

  • Reduzieren Sie soweit wie möglich die Anzahl zusätzlicher .js Resourcen
  • Benutzen Sie entsprechende Tools umd aus mehreren .js Dateien eine einzige zu machen.
  • Komprimieren (minify) Sie die .js Dateien. Damit werden unnötige Zeichen und Kommentare entfernt
  • Schieben Sie .js Scripts wenn möglich ganz an das Ende Ihres Codes (gleich oberhalb von </body>

Tipp: Versehen Sie .css und .js Dateien welche sich ändern können mit einem Zusatz wie zum Beispiel: mein.css?v=16042015. So können Sie bei Änderungen durch anpassen dieses Zusatzes bewirken, dass die Datei beim Benutzer neu geladen wird. Ansonsten kann es sein, dass Ihre Benutzer noch wochenlang die alte Datei benutzen.

Bilder optimieren

Hinterlegen Sie Bilder in der Grösse in welcher die angezeigt werden. Nötigenfalls erstellen Sie für das gleiche Bild mehrere, der Grösse angepassten Versionen. Es nützt niemandem, und schon gar nicht dem schnellen Aufbau der Seite, wenn Sie ein Bild mit einer Auflösung von 1280x1024 Pixel hinterlegen, und es auf der Webseite aber nur mit 640x480 Pixel angezeigt wird.

CSS-Bereitstellung optimieren

Mit CSS sind die Stylesheet Definitionen) gemeint. Beachten Sie auch die Tipps bei Google.

  • Reduzieren Sie soweit wie möglich die Anzahl zusätzlicher CSS Resourcen
  • Benutzen Sie entsprechende Tools umd aus mehreren CSS Dateien eine einzige zu machen.
  • Komprimieren (minify) Sie die CSS Dateien. Damit werden unnötige Zeichen und Kommentare entfernt

Tipp: Versehen Sie .css und .js Dateien welche sich ändern können mit einem Zusatz wie zum Beispiel: mein.css?v=16042015. So können Sie bei Änderungen durch anpassen dieses Zusatzes bewirken, dass die Datei beim Benutzer neu geladen wird. Ansonsten kann es sein, dass Ihre Benutzer noch wochenlang die alte Datei benutzen.

Sichtbare Inhalte priorisieren

Dabei gehen Google's und meine Meinung getrennte Wege. Bei einer einigermassen komplexen Website sind diese Ratschläge weder sinnvoll, noch mit vernünftigem Aufwand zu warten. Aber lesen Sie selber...

JavaScript-Code entfernen, der das Rendern blockiert

Auch hier wird eine konsequente Umsetzung zum Teil unmöglich. Trotzdem lohnt es sich, die Strategie zumindestens einmal zu überprüfen.

Asynchrone Skripts verwenden

Sofern die Logik Ihrer Seite das zulässt unbedingt zu empfehlen. Scripts werden so geladen ohne dass der Benutzer darauf warten muss.


Hier geht es mit Teil 2 weiter...