Im Bereich „Empfehlungen“ Ihres Lighthouse-Berichts werden alle wichtigen Anfragen aufgeführt, bei denen Abrufanfragen mit <link rel=preconnect> noch nicht priorisiert werden:
Browserkompatibilität
<link rel=preconnect> wird von den meisten Browsern unterstützt. Siehe Browserkompatibilität.
Seitenaufbau mit Vorverbindung beschleunigen
Sie können Hinweise auf Ressourcen vom Typ preconnect oder dns-prefetch hinzufügen, um möglichst frühzeitig eine Verbindung zu wichtigen Drittanbieterursprüngen herzustellen.
<link rel="preconnect"> informiert den Browser darüber, dass Ihre Seite eine Verbindung zu einem anderen Ursprung herstellen möchte und dass der Vorgang so bald wie möglich beginnen soll.
Das Herstellen von Verbindungen erfordert in langsamen Netzwerken oft viel Zeit, insbesondere wenn es um sichere Verbindungen geht, da DNS-Lookups, Weiterleitungen und mehrere Roundtrips zum endgültigen Server, der die Anfrage des Nutzers verarbeitet, erforderlich sind.
Wenn Sie dies im Voraus abwägen, wirkt Ihre Anwendung für den Nutzer möglicherweise flüssiger, ohne die Bandbreitennutzung zu beeinträchtigen. Beim Herstellen einer Verbindung wird die meiste Zeit damit verbracht, zu warten, anstatt Daten auszutauschen.
Der Browser wird durch das Hinzufügen eines Link-Tags auf Ihrer Seite über Ihre Absichten informiert:
<link rel="preconnect" href="https://example.com">
Dadurch wird der Browser darüber informiert, dass die Seite eine Verbindung zu example.com herstellen und von dort Inhalte abrufen möchte.
Beachten Sie, dass <link rel="preconnect"> zwar recht günstig ist, aber dennoch wertvolle CPU-Zeit beanspruchen kann, insbesondere bei sicheren Verbindungen.
Dies ist besonders schlecht, wenn die Verbindung nicht innerhalb von 10 Sekunden verwendet wird, da der Browser sie schließt, wodurch die gesamte frühe Verbindungsarbeit verschwendet wird.
Versuchen Sie im Allgemeinen, <link rel="preload"> zu verwenden, da dies eine umfassendere Leistungsoptimierung ist. Belassen Sie <link rel="preconnect"> jedoch in Ihrem Tool-Gürtel für Grenzfälle wie:
- Anwendungsfall: Woher stammen die Informationen, aber nicht, was Sie abrufen?
- Anwendungsfall: Streaming Media
<link rel="dns-prefetch"> ist ein weiterer <link>-Typ in Bezug auf Verbindungen.
Damit wird nur der DNS-Lookup verarbeitet, doch es bietet eine breitere Browserunterstützung, sodass er als Fallback dienen kann.
Sie verwenden sie genau so:
<link rel="dns-prefetch" href="https://example.com" />.
Stackspezifische Anleitung
Drupal
Verwenden Sie ein Modul, das User-Agent-Ressourcenhinweise unterstützt, damit Sie Ressourcenhinweise für Vorverbindungs- oder DNS-Prefetch-Ressourcen installieren und konfigurieren können.
Magento
Ändern Sie das Layout Ihres Designs und fügen Sie Hinweise auf Ressourcen für die Vorverbindung oder den DNS-Prefetch hinzu.