WebPagetest – Website Performance verbessern

Ich hatte von WebPagetest schon ein paar Mal gehört und gelesen, aber es hat eine Weile gedauert, bis ich verstanden habe, was man mit der Website alles anstellen kann. Auf den ersten Blick bekommt man lediglich ein paar Statistiken und Optimierungsvorschläge, die man sonst auch schon von Google PageSpeed kennt. Doch WebPagetest kann noch sehr viel mehr (was übrigens ebenfalls von Google-Mitarbeitern entwickelt wurde).

Zum Beispiel könnt ihr euch die Ladegeschwindigkeit eurer Website von vielen unterschiedlichen Standorten auf der Welt anzeigen lassen oder – und das finde ich noch viel spannender – euch den Aufbau eurer Website in Slow Motion anzeigen lassen. Entweder als Video oder mittels Screenshots, die innerhalb von Sekundenbruchteilen gemacht werden.

Die Usability der Website ist nicht gerade die Beste, es lohnt sich also den ein oder anderen Blogpost mit Tipps zu WebPagetest zu lesen, um weitere nützliche Funktionen zu entdecken.

Zur Website

CSS Stats

Erstellt, wie der Name schon sagt, Statistiken über die Stylesheets einer Website. Nützliches Tool, um die verwendeten Anweisungen auf Herz und Nieren zu prüfen, z.B. die Anzahl der verwendeten Farben, Verschachteln von Anweisungen (CSS-Specifity) uvm. Ich nutze es zurzeit, um für E&F ein CSS-Refactoring durchzuführen.

Zur Website

Unterschiedliche Arten von Style Guides vorgestellt

Style Guides sind für uns Webmenschen meist eine Sammlung von Farb-, Typographie-, Button- und Bilder-Richtlinien fürs Frontend. Sie sollen Designern und Entwicklern die Arbeit an einer Website erleichtern.

Aber auch außerhalb des Webdesign werden Style Guides verwendet und es lohnt sich einen Blick auf die unterschiedlichen Arten zu werfen. Brad Frost stellt sie in seinem Artikel vor.

Zum Artikel

When to use @⁠extend; when to use a mixin

Eigentlich empfiehlt Harry Roberts @extend gar nicht zu nutzen:

„Let me start by saying that I would generally advise never to use @extend at all.“

Die falsche Verwendung führt schnell dazu, dass sich CSS-Dateien unnötig aufblasen und ein vielfaches ihrer eigentlichen Größe erreichen. Wer aber dennoch nicht auf die durchaus praktische Funktion verzichten will, für den hat Harry 3 Tipps.

Zum Artikel

Little Big Details ist zurück!

Wie der Name schon sagt, geht es bei Little Big Details um Details. Kleine Details, die Einem erst beim näheren Betrachten auffallen, die aber beispielsweise die Usability einer Seite verbessern. Oder kleine Eastereggs, die sich die Macher einer Website haben einfallen lassen, um sich selbst auf der Seite zu verewigen oder um den Nutzer zu beeindrucken.

Nach längerer Pause geht es dort nun wieder weiter.

Zur Website