kaffeeringe.de

Google PageSpeed Insights: Die 100 Punkte Herausforderung

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

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

Kommentare

Dirk

Lässt man dei­ne Unterseiten durch das Pagespeed-Tool lau­fen er­reichst du kei­ne 100/100. Aber die Frage ist, ob hier wirk­li­ch die 100 nö­tig sind oder ob man es eher sport­li­ch se­hen soll­te. Hauptsache grün… 🙂

Steffen Voß

Das kommt auf die Seite an. Manchmal me­ckert der Test, weil die Bilder an­geb­li­ch no­ch wei­ter kom­pri­miert wer­den könn­ten. Das Plugin, das die Bilder op­ti­miert, will aber nicht mehr… Und manch­mal drückt no­ch ein Wort aus ei­ner Überschrift das Layout in der mo­bi­len Ansicht aus­ein­an­der. Für das Problem ha­be ich no­ch kei­ne prak­ti­sche Lösung.

PS: Und ich seh ge­ra­de: Der Smilie in Deinem Kommentar macht mir den Bestwert auch no­ch ka­putt. 😀

Dirk

Ich hat­te es mit die­ser Unterseite hier pro­biert. Man ist ja neu­gie­rig. Was die Optimierungen an­geht, kann­st du dir doch die op­ti­mier­ten Ressourcen un­ter dem Test her­un­ter­la­den. So er­hält­st du auch das be­män­gel­te Bild so op­ti­miert, wie Google es möch­te…

Steffen Voß

Witzig auch, dass die Google Dienste google.com und youtube.com nicht ein­mal an­satz­wei­se die vol­le Punktzahl be­kom­men.

Mir ist das auf­ge­fal­len, weil Insights mir für ei­nen Artikel mit ei­nem Youtube-Video ge­sagt hat, dass das JavaScript für den HTML5 Player aus­ge­lie­fert von Youtube no­ch zu kom­pri­mie­ren sei. 😀

Eugen Stranz

Hallo,

ein Pagespeed 100 in al­len 3 Bereichen ist mach­bar und mei­ner Meinung nach trennt si­ch da die Spreu vom Weizen bzgl. der SEO und Template Anbieter.

Grundsätzlich gilt:

1. Dein Javascript im Head soll­te kom­plett asyn­chron ge­la­den wer­den, da­mit ei­ne un­nö­ti­ge Blockierung der Anzeige dei­ner Seite aus­bleibt und der Seitenaufbau schnel­ler von­stat­ten ge­hen kann. Sprich die Seite wird an­ge­for­dert => Seite wird dem Besucher an­ge­zeigt => im Hintergrund wird das Javascript nach­ge­la­den.

2. Halte dei­ne CSS so klein wie mög­li­ch. Google un­ter­schei­det zwi­schen „above the fold“ und „be­low the fold“ Bereichen. Auf Deutsch sind das Bereiche, die di­rekt sicht­bar sind und Bereiche, die durch scrol­len der Seite sicht­bar wer­den. Hier emp­fiehlt Google in sei­ner Dokumentation die CSS, die fu­er den „above the fold“ Bereich be­nö­tigt wird, als Inline CSS ein­zu­bin­den und die CSS, die fu­er den Rest der Seite be­nö­tigt wird, asyn­chro­ne ein­zu­bin­den.

3. Nutze ein „Lazy Load“ Plugin, dass die Bilder, die fru­e­hes­tens durch Scrollen auf dei­ner Seite zu se­hen sind, nach­lädt. Das spart Anfragen an den Server und der Browser kann die Seite schnel­ler aus­lie­fern und die Wartezeit auf zu­sätz­li­che Bilder bleibt aus. Natuerlich soll­test du die ge­sam­ten Bilder auf dei­ner Seite kom­pri­mie­ren.

4. Nutze Gzip und Cache.

So er­reichst du ei­nen Pagespeed von 100.

PS: Wer mit Joomla un­ter­wegs ist, kann ger­ne auf mei­nen Namen kli­cken 😉

Sven

Dem kann ich nur zu­stim­men, auch ich fin­de im­mer mehr Seiten, die ul­tra­schnell la­den.
Gerade ge­se­hen: http://www.shoes-and-fashion.com
Zuerst mit dem Smartphone auf­ge­ru­fen, und das war so schnell ge­la­den, daß mein ers­ter Reflex der GP-Test war.
Tatsächlich auch 100.
Gut, ist jetzt nur ei­ne sta­ti­sche Seite, aber es ist wirk­li­ch ein Mehrwert für den Seitenbesucher!

Schreibe einen Kommentar

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

Möchtest Du benachrichtigt werden, wenn Dir hier jemand antwortet?