Im Bereich „Empfehlungen“ Ihres Lighthouse-Berichts sind alle wichtigen Anfragen aufgeführt, für die Abrufanfragen noch nicht priorisiert werden. <link rel=preconnect>:
Browserkompatibilität
<link rel=preconnect> wird von den meisten Browsern unterstützt. Siehe Browserkompatibilität.
Seitenladezeit durch Vorverbindung verbessern
Wenn Sie Hinweise auf Ressourcen vom Typ preconnect oder dns-prefetch hinzufügen, können Sie frühzeitig eine Verbindung zu wichtigen Drittanbieterursprüngen herstellen.
<link rel="preconnect"> informiert den Browser darüber, dass mit Ihrer Seite eine Verbindung zu einem anderen Ursprung hergestellt werden soll und dass der Vorgang so schnell wie möglich starten soll.
Das Herstellen von Verbindungen dauert in langsamen Netzwerken oft längere Zeit, insbesondere bei sicheren Verbindungen, da DNS-Suchanfragen, Weiterleitungen und mehrere Umläufe zum endgültigen Server erforderlich sein können, der die Anfrage des Nutzers verarbeitet.
Wenn Sie all dies im Voraus erledigen, kann Ihre Anwendung für Nutzer viel flüssiger erscheinen, ohne dass die Bandbreitennutzung beeinträchtigt wird. 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">
So wird dem Browser mitgeteilt, dass die Seite eine Verbindung zu example.com herstellen und Inhalte von dort abrufen soll.
Beachten Sie, dass <link rel="preconnect"> zwar recht günstig ist, aber dennoch wertvolle CPU-Zeit beanspruchen kann, insbesondere bei sicheren Verbindungen.
Das ist besonders schlecht, wenn die Verbindung nicht innerhalb von 10 Sekunden verwendet wird, da sie vom Browser geschlossen wird und die gesamte vorherige Verbindungsarbeit verpufft.
Verwenden Sie im Allgemeinen <link rel="preload">, da dies eine umfassendere Leistungsoptimierung ist. Behalten Sie <link rel="preconnect"> aber für Grenzfälle wie die folgenden im Hinterkopf:
<link rel="dns-prefetch"> ist ein weiterer <link>-Typ, der sich auf Verbindungen bezieht.
Diese Methode verarbeitet nur die DNS-Suche, wird aber von mehr Browsern unterstützt und kann daher als Fallback dienen.
Sie verwenden es auf die gleiche Weise:
<link rel="dns-prefetch" href="https://example.com" />.
Stackspezifische Anleitung
Drupal
Du kannst Preconnect- oder dns-prefetch-Ressourcenhinweise hinzufügen, indem du ein Modul installierst und konfigurierst, das Funktionen für User-Agent-Ressourcenhinweise bietet.
Magento
Ändern Sie das Layout Ihres Designs und fügen Sie Hinweise auf Ressourcen in Form einer Vorverbindung oder eines DNS-Prefetch hinzu.