Im Bereich „Empfehlungen“ Ihres Lighthouse-Berichts werden alle wichtigen Anfragen
die Abrufanfragen noch nicht mit <link rel=preconnect> priorisiert haben:
Browserkompatibilität
<link rel=preconnect> wird von den meisten Browsern unterstützt. Weitere Informationen finden Sie unter
Browserkompatibilität.
Seitenladezeit durch Vorverbindung verbessern
Sie sollten Hinweise auf Ressourcen vom Typ preconnect oder dns-prefetch hinzufügen
um so früh wie möglich Verbindungen zu wichtigen Quellen Dritter herzustellen.
<link rel="preconnect"> informiert den Browser darüber,
um eine Verbindung
zu einem anderen Ursprung herzustellen,
und der Prozess so bald wie möglich beginnen soll.
Das Herstellen von Verbindungen ist in langsamen Netzwerken oft sehr zeitaufwendig, insbesondere bei sicheren Verbindungen, wie z. B. DNS-Lookups, Weiterleitungen und mehrere Roundtrips an den Server, der die Anfrage des Nutzers verarbeitet.
Wenn Sie all dies im Voraus berücksichtigen, wirkt Ihre Anwendung viel übersichtlicher. ohne negative Auswirkungen auf die Bandbreitennutzung. Beim Herstellen einer Verbindung verbringen Sie die meiste Zeit mit Warten, anstatt Daten auszutauschen.
Sie können den Browser ganz einfach über Ihre Absichten informieren, indem Sie Ihrer Seite ein Link-Tag hinzufügen:
<link rel="preconnect" href="https://example.com">
Dadurch wird dem Browser mitgeteilt,
um eine Verbindung zu example.com herzustellen und Inhalte von dort abzurufen.
Bedenke, dass <link rel="preconnect"> zwar ziemlich günstig ist,
kann es dennoch wertvolle CPU-Zeit in Anspruch nehmen, insbesondere bei sicheren Verbindungen.
Das ist besonders schlecht,
wenn die Verbindung nicht innerhalb von
der Browser schließt, wodurch die gesamte
Verbindungsarbeit verschwendet wird.
Im Allgemeinen
versuchen Sie, <link rel="preload"> zu verwenden,
da es sich um eine umfassendere Leistungsoptimierung handelt,
Behalte aber <link rel="preconnect"> im Werkzeuggürtel für Grenzfälle wie die folgenden vor:
- Anwendungsfall: Wissen, woher Sie stammen, aber nicht, was Sie abrufen
- Anwendungsfall: Streaming Media
<link rel="dns-prefetch"> ist ein weiterer <link>-Typ in Verbindung mit Verbindungen.
Dies verarbeitet nur den DNS-Lookup,
aber es bietet eine breitere Browserunterstützung, sodass es als gutes Fallback dienen kann.
Sie verwenden es auf die gleiche Weise:
<link rel="dns-prefetch" href="https://example.com" />.
Stack-spezifische Anleitung
Drupal
Ein Modul verwenden, das Ressourcenhinweise für User-Agents unterstützt damit Sie Hinweise zu Ressourcen für Vorverbindung oder DNS-Vorabruf installieren und konfigurieren können.
Magento
Layout von Designs ändern und fügen Sie Hinweise zu Ressourcen für Vorverbindung oder DNS-Prefetch hinzu.