Aus der Erfahrung von vielen Dutzenden Projekten wissen wir, dass man zur Beschleunigung der Ladezeit zum Beispiel die Anzahl der HTTP Request minimieren sollte. Dies kann mit Massnahmen im Frontend durch das Kombinieren von Files oder das Zusammenfassen von Icons in CSS Sprites erreicht werden. Andere Massnahmen erfordern etwas mehr Wissen und Aufwand und so haben haben wir nachfolgend die grundlegendsten Massnahmen zur Beschleunigung der Ladezeit einer Webseite aufgelistet.

HTTP Caching

Grundsätzlich unterscheidet man 2 Arten von Caching: Browser- und Server-Caching.
Browser-Caching erfordert das korrekte Setzen des Fileheaders, damit Ressourcen wie Bilder, CSS- und JavaScript-Files bei wiederholten Besuchen aus dem Cache des Browsers geholt werden können.
Beim Server-Caching können dieselben Ressourcen auch statisch auf dem Server zwischengespeichert werden und bei wiederholten Aufrufen anstatt dynamisch statisch an den Browser geliefert werden.
Moderne Content Management Systeme wie Typo3, WordPress oder Drupal haben solche Cachingmechanismen bereits integriert oder können mit entsprechenden Plugins erweitert werden.
Links

• Speed up sites with htaccess caching
• Optimizing content efficiency – HTTP caching
• A Beginner’s guide to HTTP Cache headers
• Nginx Content Caching
• Varnish cache

GZip Komprimierung

Mit GZip- oder Deflate-Komponenten können Seiten und deren Ressourcen um ein Vielfaches komprimiert werden und viel Ladezeit eingespart werden. Deflate kann einfacher aufgesetzt werden, GZip ist aber effektiver und weiter verbreitet. Einfach darauf achten, dass nur text-basierte Ressourcen wie HTML, CSS, XML, JSON oder JavaScript komprimiert werden, Bilder und PDF sind bereits komprimierte Ressourcen.
Links

• How to optimize your site with gzip compression
• Optimizing encoding and transfer size of text-based assets

HTTP-Requests minimieren

Diese Massnahme ist eine der Schlüsselfaktoren für eine schnelle Ladezeit. Hierzu gibt es verschiedene Möglichkeiten:

• Kombinieren von Files: Mehrere Files der gleichen Sorte (also CSS mit CSS und JS mit JS) können jeweils in ein einziges File kombiniert werden.
• CSS Sprites: Mit dieser Technik werden Bilder in ein einziges grosses File kombiniert und im HTML mittels background-image und background-position richtig angezeigt.
• Inline Bilder: Dies ist eine relativ neue Technik und wird auch nur von den neusten Browser unterstützt. Dabei werden Bilder nicht über den -Tag aufgerufen, sondern direkt mittels Base64 in den Code geschrieben. Dies macht das File etwas grösser, aber die Anzahl der HTTP-Requests wird um ein Vielfaches gesenkt.

Links

• Minify
• Grunt
• YUI Compressor
• CSS Min

Stylesheets oben, JavaScripts unten

Da das Laden von JavaScript-Files die Darstellung der Seite blockiert sollten diese an das Ende des HTML-Dokumentes gestellt werden. Die Stylesheets sollten vor dem abschliessenden -Tag gestellt werden, um weisse Seiten im IE zu verhindern.

Einsatz von CDN

Die örtliche Distanz des Webseitenbesuchers zum effektiven Standort des Servers, der die Webseite bereitstellt, hat auch einen Einfluss auf die Ladezeit einer Webseite. Mit sogenannten Content Delivery Networks (CDN) können Inhalte auf weltweit verstreuten Servern zur Verfügung gestellt werden und somit dem Webseitenbesucher die Adresse mit den wenigsten Netzwerk Hops ausgeliefert werden.
Links

• CDNJS
• jsDelivr
• Cloudflare

Wollen Sie weitere Massnahmen zur Beschleunigung der Ladezeit Ihrer Webseite erfahren? Dann kontaktieren Sie uns unverbindlich unter info@design42.ch. Wir finden bestimmt eine Handvoll von Massnahmen um Ihre bestehende Seite noch schneller zu machen!