Unsere Websites sind zu fett: Optimierung der Frontend Performance

Frontend Performance optimieren

Wir befinden uns in einer Zeit, in der Performance eine sehr wichtige Rolle spielt. Zwar werden Bandbreiten immer größer und auf mobilen Geräten bekommt man auch schon beachtliche Downloadgeschwindigkeiten zusammen, aber nicht immer hat man die beste Übertragungsrate. Oft steht nur GPRS oder Edge (bspw. in der U-Bahn) zur Verfügung oder man befindet sich in einem öffentlichen WLAN, in dem die Geschwindigkeit deutlich gedrosselt wird.

Wir nutzen Ressourcen nicht bewusst genug

Gleichzeitig haben wir immer mehr Möglichkeiten mit Multimediainhalten, wie Bildern oder Videos, zu arbeiten, die natürlich sehr ins Gewicht fallen können. Außerdem sind wir es gewohnt mit fertigen Komplett- oder auch nur Teillösungen zu arbeiten. Sei es nur eine Colorbox, eine umfangreiche Library wie jQuery oder sogar ein komplettes Framework à la Twitter Bootstrap. Das Gute daran ist, dass diese meistens einfach funktionieren und eine Community dahinter steht, die laufend optimiert und weiterentwickelt. Das Problem dabei ist, dass diese Tools meist mehr Eventualitäten abdecken, als für einen persönlich eigentlich notwendig. Das wirkt sich auf die Größe von Javascript- und CSS-Dateien aus, und damit auch auf die Performance und letztendlich auf die Usability und Accessibility. Dazu kommt, dass wir uns darauf verlassen, dass die EntwicklerInnen alles richtig gemacht haben und nicht nur die Technik und das Design passt, sondern auch die Performance.

Die Größe von Webpages ist 2014 um 15% gestiegen

Webpages (also Seiten, nicht komplette Websites!) sind im Durchschnitt knapp 2 Megabyte schwer und haben damit ein eindeutiges Gewichtsproblem. Im Vergleich zu 2013 ist die Durchschnittsgröße einer Seite um 15% gestiegen.

Page Weight 2014

Ich möchte mich in einer Reihe von Artikel speziell mit diesem Thema, also Frontend Performance, beschäftigen und herausfinden, was man machen kann, um unseren Websites beim abspecken zu helfen. Den Anfang mache ich mit CSS und der Frage wie man ungenutztes CSS los werden kann.

Artikel zum Thema „Frontend Performanceoptimierung“

Webfont Performance, FOUT, FOIT und Usability

Es gibt verschiedene Techniken Webfonts zu laden. Dieser Artikel stellt einige davon vor und beschreibt wie man die Webfont Performance optimieren kann. Beitrag lesen

Ungenutztes CSS entfernen mit uncss (gulp)

Die Größe von CSS-Dokumenten ist 2014 im Durchschnitt um 24% gestiegen. In diesem Artikel lernst du, wie man mit gulp ungenutztes CSS entfernen kann.
Beitrag lesen

Dateigröße von Bildern ohne Verluste reduzieren

Mit ImageOptim kann man die Dateigröße von Bildern reduzieren, ohne die Qualität zu verschlechtern. Es ist unter anderem als App und Gulp-Plugin verfügbar. Beitrag lesen

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

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