Wir haben gute Nachrichten: Early Hints und Fetch Priorities arbeiten ab sofort automatisch und nutzen das hochleistungsfähige Cloudflare-Netzwerk. Vor knapp einem Jahr haben wir Early Hints auf den Markt gebracht. Dabei handelt es sich um eine Methode, mit der Webserver Anweisungen asynchron an den Browser senden können, während sie die vollständige Antwort vorbereiten. Anstatt also einfach tatenlos auf die vollständige Antwort der Webseite zu warten, werden dem Browser proaktiv Vorschläge dazu gemacht, wie sich eine Webseite für den Besucher schneller laden lässt.
Bei ersten Versuchen im Labor registrierten wir eine Verkürzung der Seitenladezeit um mehr als 30 %. Seitdem haben wir etwa zwei Billionen Hinweise für mehr als 150.000 Websites mit diesem Produkt übermittelt.
Um Early Hints auf einer Website sinnvoll einsetzen zu können, müssen die Kopfzeilen (Header) von HTTP-Links oder Bestandteile von HTML-Links so konfiguriert sein, dass darin angegeben wird, welche Assets früher geladen oder mit welchen Drittservern im Voraus eine Verbindung hergestellt werden soll. Um diese Entscheidungen treffen zu können, müssen Sie zunächst verstehen, wie Ihre Website mit Browsern interagiert. Außerdem müssen die Assets ermittelt werden, die das Rendern blockieren, und für diese Hinweise versandt werden. Dabei kommt es darauf an, keine Implementierungsstrategien anzuwenden, mit denen die Netzwerkbandbreite für das Laden von weniger wichtigen Assets voll beansprucht wird. Mit anderen Worten: Sie können nicht alle Assets mit Early Hints versehen und gute Ergebnisse erwarten.
Für Nutzer, die über das nötige Wissen verfügen und in der Lage sind, Early Hints beim Ursprungsserver (oder über einen Worker) zu konfigurieren, funktioniert die Lösung reibungslos. Doch wenn man keinen Zugriff auf den Ursprungsserver hat (z. B. bei Verwendung von SaaS-Plattformen) oder sich unsicher ist, welche Assets vorgeladen bzw. bevorzugt behandelt werden sollten, oder wenn man sich einfach auf den Aufbau seiner eigenen Anwendung konzentrieren möchte, dann stellt sich die Frage: „Sollte Cloudflare als zwischengeschalteter Server nicht wissen, auf welchem Weg sich die Performance der Website am besten optimieren lässt?“
Die Antwort lautet ja. Deshalb freuen wir uns, dass wir jetzt darauf eingehen können, wie Smart Hints die beste Priorität für Web-Assets ermitteln kann, ohne das von Entwicklerseite etwas konfiguriert werden muss. Wenn Sie sich am Betatest dieser Funktion beteiligen möchten, können Sie sich hier dafür anmelden. Wir informieren Sie dann darüber, wie Sie uns im weiteren Jahresverlauf bei der Erprobung von Smart Hints unterstützen können.
Hintergrund
Wenn eine Webseite aufgerufen wird, fordert der dafür genutzte Browser von dem Server zahlreiche Einzelressourcen an. Dabei kann es sich um sichtbare Elemente wie Bilder, Text und Videos ebenso handeln wie etwa um im Hintergrund eingesetzte Logik (JavaScript usw.), die beispielsweise für eine Analyse der Seite oder für bestimmte Funktionen genutzt wird. Wie schnell Nutzer die Seite angezeigt bekommen und mit ihr interagieren können, hängt maßgeblich von der Reihenfolge ab, in der diese Ressourcen geladen werden.
Wenn der Browser eine HTML-Antwort von dem Server erhält, analysiert er diese sequenziell von Anfang bis Ende. Sobald die Antwort den Browser erreicht, wird sie in <head> und <body> unterteilt.
Der <head>-Abschnitt erscheint am Anfang der HTML-Anwort und enthält die wichtigsten Elemente, etwa Stylesheets, Skripte und weitere Anweisungen für den Browser. Stylesheets definieren das Aussehen der Seite und Skripte liefern die erforderliche Logik für interaktive Funktionen.1
Das schnelle Laden von Stylesheets ist wichtig, weil die Browser auf diese Anweisungen zur Darstellungen der Inhalte warten. Skripte sind aber auch von Interesse, weil sie sich entsprechend der dem Browser gesendeten Anweisungen unterschiedlich verhalten können. Enthält ein Skript keine konkreten Anweisungen (wie „defer/async/inline“), kann es den weiteren Ladevorgang blockieren. Begegnet dem Browser ein solches blockierendes Skript, setzt er die Verarbeitung der Webseite aus und wartet, bis das Skript geladen und vollständig ausgeführt wurde. So wird sichergestellt, dass die Skript-Funktionen dem Besucher auch zur Verfügung stehen. Allerdings kann dadurch das Ausspielen von Inhalten verzögert werden, weil der Browser auf die Beendigung des Skripts warten muss, um mit der Verarbeitung fortzufahren.
Bis der Browser den <body>-Abschnitt des Dokuments erreicht, wird dem Besucher der Seite nichts angezeigt. Deshalb muss der Ladevorgang für den <head>-Abschnitt unbedingt so weit wie möglich optimiert werden. Je kürzer der Zeitraum, in dem die Stylesheets und die blockierenden Skripte geladen werden, desto schneller kann der Browser mit dem Rendern der Seiteninhalte beginnen. Dadurch wird den Besuchern die Webseite zügiger angezeigt und sie können schneller damit interagieren.
Unter Umständen ist es ziemlich kompliziert, eine optimale Webperformance zu erreichen. In der Regel ermittelt der Browser, in welcher Reihenfolge die für den Seitenaufbau erforderlichen Ressourcen geladen werden müssen. In letzter Zeit wurden aber eine Reihe von Tools (Early Hints, Fetch Priority, Lazy-Loading, H2 Priorities) eingeführt, die Entwicklern dabei helfen, zur Verkürzung der Ladezeiten eine individuelle Priorisierung von Ressourcen für Browser festzulegen. Diese Werkzeuge und Methoden zur Definierung der Ressourcenprioritäten können hilfreich sein. Sie müssen aber implementiert und getestet werden, um sicherzustellen, dass sie ordnungsgemäß funktionieren.
Werkzeuge zur Priorisierung
Zwei Methoden zur Steigerung der Website-Performance erfreuen sich inzwischen großer Beliebtheit: Early Hints und Fetch Priorities. Diese Tools liefern dem Browser Informationen darüber, in welcher Reihenfolge er die Assets laden muss, um eine die Performance wichtiger Ressourcen zu steigern.
Early Hints
Early Hints erlaubt es dem Server, dem Client einige Informationen zu übermitteln, bevor die endgültige Antwort zur Verfügung steht.
Schickt ein Client eine Anfrage an einen Server, kann dieser einen frühen Hinweis (Early Hint) darauf liefern, wie die abschließende Antwort aussehen wird. Es handelt sich um eine eigenständige Antwort mit Headern, die in Verbindung mit der endgültigen Antwort stehen. Dabei kann es sich etwa um wichtige statische Objekte handeln, die sich früh anfordern lassen, oder um Links zu den relevanten Ressourcen.
Early Hints geben dem Client die Möglichkeit, mit der Verarbeitung der erhaltenen Informationen schon zu beginnen, während er noch auf die endgültige Antwort wartet. Der Client kann den Early Hint nutzen, um schon früh ein Vorabladen von Ressourcen einzuleiten, und um im Vorfeld Verbindungen zu Servern herzustellen, die über Informationen für die endgültige Antwort verfügen. Das kann die Ladezeiten verkürzen.
Fetch Priorities
Ein weiteres mächtiges Werkzeug zur Optimierung des Ladens von Ressourcen ist Fetch Priorities (früher Priority Hints).
Beim Analysieren einer Webseite stufen Browser der Anforderung von Ressourcen wie Skripten und Stylesheets oft eine höhere Bedeutung ein als der optimalen Reihenfolge von Downloads und einer effizienten Bandbreitennutzung. Sie entscheiden anhand von Faktoren wie Ressourcentyp oder der Position innerhalb der Webseite und innerhalb der HTML-Antwort über die Priorität, die den jeweiligen Ressourcen zugestanden wird. Beispielsweise sollten Bilder, die sich in einem für den Besucher sichtbaren Bereich befinden, als höherrangiger eingestuft werden. Eine sehr hohe Priorität wird unter Umständen auch wichtigen Skripten eingeräumt, die früh im <head>-Abschnitt geladen werden. Normalerweise leisten Browser bei der Zuweisung der Priorisierung gute Arbeit. Allerdings treffen sie deshalb nicht notwendigerweise immer die optimale Entscheidung für jedes Szenario.
Der Einsatz von Fetch Priorities verschafft Entwicklern zusätzliche Kontrolle über das Laden von Ressourcen und die Zuweisung einer höheren/niedrigeren Priorität verschiedener Ressourcen auf ihrer Webseite. Dadurch lässt sich die Gesamtperformance der Webseiten unter Umständen optimieren.
Early Hints und Fetch Priorities sind unglaublich hilfreich bei der Optimierung der Performance von Webseiten. Sie verlangen jedoch oft Zugriff auf die HTML-Ressourcen, um die Prioritäten verändern zu können, und gewisse Kenntnisse darüber, wie sich die Reihenfolge im Verhältnis zu anderen Ressourcen am besten festlegen lässt. Der gemeinsame Einsatz dieser Tools eröffnet Entwicklern die Möglichkeit, immer komplexere Performance-Strategien zu verfolgen. Allerdings ist der Test-, Konfigurations- und Verwaltungsaufwand sehr hoch, weil Webseiten immer wieder überarbeitet werden. Smart Hints erleichtert die Nutzung dieser Werkzeuge. Dafür nutzt die Lösung unsere RUM (Real User Monitoring)-Daten-Beacons und Heuristiken zur besseren Umsetzung von Priorisierungsstrategien, ohne dass ein weiteres Zutun der Entwickler erforderlich ist.
Wie wird künftig die Reihenfolge der Assets bestimmt?
Das Cloudflare-Produkt Smart Hints wird die Funktionen von Early Hints und Fetch Priorities zum Optimieren der Ressourcen-Bereitstellung nutzen. Dafür greifen wir auf unseren umfangreichen RUM-Datensatz für Webseiten im gesamten World Wide Web zurück. Eine Nachjustierung bei der Festlegung der Reihenfolge der Ressourcen erfolgt im laufenden Betrieb. Mit Smart Hints werden anhand einer konkreten Antwort die angemessenen Hinweise und Prioritäten unmittelbar dynamisch ermittelt.
Aber wie funktioniert das?
Cloudflare erhebt Performance-Daten auf zwei Wegen: mit synthetischen Testverfahren und über Real User Measurements (RUM). Beim synthetischen Testen werden die Daten durch das Laden einer Webseite in einem automatisierten Browser innerhalb einer kontrollierten Umgebung erfasst. Im Rahmen von RUM werden ebenfalls Performance-Daten gesammelt, aber von echten Nutzern, die die Webseite mit regulären Browsern aufrufen. Bei diesem Verfahren wird ein kurzes Stück JavaScript-Code, ein sogenannter Beacon, in die Webseite eingespeist. Cloudflare erhebt große Mengen RUM-Daten Tausender Websites.
Anhand dieser beiden Datenquellen können wir durch smarte Analyse die Nadelöhre beim Laden von Websites aufspüren. Werden diese durch das Herunterladen von Ressourcen verursacht, die das Rendern blockieren, kann Cloudflare Smart Hints generieren. Diese erlauben es dem Browser, diese Ressourcen beim Download vorrangig zu behandeln.
Während der Markteinführung von Smart Hints werden wir mit dem Einsatz von Lernmodellen experimentieren, um nach Mustern Ausschau zu halten, die sich eventuell in Heuristiken umwandeln lassen. Diese Heuristiken könnten dann genutzt werden, um die Performance vergleichbarer Websites zu verbessern, die weder RUM noch synthetisches Testen verwenden.
Mit Smart Hints kann Cloudflare die Art und Weise revolutionieren, in der Websites und Anwendungen bereitgestellt werden. So lässt sich das Surfen nicht nur beschleunigen, sondern auch reibungsloser und angenehmer gestalten. Wir werden die richtige Reihenfolge für den jeweiligen Client ableiten, um den Kunden dabei zu helfen, die bestmögliche Performance für ihre Website zu erzielen. Gleichzeitig wird die Zeit für die Optimierung einer sich kontinuierlich verändernden Webseite minimiert.
Wie kann ich Cloudflare dabei unterstützen?
Vor einem größer angelegten Rollout werden wir unsere Systeme umfangreichen Betatests unterziehen, um sicherzustellen, dass wir für alle Arten von Inhalten die besten Entscheidungen hinsichtlich der Performance treffen.
In den kommenden Monaten werden wir eine Beta-Kohorte aufbauen und uns mit deren Hilfe vergewissern, dass Smart Hints eine ausgezeichnete Nutzererfahrung bieten kann. Wenn Sie uns dabei unterstützen möchten, können Sie sich hier für die Closed Beta-Version anmelden (die Sie unter der Registerkarte „Speed“ im Dashboard finden). Sobald wir startklar sind, lassen wir Ihnen die nötigen Informationen zur Aktivierung und zum Hinterlassen von Feedback zukommen.
Fazit
Wir freuen uns schon darauf, mit Rückmeldungen aus unserer Community diese code- und konfigurationsfreie Lösung weiterzuentwickeln und zu optimieren, um die Ladezeiten von Webseiten dahinschmelzen zu lassen.
1Ja, Skripte und Stylesheets können sich auch im <body>-Abschnitt befinden, aber vornehmlich sind sie im <head>-Abschnitt angesiedelt.