Steffen Voß - Technologie & Gesellschaft

Google PageSpeed Insights : Die 100 Punkte Herausforderung

Renn-Motorrad
VROOOOOOOOOM | Foto: Jez Elliott - CC BY 2.0

Steffen Voß

Langsame Webseiten nerven. Menschen bevorzugen schnelle Webseiten, deswegen tut Google das auch. Wer seine wertvollen Inhalte nicht durch technische Probleme abgewertet sehen will, sollte sich um die Performance seiner Seite kümmern. Google Pagespeed Insights gibt dazu wichtige Tipps. Wer alle umsetzt bekommt 100 Punkte – gar nicht so einfach.

Google Pagespeed Insights analysiert Deine Webseite und zeigt Dir, welche Probleme du beseitigen musst. Das Tool unterscheidet dabei drei Faktoren: Die Performance auf mobilen und auf Desktop Geräten und die Nutzererfahrung auf mobilen Geräten.

Fit fürs Smartphone

Mein altes Layout stammte aus dem Sommer 2012. Das hatte ich damals komplett selbst erstellt. Keine Frameworks. Jedes Stück HTML, jede CSS-Formatierung waren von mir. Es war aber nicht responsiv – es hat sich nicht automatisch angepasst, wenn man es auf einem Smartphone aufgerufen hat. Das nachzurüsten wäre kompliziert geworden. Zeit für einen neuen Anfang.

Ich mag das Material Design der aktuellen Google-Produkte. Mit materialize.css gibt es ein CSS-Framework, das viel Arbeit abnimmt: Zum einen hilft es responsive Webseiten zu bauen. Zum anderen sehen die nach Material Design aus. Für eine simple Version eines WordPress-Themes habe ich mit materialize.css ein paar Minuten gebraucht.

Dann kam der Feinschliff: materialize.css bietet einige Hilfs-CSS-Klassen, mit denen man Elemente je nach Größe des Bildschirms verstecken kann. Alles was nicht unbedingt nötig ist, habe ich verschwinden lassen für Besucher mit Smartphones. Die Schriftarten musste ich teilweise schrumpfen lassen, damit sie das Layout nicht auf kleinen Bildschirmen auseinander drücken.

Am Ende brachte das die erste „100“ im Insights-Test: 100/100 Punkte für die mobile Nutzererfahrung.

WordPress Beine machen

Zwei Plugins sorgen dafür, dass die Seite so flott läuft: W3 Total Cache und Above The Fold Optimization.

  1. W3 Total Cache bringt den größten Schub in der Performance: Ich habe den Page Cache, die Minify-Funktion für HTML, CSS und JavaScript sowie Object- und Browser-Cache aktiviert. Wie Du das Plugin für Deinen Server am besten einstellst, müsstest Du selbst recherchieren. Für Google Pagespeed Insights genügend die Standard-Einstellungen.
  2. An dieser Stelle hatte ich schon 85 Punkte im mobilen Bereich und über 90 im Desktop-Bereich. Nur ein Problem war da noch: Das „Above the Fold“-Problem. Google schlägt vor, das CSS  am Ende der Seite zu laden. Mit einem Tag an der richtigen Stelle kannst Du das einfach umsetzen. Das sieht aber scheiße aus: Erst lädt die Seite komplett ohne CSS und schaltet dann sichtbar um auf das korrekte Layout. Eine Zwickmühle: Um möglichst wenige Dateien zu laden, wird das gesamte CSS in einer Datei kombiniert. Wenn man es dann aber zum Schluss lädt, ist es schnell – sieht aber scheiße aus.
    Eine Lösung bietet das „Above The Fold Optimization“-Plugin. Es teilt das CSS wieder auf: Dann gibt es einen „kritischen“ Teil, der den Großteil der Seite formatiert und den Rest. Der Rest wird am Ende der Seite als externe Datei geladen. Der kritische Teil wird direkt im HTML der Seite integriert! Ja genau, das ist genau das, was Du Dir früher abgewöhnt hast, um Struktur und Formatierung der Seite zu trennen. Aus Performance-Gründen tut man das nun wieder.
    „Above The Fold Optimization“ verlinkt ein Tool, das das kritische CSS extrahiert. Dort gibt man die URL der Seite an und kopiert das CSS aus der Datei ein, die „W3 Total Cache“ erzeugt hat. Das Ergebnis kopierst Du nun in das große Feld in „Above the Fold Optimization“.
    Wenn die Seite nun lädt, bekommt der Browser schon einmal die wichtigsten CSS-Formatierungen im Header und der Übergang zur fertigen Darstellung ist wesentlich flüssiger.

Grundsätzlich funktioniert nun alles. Ich bekomme 100 Punkte in allen drei Tests. Noch immer springen einige Element. Da muss ich noch ein paar CSS-Anweisungen in das Feld von Above-the-Folds kopieren. Soweit ich das verstanden habe, sorgt „W3 Total Cache“ dafür, dass die CSS-Anweisungen nicht noch einmal in der Datei auftauchen, die nachgeladen wird.

Einiges bleibt zu tun

Performance ist natürlich nur ein Aspekt einer guten Internetseite. Wichtig finde ich, dass die Texte gut zu lesen sind. Immerhin besteht die Seite nur aus Texten.

Es fehlen noch einige Elemente. In der mobilen Version fehlt ein Link zurück zur Startseite. Die Suchfunktion ist schon wieder rausgeflogen (Christof, ich hab Dich nicht vergessen!). Und die Links zu meine Social-Network-Profilen fehlen noch. Insgesamt könnte es noch ein wenig runder aussehen. Aber erst einmal geht es. Fällt Dir noch etwas auf?

Pingbacks

  1. Zusammenfassung der Woche ab 22.06.2015 | Iron Blogger Kiel
  2. Das beste WordPress Plugin für komprimierte Bilder | World of WordPress

Kommentare

Dirk
Dirk:

Lässt man deine Unterseiten durch das Pagespeed-Tool laufen erreichst du keine 100/100. Aber die Frage ist, ob hier wirklich die 100 nötig sind oder ob man es eher sportlich sehen sollte. Hauptsache grün… 🙂

24.6.2015 um 09:35
Steffen Voß
Steffen Voß:

Das kommt auf die Seite an. Manchmal meckert der Test, weil die Bilder angeblich noch weiter komprimiert werden könnten. Das Plugin, das die Bilder optimiert, will aber nicht mehr… Und manchmal drückt noch ein Wort aus einer Überschrift das Layout in der mobilen Ansicht auseinander. Für das Problem habe ich noch keine praktische Lösung.

PS: Und ich seh gerade: Der Smilie in Deinem Kommentar macht mir den Bestwert auch noch kaputt. 😀

24.6.2015 um 09:45
Dirk
Dirk:

Ich hatte es mit dieser Unterseite hier probiert. Man ist ja neugierig. Was die Optimierungen angeht, kannst du dir doch die optimierten Ressourcen unter dem Test herunterladen. So erhältst du auch das bemängelte Bild so optimiert, wie Google es möchte…

24.6.2015 um 09:52
Steffen Voß
Steffen Voß:

Witzig auch, dass die Google Dienste google.com und youtube.com nicht einmal ansatzweise die volle Punktzahl bekommen.

Mir ist das aufgefallen, weil Insights mir für einen Artikel mit einem Youtube-Video gesagt hat, dass das JavaScript für den HTML5 Player ausgeliefert von Youtube noch zu komprimieren sei. 😀

25.6.2015 um 21:17
Eugen Stranz
Eugen Stranz:

Hallo,

ein Pagespeed 100 in allen 3 Bereichen ist machbar und meiner Meinung nach trennt sich da die Spreu vom Weizen bzgl. der SEO und Template Anbieter.

Grundsätzlich gilt:

1. Dein Javascript im Head sollte komplett asynchron geladen werden, damit eine unnötige Blockierung der Anzeige deiner Seite ausbleibt und der Seitenaufbau schneller vonstatten gehen kann. Sprich die Seite wird angefordert => Seite wird dem Besucher angezeigt => im Hintergrund wird das Javascript nachgeladen.

2. Halte deine CSS so klein wie möglich. Google unterscheidet zwischen „above the fold“ und „below the fold“ Bereichen. Auf Deutsch sind das Bereiche, die direkt sichtbar sind und Bereiche, die durch scrollen der Seite sichtbar werden. Hier empfiehlt Google in seiner Dokumentation die CSS, die fuer den „above the fold“ Bereich benötigt wird, als Inline CSS einzubinden und die CSS, die fuer den Rest der Seite benötigt wird, asynchrone einzubinden.

3. Nutze ein „Lazy Load“ Plugin, dass die Bilder, die fruehestens durch Scrollen auf deiner Seite zu sehen sind, nachlädt. Das spart Anfragen an den Server und der Browser kann die Seite schneller ausliefern und die Wartezeit auf zusätzliche Bilder bleibt aus. Natuerlich solltest du die gesamten Bilder auf deiner Seite komprimieren.

4. Nutze Gzip und Cache.

So erreichst du einen Pagespeed von 100.

PS: Wer mit Joomla unterwegs ist, kann gerne auf meinen Namen klicken 😉

26.10.2015 um 15:31
Sven
Sven:

Dem kann ich nur zustimmen, auch ich finde immer mehr Seiten, die ultraschnell laden.
Gerade gesehen: http://www.shoes-and-fashion.com
Zuerst mit dem Smartphone aufgerufen, und das war so schnell geladen, daß mein erster Reflex der GP-Test war.
Tatsächlich auch 100.
Gut, ist jetzt nur eine statische Seite, aber es ist wirklich ein Mehrwert für den Seitenbesucher!

25.9.2016 um 23:35

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Möchtest Du per E-Mail benachrichtigt werden, wenn Dir hier jemand antwortet?