HTML: Performance durch Resource Hints
Die Frontendperformance von Websites ist äußerst wichtig, um Nutzer nicht auf die Idee zu bringen, schnell eine andere Website aufzurufen. Das W3C bohrt mit Resource Hints HTML mal wieder etwas auf, um komplexen Systemen mit verteilten Ressourcen auf die Sprünge zu helfen.
Motivation
Browser bauen bei der Benutzung einer bestimmten Domain nur eine begrenzte Anzahl an Verbindungen auf. Dies beschränkt die Anzahl der Ressourcen, die gleichzeitig geladen werden können.
Um dies zu umgehen und die verfügbare Bandbreite eines jeweiligen Nutzers besser auslasten zu können, bietet es sich an, Ressourcen auf verschiedene Hosts zu verteilen.
Der Aufbau von neuen Verbindungen ist allerdings ein nicht zu unterschätzender Overhead, wodurch diese Maßnahme weise eingesetzt gehört.
DNS-Prefetch
Die Browser unterstützen bereits das Auflösen einer Domain bevor das HTML komplett eingelesen wurde. Folgendes kommt dabei in den <head>.
<link rel="dns-prefetch" href="//largeimages.mydomain.tld/">
Besonders wenn beispielsweise Javascript am Ende des HTML von externen Ressourcen eingebunden wurde, erhöht diese Maßnahme die Performance spürbar.
Resource Hints
Das W3C geht mit Resource Hints einen Schritt weiter. Mit Preconnect und Preload können ganze Verbindungen aufgebaut bzw. ganze Ressourcen in den Browsercache vorgeladen werden.
Beispiel aus dem Draft:
<link rel="preconnect" href="//example.com"/> <link rel="preload" href="//example.com/next-page.html" as="html" loadpolicy="next"/>
Besonders wenn es verschlüsselte Verbindungen über Leitungen mit hohen Latenzen sind, wird dieses Feature bei korrektem Einsatz erhebliche Geschwindigkeitsverbesserungen erzielen. Bisher wurde diese Funktionalität bei Bedarf mittels XMLHttpRequest in Javascript individuell nachgebaut.
In Chromium wird die Unterstützung für Resource Hints gerade implementiert. Wenn andere Browserhersteller mitziehen, kann bald auf diesen Hack verzichtet werden.
Fazit
In den Anfängen von HTML war Performance noch Nebensache und die Leute haben sich gefreut, wenn sie einen Link zu einem anderen Dokument einbinden und etwas farbig hervorheben konnten.
HTML passt sich nun immer mehr neuen Anforderungen an. 
Nachsatz
Es versteht sich von selbst, dass auf externen Domains keine Ressourcen liegen, die das Rendering blockieren.
Kommentare