בקטע 'הזדמנויות' בדוח Lighthouse מפורטות כל הבקשות העיקריות
שעדיין לא נותנים עדיפות לבקשות אחזור באמצעות <link rel=preconnect>
:
תאימות דפדפן
<link rel=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" />.
הנחיות ספציפיות למקבץ
Drupal
תוכלו להשתמש במודול שתומך ברמזים של משאבים לסוכן משתמש, כדי להתקין ולהגדיר רמזים לחיבור מראש או לשליפה מראש של DNS.
Magento
משנים את הפריסה של העיצובים ומוסיפים רמזים של משאבים לקישור מראש או לשליפה מראש של DNS.