יש להתחבר מראש למקורות נדרשים

בקטע 'הזדמנויות' בדוח Lighthouse מפורטות כל הבקשות העיקריות שעדיין לא נותנים עדיפות לבקשות אחזור באמצעות <link rel=preconnect>:

צילום מסך של הביקורת לגבי קישור מראש של Lighthouse למקורות נדרשים

תאימות דפדפן

<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.

משאבים