Sitespeed Tipps für schnelle und schlanke Websites

User wollen schnelle Websites. Webdesigner wollen ansprechende Websites gestalten. Große Bilder, tolle Effekte durch Javascript und ausgetüftelte CSS Dateien sind dazu notwendig. Doch nicht alle Details werden für die Darstellung und die entsprechende User Experience benötigt. Viel Ballast kann abgeworfen werden, ohne das Nutzererlebnis einzuschränken.

Im aktuellen Artikel, der auf dem OnPage Magazin veröffentlicht ist, gehe ich auf die Maßnahmen der Sitespeed Optimierung ein und gebe Tipps zur schnellen Umsetzung.

CSS verkleinern

Um CSS Dateien richtig zu verkleinern sind in der Regel 3 Schritte notwendig:

1. „Entschlacken“
2. Verkleinern
3. Zusammenführen

HTML Files verkleinern

Wenn Templates eingesetzt werden, Menüs über CMS geladen werden und zahlreiche Snippets für Tools, Tracker oder Tagmanager eingesetzt werden, dann wird jede HTML Seite umfangreich.

Javascript Files verkleinern

Nahezu täglich erscheinen neue Javascript Frameworks, Libraries oder PlugIns. Den Überblick zu halten ist schwierig. Auch werden oftmals nur ganz wenige Funktionen eines Frameworks verwendet. Den Rest kann man getrost entfernen – oder doch nicht?

Bilder verkleinern

Bilder sind gegenwärtig die wertvollste Währung im Internet. Daher macht es Sinn die Bilder so zu optimieren, dass diese schnell übertragen werden und trotzdem ohne Qualitätsverlust erscheinen.
Im Artikel wird auf die Optimierung wie folgt eingegangen:

1. JPG und PNG Bilder komprimieren
2. Bilder in Sprites zusammenfassen
3. Icons durch Fonts ersetzen

Taskrunner Grunt & Gulp zur Vereinfachung der Prozesse

Nach jeder Änderung am System oder an den Inhalten muss die Optimierung erneut durchgeführt werden, da unter Umständen Teile des neuen Codes oder neue Bilder noch nicht optimiert sind. Um das zu erleichtern macht es Sinn Taskrunner einzusetzen.
Im Artikel auf dem onPage.oeg Magazin sind für jede Maßnahme auch die entsprechenden Grunt oder Gulp Skripte mitangefügt.

Link zum Artikel: Fastenzeit für die Website – Tipps zur Entschlackung