99/100 Google Page Speed – so kann es funktionieren

neues Design - und Plugins ermöglichen Geschwindigkeit
neues Design – und Plugins ermöglichen Geschwindigkeit

Monatelang hatte ich bereits vor der Texto ein neues Theme zu machen. Das Design, Layout und zig Ideen lagen ebensolang in meiner to-do Schublade. Ich freu mich sehr, dass es mir gelang sie nun sehr schnell ausliefern zu können. Ich mag hier erzählen welche Plugins ich dafür nutze und was ich bei der Programmierung des Themes beachtet habe.

Geschwindigkeit ist abhängig vom Hoster, vom Theme und den Plugins. Die Texto läuft bei all-inkl.com so ganz ohne eigenen Server, so wie viele meiner Kunden auch. Ich mag mir gar nicht vorstellen wie schnell sie unter nginx wäre – aber das ist eine andere Geschichte :-).

Aber zuerst die Eckpunkt, die das Theme unbedingt erfüllen musste, weil ich es so wollte und weil ich auf die Inhalte der fast 10-jährigen Domain Rücksicht nehmen musste.

Rücksicht auf 10-Jahre alte Inhalte – mit Blick auf mobile User

Fokussierung auf den einzelnen Artikel

Einzelartikel einspaltig sowohl am Desktop wie auf mobilen Geräten
Einzelartikel einspaltig sowohl am Desktop wie auf mobilen Geräten

Ich wollte unbedingt, dass der Artikel einspaltig ist. Dass also keine Sidebar vom Inhalt ablenkt. Daher sind die letzten Artikel unterhalb des Hauptbeitrages zu sehen. Mit ein Grund dafür war auch die Tatsache, dass an manchen Tagen sich die Desktop und mobile Nutzer hier die Waage halten.

Bei einem klassischen 2-spaltigem Layout sehen mobile Nutzer auch die Sidebar Artikel unten sehen. Klar man kann die Sidebar auch aufklappen lassen, doch wer macht das am Smartphone oder Tablet wirklich? Es sieht sehr schick aus, gibt tolle Effekte, ich bin mir aber unsicher, ob dies auch wirklich gut ankommt und benutzt wird.

Ähnliche Artikel – oder der vorherige nächste Beitrag
Dies gab es immer schon und sollte auch so bleiben. So nutze ich die normale Postnavigation und habe sie mit Bildern ergänzt.
Andererseits kann ich Beiträge aussuchen, die ebenfalls mit Bild angezeigt werden. Bloß die Überschrift ist dann anders.

Startseite
Die sollte wie vorher auch Beiträge mit bestimmten Tags anzeigen. Den neuesten Artikel fokussieren und über mich ein bisschen Auskunft geben.

Gestaltung mit Bildern
Ich habe hier sehr wenige große Bilder in der Mediathek. Meist zeige ich Screens her, die ich immer schon relativ klein gehalten hatte. Bei über 100 Beiträgen hätte ich neue Bilder hochladen müssen => das ist zeitlich einfach nicht drin. Da erneuere ich lieber bei alten Artikeln die Code-Beispiele :-).

Schriften auf Geschwindigkeit getrimmt

Über Geschmack streite ich niemals, schon gar nicht bei Schriften. Was ich aber gar nicht mag ist, wenn man den Browser eine Schrift fett oder kursiv machen läßt. Das sieht vergewaltigt aus. Daher habe ich von jeder Schrift auch die kursive und fette Variation hier geladen.
Ich nutze Googlefonts, allerdings selbstgehostet und dann in die style.css eingebunden.

FontAwesome habe ich abgespeckt. Es sind nur die Zeichen in der style.css, die ich auch tatsächlich brauche. Das verringerte die Schrift.css gleich um 90%.

Die Style.css so klein wie nur möglich

Gut, das habe ich sicher nicht ganz geschafft. Ich nehm eben immer noch auf ältere Browser Rücksicht und ich mag stabiles CSS. Und es gibt jede Menge Textgestaltung von alten to-do Artikeln die ich weiterhin beservicen muss. Soweit es irgend geht sind auch die CSS der Plugins mit drin und so hat sie 37kb.

Geladen wird sie asynchron und direkt plain im Header.

Datenbankabfragen verringern – die vielen queries hier

nur Abfragen was man braucht, alles andere ausschließen
nur Abfragen was man braucht, alles andere ausschließen

Die letzten Beiträge zeigen ein Thumbnail, den Titel und einen Auszug an.
Weder Kategorie noch weitere Tags oder den Autor. Paginierung brauchen sie auch keine.

D.h ich kann dies bei einem Loop ausschließen. Das sparte mir 4 Queries alleine auf der Startseite und je 2 bei den ähnlichen Artikeln.
Das mag vordergründig nicht viel sein, aber jede Datenbankanfrage weniger ist ein Minigeschwindigkeitsgewinn, der in Summe zum Tragen kommt.

In Sergejs Newsletter gibt es dazu einen tollen Hinweis auf die Performance Bremsen related articles. Es wird darin sehr klar, dass wenige Plugins durchdacht programmiert sind.

$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query( array( 
  'showposts' =>3,  
  'offset'=> 1,
  'no_found_rows' => true,
  'update_post_term_cache' => false,
  'update_post_meta_cache' => false
  ) );

Microformate – strukturierte Daten – Twittercard usw.

Ich verwende dafür nie ein fremdes Plugin, ich habe mir das selbst geschrieben, genauso wie den title und die meta description hauseigene Programmierung sind.

Plugins, die Performance bringen

Optimus in der Bezahlversion => ich mag einfach gut komprimierte Bilder ausliefern ohne auf Qualität oder Größe verzichten zu müssen.
Cachify sorgt wie eh und je für den statischen Cache.
Async JS and CSS ermöglicht mir Scripte und CSS werden asynchron zu laden.
Adaptive Bilder liefert derzeit Hammy. Kann sich aber jederzeit wieder ändern.
Avatare werden Lazyload ausgeliefert.
Dominik Schillings Filename Cache Busting killt die Versionssnummern ohne deren Funktion zu zerstören.

All dies ergibt bei Pingdom:

Pingdom Ergebnis
Pingdom Ergebnis

Ich bedanke mich bei all den Programmierern für ihre Arbeit, die ich nutzen kann und bei Google, weil deren Analytics verhindert die 100/100. :-). Und ich hoffe für dich sind genug Anregungen dabei, damit auch dein WordPress schneller als der Wind am Smartphone landet.

Und ab jetzt wird die Optimierung spannend, bis dahin gings relativ einfach :-).

13

13 Beiträge zu “99/100 Google Page Speed – so kann es funktionieren

  1. Kommentar Autor
    Sven Hanold
    Kommentar

    Hallo.

    Glückwunsch zum interessanten Artikel. Allerdings ist es so, dass nicht jeder Blogbetreiber gleichzeitig ein begnadeter Programmierer ist. Natürlich ist die Geschwindigkeit der Seite mittlerweile auch Ranking-Faktor. Aber unterm Strich zählt das Angebot auf der Seite, die Qualität der Texte und Inhalte. Ich mag keine rein technischen Optimierungen. Denn auf guten Content warten User dann auch mal eine Sekunde länger.

    Viele Grüße,
    Sven

  2. Kommentar Autor
    Gerd-E.
    Kommentar

    Hallo Monika,

    vielen Dank für die Anregungen. Das ist ein tolles Ergebnis, bei Seitenaufruf ist die Seite blitzschnell da.

    Über 90 bin ich auch schon gekommen, aber nicht bei mobil.

    Hast du einen Tipp zum Fehler mit „den Ressourcen, die das Rendering blockieren, in Inhalten above the fold“?

    VG Gerd-E.

  3. Kommentar Autor
    N.Koch
    Kommentar

    Hallo,

    hast du dir schon mal statt Google Analytics Piwik angeschaut? Vielleicht hilft das zur 100/100, da es nicht auf einem fremden Server läuft.

    Ramides

  4. Kommentar Autor
    Monika
    Kommentar

    grüß Dich Sven
    im Idealfall gibt es beides,
    dass zb deine Seite fantastischen Inhalt hat, weiß ich erst, wenn ich dort Stammleserin geworden bin, dann warte ich gern.
    Suche über eine Suchmaschine und klick da drauf und muss dann warten, klick ich sofort weg. Da muss ich schon urdringendst ein Problem haben – sonst warte ich nicht mehr. Das hab ich selbst an mir beobachtet und ich bin noch eine gedulige mobile Surferin.

  5. Kommentar Autor
    Monika
    Kommentar

    @Gerd

    es gibt einige technische Lösungen, die dir das CSS aufspliten etc, das erwähn ich nur der Vollständigkeit halber.

    *zuerst wirklich kontrollieren, ob die Bilder 1a und in der richtigen Größe ausgeliefert werden,
    * die Versionsnummern der Scripte ändern,

    *dann das CSS abspecken,
    *kein einziges JS SCript im Header verlinkt

    *und das CSS nicht verlinken, sondern Plaintext in den Header, oder wie es manche machen, dass CSS im Footer laden. Hat beides Vor-und Nachteile, wenn eine CSS größer als 50kb ist, würde ich sie auch vor dem /html laden. Logisch in einer Cache Version.

    Ich habe mir einige der FreeThemes angesehen, da ist oftmals die CSS Datei an die 100kb groß.

    @N.Koch

    hier läuft mal GA dann wieder Piwik, dann mal gar nichts, ich bin kein Statistikfreak, ich teste mich aber immer wieder durch, wie wo was geht und das lieber auf meinen Domains als auf einer Kundendomain :-)

  6. Kommentar Autor
    Tobi
    Kommentar

    Ich sehe es genau so wie Sven!
    Klar ist es wichtig, dass die Seite nicht ewig lädt und ich danke dir auch für diesen Artikel. Allerdings kann nicht jeder Blogger automatisch deine Tipps umsetzen.

    Die Qualität der Beiträge auf dem Blog sind letztendlich entscheidend. Wer seinen Blog allerdings so wie du auf die Ladezeit optimieren möchte, soll dies natürlich tun. Denn die Leser freuen sich immer über schnelle Ladezeiten.

    LG
    Tobi :)

  7. Kommentar Autor
    Sticker
    Kommentar

    ich finde die ladezeiten werden hier dramatisiert… durch solides / schnelles Internet; laden eh alle Seiten rasch; und wenn jemand 100x Bilder zeigen will, zeigt er diese ja dennoch…
    sa richtig lange; ladet ja nur noch kaum was.)

  8. Kommentar Autor
    Jens
    Kommentar

    Hast Du eventuell auch eine gute Alternative zu „Async JS and CSS“ im Fundus?
    „Async JS and CSS“ wird leider seit einem Jahr nicht mehr gepflegt, und scheint mit WP 4.0 nicht wirklich zuverlässig zu funktionieren.

    @Sven, natürlich ist der Content wichtig, aber woher soll ein neuer User denn wissen, ob es sich lohnt oder nicht, wenn er zu lange warten muss. Und woher kommen denn neue Besucher? Die meisten doch mittlerweile über Google oder Bing, oder wie auch immer …

  9. Kommentar Autor
    Sven
    Kommentar

    Hallo Jens.

    Worüber reden wir denn hier? Eine Webseite muss nicht in unter 1 Sekunde geladen sein, um Nutzer zu bekommen. Ich denke, alles unter 5 Sekunden ist okay. Ab Ladezeiten < 3 Sekunden wirds schlicht Sport. Der Aufwand lohnt sich nicht. Denn wer nach 5,5 Sekunden wegklickt, macht das auch bei 2,85…

    Der Punkt ist: Heute muss keiner mehr 30 Sekunden beim Aufbau der Webseite zusehen. DSL sei Dank.

  10. Kommentar Autor
    Theo
    Kommentar

    Gratuliere, um ehrlich zu sein, ich hab noch keine Seite gesehen die solche Werte erreicht. Thumbs up!

  11. Ping WordPress Blog schneller machen › Navagio.de

  12. Kommentar Autor
    Monika
    Kommentar

    hi Jens,
    bei mir funktioniert dieses Plugin auch noch unter der neuen BetaVersion von WP.

    @Sven, es gibt genug Untersuchungen die beweisen, dass fast keiner mehr 5sec wartet und mobil hast du selten Hochgeschwindigkeitszugang zum Netz.

    @Theo danke für das nette Feedback :-)

  13. Kommentar Autor
    ego
    Kommentar

    wow, ich dümpel da immer so im 45er Bereich und bin echt ratlos…