בקטע 'הזדמנויות' בדוח Lighthouse מפורטות כל הבקשות החשובות שעדיין לא ניתנת להן עדיפות על פני בקשות אחזור באמצעות <link rel=preconnect>:
תאימות דפדפן
<link rel=preconnect> נתמך ברוב הדפדפנים. תאימות לדפדפנים
שיפור מהירות הטעינה של הדפים באמצעות חיבור מראש (preconnect)
כדאי לשקול להוסיף את ההינטים של המשאבים preconnect או dns-prefetch כדי ליצור מראש קישורים אל מקורות חשובים של צדדים שלישיים.
<link rel="preconnect"> מודיעה לדפדפן שהדף שלכם מתכוון ליצור חיבור למקור אחר, ושאתם רוצים שהתהליך יתחיל בהקדם האפשרי.
לרוב, יצירת חיבורים נמשכת זמן רב ברשתות איטיות, במיוחד כשמדובר בחיבורים מאובטחים, כי היא עשויה לכלול חיפושי DNS, הפניות אוטומטיות וכמה נסיעות הלוך ושוב לשרת הסופי שמטפל בבקשה של המשתמש.
אם יטפלו בכל הנושאים האלה מראש, האפליקציה תהיה מהירה יותר למשתמש בלי להשפיע לרעה על השימוש ברוחב הפס. רוב הזמן של יצירת החיבור מוקדש להמתנה, ולא לחילופי נתונים.
כדי להודיע לדפדפן על הכוונה שלכם, פשוט מוסיפים לדף תג קישור:
<link rel="preconnect" href="https://example.com">
כך הדפדפן יוכל לדעת שהדף מתחבר ל-example.com ולאחזר ממנו את התוכן.
חשוב לזכור ש-<link rel="preconnect"> די זול, אבל הוא עדיין עלול לגזול זמן יקר מהמעבד (CPU), במיוחד בחיבורים מאובטחים.
המצב הזה גרוע במיוחד אם לא משתמשים בחיבור תוך 10 שניות, כי הדפדפן סוגר אותו, וכך כל העבודה המוקדמת על החיבור מתבזבזת.
באופן כללי, כדאי לנסות להשתמש ב-<link rel="preload">, כי זו שיטה מקיפה יותר לשיפור הביצועים. עם זאת, כדאי לשמור את <link rel="preconnect"> בתיק הכלים שלכם למקרים קיצוניים כמו:
<link rel="dns-prefetch"> הוא סוג אחר של <link> שקשור לחיבורים.
השיטה הזו מטפלת רק בחיפוש DNS,
אבל יש בה תמיכה רחבה יותר בדפדפן, כך שהיא יכולה לשמש כחלופה טובה.
משתמשים בו בדיוק באותו אופן:
<link rel="dns-prefetch" href="https://example.com" />.
הנחיות ספציפיות ל-stack
Drupal
ניתן להוסיף רמזים של משאבים מסוג Preconnect או dns-prefetch על ידי התקנה והגדרה של מודול שמספק מתקנים לרמזים של משאבים של סוכן משתמש.
Magento
משנים את הפריסה של העיצוב ומוסיפים רמזים של משאבים לקישור מראש או לשליפה מוקדמת של נתוני DNS.