Preconnect-Ursprünge

Silktide prüft, ob Ihre Seite schneller laden kann, indem der Browser vorab darüber informiert wird, welche anderen Server er in Kürze benötigt. Das frühzeitige Öffnen dieser Verbindungen bedeutet, dass Dateien von Drittanbietern früher mit dem Herunterladen beginnen.

Bevor ein Browser irgendetwas von einem neuen Server – einem Schriftarten-Dienst, einem , einem Analytics-Anbieter – herunterladen kann, muss er die Adresse des Servers nachschlagen, eine Verbindung öffnen und die Verschlüsselung aushandeln. Diese Einrichtung erfordert mehrere Netzwerk-Roundtrips, und normalerweise beginnt der Browser erst damit, wenn er erstmals eine Datei von diesem Server entdeckt – was spät im Seitenladevorgang sein kann.

Warum das wichtig ist

Das Einrichten der Verbindung zu einem einzelnen Server kann in einer Mobilfunkverbindung Hunderte Millisekunden kosten, und eine typische Seite kommuniziert mit mehreren Drittservern. Beginnt diese Einrichtung spät – weil die benötigte Datei tief in einem Stylesheet oder Skript referenziert ist –, wirkt sich die Verzögerung direkt auf sichtbare Inhalte wie Schriftarten und Bilder aus.

Ein Preconnect-Hinweis verschiebt diese Kosten ganz an den Anfang des Ladevorgangs, wo sie sich mit Arbeiten überlappen, die der Browser ohnehin ausführt. Er besteht aus einer einzigen Zeile pro Server, ohne visuelle Änderung an der Seite.

So beheben Sie das

Fügen Sie im <head> Ihrer Seite für jeden wichtigen Server, den die Prüfung meldet, einen preconnect-Hinweis hinzu:

<!-- Die Verbindung öffnen, bevor der Browser merkt, dass er sie braucht -->
<link rel="preconnect" href="https:\/\/fonts.gstatic.com" crossorigin>

Fügen Sie das Attribut crossorigin für Server hinzu, die es benötigen – bei Schriftarten ist das immer erforderlich.
Stellen Sie nur zu Servern eine Vorabverbindung her, die für die sichtbare Seite wichtig sind, z. B. dort, wo Ihre Schriftarten, Bilder oder kritischen Skripte liegen. Jede offene Verbindung verbraucht Ressourcen auf dem Gerät der Besuchenden – ein paar Hinweise helfen, Dutzende schaden.
Für weniger wichtige Server ist rel="dns-prefetch" ein günstigerer Hinweis, der nur die Adressauflösung vorab durchführt.

So testet Silktide das

Laden der Seite in einem echten Browser, unter Verwendung des Gerätetyps, der Verbindungsgeschwindigkeit und des Teststandorts, die für Ihre Geschwindigkeitstests konfiguriert sind.
Ermitteln der Server, von denen die Seite herunterlädt, bei denen die Verbindungsherstellung den Download verzögert hat und kein Hinweis für eine frühzeitige Verbindung vorhanden war.
Jeden Server mit der geschätzten Zeit melden, die ein Preconnect-Hinweis einsparen würde.
Die Seite anhand der geschätzten Gesamteinsparung bewerten: Rund 100 Millisekunden führen zu einer Abwertung, und 200 Millisekunden oder mehr werden als schlecht bewertet.

Fehlerbehebung

Ich habe den Hinweis hinzugefügt, aber der Befund bleibt bestehen

Überprüfen Sie die genaue Adresse: Der Hinweis muss mit dem Server übereinstimmen, von dem die Dateien tatsächlich kommen – einschließlich des Protokolls und etwaiger Subdomains (https:\/\/fonts.gstatic.com ist nicht https:\/\/fonts.googleapis.com). Schriftarten benötigen außerdem crossorigin am Hinweis – ohne dieses Attribut öffnet der Browser die falsche Art von Verbindung und verwirft sie anschließend.

Soll ich zu jedem Drittanbieter-Server eine Vorabverbindung herstellen?

Nein. Browser begrenzen, wie viele frühe Verbindungen sie berücksichtigen, und jede davon verbraucht Ressourcen auf dem Gerät der Besuchenden. Reservieren Sie Preconnect für die wenigen Server, deren Dateien bestimmen, was Besuchende zuerst sehen.