Ein bisschen flotter

Mein Blog ist ja meine Spielwiese. Wenn ich hier am Design etwas herumschraube, dann ist das ja meist sofort sichtbar. Oft probiere ich einfach neue Techniken aus, teste mal ein paar kleine Änderungen. Wie Schrift wirkt etc. pp.

An den letzten zwei Wochenende habe ich hier an den Performanceschrauben gedreht. Und es hat sich gefühlt sehr gelohnt. Die Startseite hat aktuell nur noch ein Pageload von unter einem MB. Das ist sehr wenig, wenn man bedenkt, wie viele Bilder dort zu finden sind – die zudem auch ordentlich groß dargestellt werden.

Vor meinen Optimierungen lag die Seitenladedauer bei ca. 6 Sekunden. Das ist schon relativ schnell gewesen im Vergleich mit anderen Webseiten. Jetzt ist die gesamte Seite in unter 2.2 Sekunden geladen.

Jetzt gibt es für die Startseite ein fünffaches A-Rating von webpagetest.com. Auch Google Page Speed bewertet meine Startseite derzeit mit 89/100 (Mobil) bzw. 95/100 (Desktop) Punkten. Das ist sehr ordentlich.

 

Ein Wasserfall

Was habe ich gemacht?

Schrift

Ich habe die Schrift Dashicon rausgeschmissen. Einzige Verwendung war die Lupe für die Suche. Das ist jetzt eine eingebettete Vektorgrafik. Kommt also bereits via HTML mit. Zusätzlich habe ich die von Typekit geladenen Schrift entschlackt. Die nicht benötigten Schriftschnitte sind rausgeflogen – es waren zwei, die noch von der Entwicklung mit dabei waren – drin. Und, ich habe mich entschieden, einen weiteren Schriftschnitt durch einen anderen zu ersetzen. Macht 100kB weniger von Typekit.

Server

Und generell habe ich mal mit dem Server gesprochen, wie er nun einige Dateien behandeln soll. So werden nun nicht so oft aktualisierte Dateien länger gespeichert bzw. werden diese auf dem lokalen Rechner – bei euch daheim – jetzt auch länger gespeichert. Es muss also nicht jedes Mal erneut der ganze Dateiwust übertragen werden.

Ein weiterer Schritt für den Server wäre ein Wechsel auf einen schnellere Architektur. Da kommen dann Techniken wir Varnish ins Spiel, die jedoch für meinen Anwendungsfall zu viel sind. Damit ist es möglich, Seiten in einem schnellen Cache vorzuhalten – ohne das WordPress zu bemühen.

Schrumpfkur für die Bilder

Heute habe ich dann nich mit WP Smush und TinyPNG die Bilder verlustfrei komprimiert. Das geht mit den beiden Tools recht fix.

WP Smush

Hier sind nur Bilder im jpeg-Format möglich und in der kostenfreien Variante dürfen diese auch nicht größer als 1MB sein. Die Bilder werden auf einen externen Server geladen und dort dann mit einem Script optimiert und anschließend wieder an das WordPress geliefert. Dort werden dann die Bilddateien ersetzt und sollten im Idealfall kleiner sein als vorher.

Compress PNG for WP

Ist das Pendant zum WP Smush für PNG Dateien. Hier ist das Limit 500 Komprimierungen pro Monat. Anschließend wird dies auch kostenpflichtig. Für ein durchschnittliches WordPress-Theme mit 4-5 Bildschnitten können als pro Monat 100 Bilder optimiert werden. Es ist zudem möglich nur ausgewählte Schnitte komprimieren zu lassen. Auch hier wird das ganze auf einen externen Server geschickt und dort dann komprimiert.

LazyLoad

Bisher hatte ich eine Responsive Images Lösung im Einsatz, die für den vorhandenen Platz ein passendes Bild gesucht hat. Nach dem Laden wurde das Bild dann eingefaded. Zudem wurden nur Bilder geladen, die im aktuellen Viewport zu sehen waren. Das habe ich jetzt entfernt. Da die Bilder jetzt super komprimiert und nur in der benötigten Auflösung ausgespielt werden, werden diese vom Server schon korrekt ausgeliefert. Es muss jetzt Clientseitig keine Berechnung mehr erfolgen um noch ein Bildschnitt zu bestimmen.

Nachteil, den ich jetzt in Kauf nehme, das Grid ist nicht mehr so dynamisch wie vorher. Ich kann daher die Bilder nicht mehr in beliebig breiten Boxen platzieren. ( Habe ich bis heute auch gar nicht benötigt).

Sehr schön ist das alles in den Grafiken von webpagetest zu sehen. (blau heute, rot Anfang der Optimierung)

 

Was könnte noch optimiert werden?

  • Google Analytics raus
  • HTML optimieren
  • TypeKit entfernen
  • CSS Inline oder so einbauen, dass es nicht blockiert
  • schnellerer Server

Das sind aber alles Punkte, die für „richtige“ Webseiten interessant sind. Mein kleines Blog ist hiermit schnell genug für meinen Geschmack.

4 Kommentare zu „Ein bisschen flotter

  1. Sehr interessant, sehr interessant. Ich kann mich ja immer noch nicht dazu durchringen Google-Analytics wieder bei mir anzuwerfen und Google das Indizieren wieder zu erlauben … aber Deinen ganzen empirischen Optimierungen machen da Lust …

    1. Achso, puh. Das habe ich noch gar nicht untersucht bzw. ich habe mir noch gar keine Rankings angeschaut wo ich jetzt vergleichen könnte. Was ich jedoch sehe, aktuell kommen die Besucher oft über die Google Bildersuche. Und da ist vermutlich die Geschwindigkeit der Seite erst einmal egal.

Comments are closed.