למידע על הרמזים של המשאבים rel=preconnect ו-rel=dns-prefetch ואיך להשתמש בהם.
כדי שהדפדפן יוכל לבקש משאב משרת, הוא צריך ליצור חיבור. יצירת חיבור מאובטח כוללת שלושה שלבים:
מחפשים את שם הדומיין וממירים אותו לכתובת IP.
מגדירים חיבור לשרת.
הצפנת החיבור למטרות אבטחה.
בכל אחד מהשלבים האלה, הדפדפן שולח מקטע נתונים לשרת, והשרת שולח בחזרה תשובה. המסלול הזה, מהמוצא ליעד ובחזרה, נקרא נסיעה הלוך ושוב.
בהתאם לתנאי הרשת, טיסה הלוך ושוב עשויה להימשך זמן רב. תהליך הגדרת החיבור עשוי לכלול עד שלוש נסיעות הלוך ושוב, ובמקרים ללא אופטימיזציה, מספר הנסיעות עשוי להיות גבוה יותר.
טיפול מראש בכל מה שקשור לנושא גורם לאפליקציות להרגיש הרבה יותר מהר. במאמר הזה נסביר איך לעשות זאת באמצעות שתי הנחיות למשאבים: <link rel=preconnect> ו-<link rel=dns-prefetch>.
יצירת קשרים מוקדמים עם rel=preconnect
דפדפנים מודרניים עושים כמיטב יכולתם כדי לחזות אילו חיבורים דף יזדקק להם, אבל הם לא יכולים לחזות את כולם בצורה מהימנה. החדשות הטובות הן שאפשר לתת להם רמז (משאב 😉).
הוספת rel=preconnect ל-<link> מעדכנת את הדפדפן שהדף שלכם מתכוון ליצור חיבור לדומיין אחר, ושתרצו שהתהליך יתחיל בהקדם האפשרי. המשאבים ייטענו מהר יותר כי תהליך ההגדרה כבר יושלם עד שהדפדפן ידרוש אותם.
ההנחיות למשאבים נקראות כך כי הן לא הוראות חובה. הם מספקים את המידע על מה שאתם רוצים שיקרה, אבל בסופו של דבר ההחלטה אם לבצע אותם היא של הדפדפן. הגדרה ושמירה של חיבור פתוח דורשות הרבה עבודה, ולכן יכול להיות שהדפדפן יבחר להתעלם מהצעות לשימוש במשאבים או לבצע אותן באופן חלקי, בהתאם למצב.
עדכון הדפדפן לגבי הכוונה שלכם צריך להיות פשוט להוסיף תג <link> לדף:
<link rel="preconnect" href="https://example.com">
אפשר לקצר את זמן הטעינה ב-100 עד 500 אלפיות השנייה על ידי יצירת חיבורים מוקדמים למקורות חשובים של צד שלישי. הנתונים האלה עשויים להיראות קטנים, אבל הם משפיעים על האופן שבו המשתמשים תופסים את הביצועים של דפי האינטרנט.
תרחישים לדוגמה של rel=preconnect
לדעת מאיפה, אבל לא מה אתם מאחזרים
בגלל יחסי התלות בגרסאות, לפעמים נוצר מצב שבו אתם יודעים שתבקשו משאב מ-CDN מסוים, אבל לא את הנתיב המדויק שלו.
מקרה נפוץ אחר הוא טעינת תמונות מCDN של תמונות, שבו הנתיב המדויק של התמונה תלוי בשאילתות מדיה או בבדיקות של תכונות בסביבת זמן הריצה בדפדפן של המשתמש.
במצבים אלה, אם המשאב שתאחזר חשוב, כדאי שתחסוך זמן רב ככל האפשר על ידי התחברות מראש לשרת. הדפדפן לא יוריד את הקובץ לפני שהדף יבקש אותו, אבל הוא יכול לטפל מראש בהיבטים של החיבור, וכך לחסוך למשתמש את הצורך להמתין למספר נסיעות הלוך ושוב.
מדיה בסטרימינג
דוגמה נוספת שבה כדאי לחסוך זמן בשלב החיבור, אבל לא בהכרח להתחיל לאחזר תוכן באופן מיידי, היא כשמשדרים מדיה ממקור אחר.
בהתאם לאופן שבו הדף מטפל בתוכן שמשודר, מומלץ להמתין עד שהסקריפטים יטענו ויהיה אפשר לעבד את הסטרימינג. חיבור מראש עוזר לקצר את זמן ההמתנה לנסיעה הלוך ושוב אחת כשתהיו מוכנים להתחיל באחזור.
איך מטמיעים את rel=preconnect
אחת הדרכים להפעיל preconnect היא להוסיף תג <link> ל-<head> של המסמך.
<head>
<link rel="preconnect" href="https://example.com">
</head>
חיבור מראש יעיל רק לדומיינים שאינם דומיין המקור, לכן אין להשתמש בו באתר.
אפשר גם ליזום חיבור מראש באמצעות כותרת ה-HTTP Link:
Link: <https://example.com/>; rel=preconnect
חלק מסוגי המשאבים, כמו גופנים, נטענים במצב אנונימי. במקרים כאלה, צריך להגדיר את המאפיין crossorigin עם ההצעה preconnect:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
אם משמיטים את המאפיין crossorigin, הדפדפן מבצע רק את חיפוש ה-DNS.
פתרון שם דומיין מוקדם באמצעות rel=dns-prefetch
אתם זוכרים אתרים לפי השמות שלהם, אבל השרתים זוכרים אותם לפי כתובות ה-IP שלהם. לכן קיימת מערכת שמות הדומיינים (DNS). הדפדפן משתמש ב-DNS כדי להמיר את שם האתר לכתובת IP. התהליך הזה – רזולוציית שם הדומיין – הוא השלב הראשון ביצירת חיבור.
אם דף צריך ליצור חיבורים לדומיינים רבים של צדדים שלישיים, חיבור מראש של כולם לא מועיל. מומלץ להשתמש בהנחיה preconnect רק לחיבורים הקריטיים ביותר. בכל שאר המקרים, כדאי להשתמש ב-<link rel=dns-prefetch> כדי לחסוך זמן בשלב הראשון, חיפוש ה-DNS, שבדרך כלל נמשך כ-20 עד 120 אלפיות שנייה.
רזולוציית ה-DNS מופעלת באופן דומה ל-preconnect: על ידי הוספת תג <link> ל-<head> של המסמך.
<link rel="dns-prefetch" href="http://example.com">
התמיכה בדפדפנים ב-dns-prefetch שונה במקצת מהתמיכה ב-preconnect, כך ש-dns-prefetch יכול לשמש כחלופה לדפדפנים שלא תומכים ב-preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
dns-prefetch באותו תג <link> גורמת לבאג ב-Safari שבו preconnect מבוטל.
ההשפעה על המדד 'המהירות שבה נטען רכיב התוכן הכי גדול' (LCP)
השימוש ב-dns-prefetch וב-preconnect מאפשר לאתרים לקצר את משך הזמן הנדרש להתחברות למקור אחר. המטרה הסופית היא לצמצם ככל האפשר את זמן הטעינה של משאב ממקור אחר.
לגבי Largest Contentful Paint (LCP), עדיף שהמשאבים יהיו גלויים באופן מיידי, כי מועמדים ל-LCP הם חלקים חיוניים בחוויית המשתמש. כדי לשפר את המדד הזה עוד יותר, אפשר להגדיר למשאבים עם LCP ערך fetchpriority של "high". כך תאותתו לדפדפן על החשיבות של הנכס הזה, כדי שהוא יוכל לאחזר אותו מוקדם.
במקרים שבהם אי אפשר להפוך נכסי LCP לגלויים באופן מיידי, קישור preload – גם עם הערך fetchpriority של "high" – עדיין מאפשר לדפדפן לטעון את המשאב בהקדם האפשרי.
אם אף אחת מהאפשרויות האלה לא זמינה – כי המשאב המדויק לא יהיה ידוע עד מאוחר יותר בתהליך טעינת הדף – אפשר להשתמש ב-preconnect במשאבים ממקורות שונים כדי לצמצם את ההשפעה של גילוי המשאב בשלב מאוחר ככל האפשר.
בנוסף, preconnect זול יותר מ-preload מבחינת השימוש ברוחב הפס, אבל עדיין יש לו סיכונים. כמו במקרה של שימוש מוגזם ברמזים של preload, שימושים מוגזמים ברמזים של preconnect עדיין צורכים רוחב פס במקרים של אישורי TLS. הקפידו לא להתחבר מראש למקורות רבים מדי, מכיוון שהדבר עלול לגרום להתנגשות בין רוחב פס.
סיכום
שתי ההצעות האלה למקורות מידע עוזרות לשפר את מהירות הדף כשאתם יודעים שתצטרכו להוריד משהו מדומיין של צד שלישי בקרוב, אבל אתם לא יודעים את כתובת ה-URL המדויקת של המשאב. לדוגמה, רשתות CDN שמפיצות ספריות, תמונות או גופנים של JavaScript. חשוב לשים לב למגבלות, להשתמש ב-preconnect רק למשאבים החשובים ביותר, להסתמך על dns-prefetch לשאר המשאבים ותמיד למדוד את ההשפעה בעולם האמיתי.