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