Ladezeiten sparen mit dns-prefetch, preconnect, preload und HTTP/2 push

Unser Kollege Johannes stellte in einem internen Vortrag Resource Hints und diverse andere Methoden vor, mit denen Ladezeiten von Websites und externen Inhalten bzw. Ressourcen verkürzt und die Performance verbessert werden können. Thematisiert wurden dns-prefetch, preconnect, preload und HTTP/2 push.

Durch explizites Aufrufen von DNS-Prefetching kann die Auflösung von IP-Adressen bereits vor dem Aufruf von Inhalten externer Domains durchgeführt werden. Da die Einbindung externer Domains ihren Aufruf mit sich bringt, wird dadurch möglicherweise das Laden einer Website verlangsamt. Die Verwendung von DNS-Prefetch-Links kann also dabei helfen, die Ladezeit um einige (Mili-)Sekunden zu verbessern.

WPT ohne alles

Ersten Laden ohne Optimierung (Usecase: Font Loading)

wpt dns prefetch

Ladezeiten mit DNS-prefetch (Usecase: Font Loading)

Preconnect hingegen ermöglicht es dem Browser Verbindungen einzurichten, bevor eine HTTP-Anfrage an den Server gesendet wird. Teure Roundtrips, die durch DNS-Lookups, TCP-Handshake und ggfs. TLS-Negotiaton entstehen, können hierdurch aus dem Request-Ablauf eliminiert und Ladezeiten verkürzt werden.

wpt mit preconnect

Ladezeiten mit preconnect (Usecase: Font Loading)

Bei Preload handelt es sich um einen neuen Web-Standard, der mehr Kontrolle bei der Anforderung bestimmter Ressourcen ermöglicht. Einen nützlichen Anwendungsfall stellt unter anderem die frühe Beschaffung kritischer Ressourcen dar, deren Ausführung erst später erwartet wird.

HTTP/2 push erlaubt das Senden von Subressourcen, bevor diese von Client angefordert wurden. Die Zeit, in der das HTML „zusammengebaut“ wird, kann somit überbrückt und die Performance hierdurch verbessert werden. Cache-bare Ressourcen sollten jedoch nicht gepusht werden, da nicht alle Browser den Cache prüfen und den Push ggfs. unterbrechen. Die Verwendung von HTTP/2 push sollte daher nur in Verbindung mit einer sinnvollen Cache-Lösung stattfinden.

shop-apotheke.com erzielt Load-Time-Spitzenwert mit Sevenvals Frontend-Server

  • Mit einer durchschnittlichen Load-Time von 2,44 Sekunden bedient shop-apotheke.com seine mobilen Nutzer schneller als mancher E-Commerce-Gigant
  • Kein doppelter Aufwand: Inhalte für Desktop- und Mobile-Version werden einmalig angelegt

shopapothekeKöln, 17. Dezember 2014 – Die Mobile-Site von shop-apotheke.com verwöhnt mobile Einkäufer mit besonders kurzen Ladezeiten. Durchschnittlich vergehen nur 2,4 Sekunden beim ersten Laden der Webseite bis Smartphone-Nutzer in einem Sortiment mit über 100.000 Produkten suchen, Angebote anschauen oder in Kategorien stöbern können. Auch die Bildergalerie mit zwölf besonderen Angeboten lässt sich umgehend und flüssig durchklicken. Hier werden auch saisonale Themen gezeigt, wie derzeit das Weihnachts-Special. Continue reading