Für die extra Millisekunde: DNS Prefetch

posted in Entwickler on by with No Comments

Sprintstart

Wer (anders als ich in diesem Blog) bereits seine Webseite bis zum Ende durchoptimiert hat, für den hab ich heute noch einen kleinen Spezialtrick: DNS Prefetch. Lässt sich in wenigen Sekunden implementieren und spart bei hochfrequentierten Seiten jedem Benutzer wenige Millisekunden Ladezeit ein.

Jeder browser kontaktiert vor dem Abrufen einer Resource von einem Server ja zuerst einmal einen DNS Server um dessen IP zu erfahren. Das macht er im Regelfall genau dann, wenn die Resource auch im Seitenaufbau gebraucht wird. Werden nur Daten vom eigenen Server ausgeliefert ist das kein Problem, dann geschieht diese DNS Auflösung genau einmal bei der ersten abgerufenen Seite und wird danach gecached. Werden aber auch Daten von anderen Servern (Goggle Analytics, Facebook Like Button, …) angefordert ist für diese wieder eine DNS Auflösung erforderlich.

Mit dem DNS Prefetch kann ich den Browser schon direkt beim Laden der Seite darauf hinweisen von welchen Domains er sich schon einmal die DNS Daten suchen kann, damit diese dann im Bedarfsfall schon zur Verfügung stehen. Der Browser ist dann schlau genug und führt dieses Prefetching dann durch, wenn er gerade etwas Zeit hat, zum Beispiel weil er noch auf andere Daten wartet. Dieses Prefetching blockiert in diesem Moment nicht die weitere Tätigkeit des Browsers sondern findet asynchron statt.

Ohne Prefetch werden die DNS Daten erst dann gesucht wenn die Resource wirklich gebraucht wird. In diesem Fall blockiert der Fetch den weiteren Ablauf, weil die Resource erst dann gefunden und verarbeitet werden kann, wenn der Browser dessen DNS Daten kennt.

Nehmen wir das Beispiel Biodukte.de. Hier setzen wir sowohl Ressourcen von Google als auch von Facebook ein. Mit dem Prefetch kann der Browser die nötigen Infos schon vorab anfragen:

prefeth

Gerade für die Google Analytics sieht man gut, dass von den insgesamt 646 ms Ladezeit vorab schon einmal über 400 ms für den Prefetch abgefangen werden können. Die Seite ist damit schneller fertig mit dem Laden aller Ressourcen und unter Umständen auch früher für den Nutzer verfügbar.

Im Quelltext bekommt man das ganze sehr einfach eingebunden. Einfach die folgende Zeile im Headerbereich einsetzen:

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

Wer den IE 9 noch unterstützen muss (oder will) ist auf die folgende zusätzliche Zeile angewiesen:

<link rel="prefetch" href="//host_name_to_prefetch.com">

Einen kleinen Nachteil gibt es noch: Zumindest Chrome führt kein Prefetching durch für HTTPS Domains, da Angreifer so frühzeitig über eine kommende Verbindung informiert wären und entsprechende Attacken vorbereiten könnten.

Image Credits: © Stefan Schurr – Fotolia.com

Schreibe einen Kommentar

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