kaffeeringe.de

Google PageSpeed Insights: Die 100 Punkte Herausforderung

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

Langsame Webseiten ner­ven. Menschen be­vor­zu­gen schnel­le Webseiten, des­we­gen tut Google das auch. Wer sei­ne wert­vol­len Inhalte nicht durch tech­ni­sche Probleme ab­ge­wer­tet se­hen will, soll­te si­ch um die Performance sei­ner Seite küm­mern. Google Pagespeed Insights gibt da­zu wich­ti­ge Tipps. Wer al­le um­setzt be­kommt 100 Punkte – gar nicht so ein­fach.

Google Pagespeed Insights ana­ly­siert Deine Webseite und zeigt Dir, wel­che Probleme du be­sei­ti­gen mus­st. Das Tool un­ter­schei­det da­bei drei Faktoren: Die Performance auf mo­bi­len und auf Desktop Geräten und die Nutzererfahrung auf mo­bi­len Geräten.

Fit fürs Smartphone

Mein al­tes Layout stamm­te aus dem Sommer 2012. Das hat­te ich da­mals kom­plett selbst er­stellt. Keine Frameworks. Jedes Stück HTML, je­de CSS-Formatierung wa­ren von mir. Es war aber nicht re­s­pon­siv – es hat si­ch nicht au­to­ma­ti­sch an­ge­passt, wenn man es auf ei­nem Smartphone auf­ge­ru­fen hat. Das nach­zu­rüs­ten wä­re kom­pli­ziert ge­wor­den. Zeit für ei­nen neu­en Anfang.

Ich mag das Material Design der ak­tu­el­len Google-Produkte. Mit materialize.css gibt es ein CSS-Framework, das viel Arbeit ab­nimmt: Zum ei­nen hilft es re­s­pon­sive Webseiten zu bau­en. Zum an­de­ren se­hen die nach Material Design aus. Für ei­ne sim­ple Version ei­nes WordPress-Themes ha­be ich mit materialize.css ein paar Minuten ge­braucht.

Dann kam der Feinschliff: materialize.css bie­tet ei­ni­ge Hilfs-CSS-Klassen, mit de­nen man Elemente je nach Größe des Bildschirms ver­ste­cken kann. Alles was nicht un­be­dingt nö­tig ist, ha­be ich ver­schwin­den las­sen für Besucher mit Smartphones. Die Schriftarten mus­s­te ich teil­wei­se schrump­fen las­sen, da­mit sie das Layout nicht auf klei­nen Bildschirmen aus­ein­an­der drü­cken.

Am Ende brach­te das die er­s­te „100“ im Insights-Test: 100/100 Punkte für die mo­bi­le Nutzererfahrung.

WordPress Beine machen

Zwei Plugins sor­gen da­fü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 ha­be den Page Cache, die Minify-Funktion für HTML, CSS und JavaScript so­wie Object- und Browser-Cache ak­ti­viert. Wie Du das Plugin für Deinen Server am bes­ten ein­stell­st, müss­test Du selbst re­cher­chie­ren. Für Google Pagespeed Insights ge­nü­gend die Standard-Einstellungen.
  2. An die­ser Stelle hat­te ich schon 85 Punkte im mo­bi­len Bereich und über 90 im Desktop-Bereich. Nur ein Problem war da no­ch: Das „Above the Fold“-Problem. Google schlägt vor, das CSS  am Ende der Seite zu la­den. Mit ei­nem Tag an der rich­ti­gen Stelle kann­st Du das ein­fach um­set­zen. Das sieht aber schei­ße aus: Erst lädt die Seite kom­plett oh­ne CSS und schal­tet dann sicht­bar um auf das kor­rek­te Layout. Eine Zwickmühle: Um mög­lichst we­ni­ge Dateien zu la­den, wird das ge­sam­te CSS in ei­ner Datei kom­bi­niert. Wenn man es dann aber zum Schluss lädt, ist es schnell – sieht aber schei­ße aus.
    Eine Lösung bie­tet das „Above The Fold Optimization“-Plugin. Es teilt das CSS wie­der auf: Dann gibt es ei­nen „kri­ti­schen“ Teil, der den Großteil der Seite for­ma­tiert und den Rest. Der Rest wird am Ende der Seite als ex­ter­ne Datei ge­la­den. Der kri­ti­sche Teil wird di­rekt im HTML der Seite in­te­griert! Ja ge­n­au, das ist ge­n­au das, was Du Dir frü­her ab­ge­wöhnt hast, um Struktur und Formatierung der Seite zu tren­nen. Aus Performance-Gründen tut man das nun wie­der.
    „Above The Fold Optimization“ ver­linkt ein Tool, das das kri­ti­sche CSS ex­tra­hiert. Dort gibt man die URL der Seite an und ko­piert das CSS aus der Datei ein, die „W3 Total Cache“ er­zeugt hat. Das Ergebnis ko­pier­st Du nun in das gro­ße Feld in „Above the Fold Optimization“.
    Wenn die Seite nun lädt, be­kommt der Browser schon ein­mal die wich­tigs­ten CSS-Formatierungen im Header und der Übergang zur fer­ti­gen Darstellung ist we­sent­li­ch flüs­si­ger.

Grundsätzlich funk­tio­niert nun al­les. Ich be­kom­me 100 Punkte in al­len drei Tests. Noch im­mer sprin­gen ei­ni­ge Element. Da muss ich no­ch ein paar CSS-Anweisungen in das Feld von Above-the-Folds ko­pie­ren. Soweit ich das ver­stan­den ha­be, sorgt „W3 Total Cache“ da­für, dass die CSS-Anweisungen nicht no­ch ein­mal in der Datei auf­tau­chen, die nach­ge­la­den wird.

Einiges bleibt zu tun

Performance ist na­tür­li­ch nur ein Aspekt ei­ner gu­ten Internetseite. Wichtig fin­de ich, dass die Texte gut zu le­sen sind. Immerhin be­steht die Seite nur aus Texten.

Es feh­len no­ch ei­ni­ge Elemente. In der mo­bi­len Version fehlt ein Link zu­rück zur Startseite. Die Suchfunktion ist schon wie­der raus­ge­flo­gen (Christof, ich hab Dich nicht ver­ges­sen!). Und die Links zu mei­ne Social-Network-Profilen feh­len no­ch. Insgesamt könn­te es no­ch ein we­nig run­d­er aus­se­hen. Aber er­st ein­mal geht es. Fällt Dir no­ch et­was 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?