מידע על רמזים למשאבים 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 מאפשר לאתרים לקצר את הזמן שנדרש להתחבר למקור אחר. המטרה הסופית היא לצמצם ככל האפשר את הזמן שנדרש לטעינת משאב ממקור אחר.
במקרה של המהירות שבה נטען רכיב התוכן הכי גדול (LCP), עדיף שהמערכת תוכל לגלות את המשאבים באופן מיידי, כי המועמדים ל-LCP הם חלקים חשובים בחוויית המשתמש. ערך של fetchpriority "high" במשאבי LCP יכול לשפר את המדד הזה עוד יותר, כי הוא מסמן לדפדפן את החשיבות של הנכס הזה כדי שהוא יוכל לאחזר אותו מוקדם יותר.
אם אי אפשר להפוך את נכסי ה-LCP לגלויים באופן מיידי, קישור preload – גם עם הערך fetchpriority של "high" – עדיין מאפשר לדפדפן לטעון את המשאב בהקדם האפשרי.
אם אף אחת מהאפשרויות האלה לא זמינה – כי המשאב המדויק לא יהיה ידוע עד לשלב מאוחר יותר בטעינת הדף – אפשר להשתמש ב-preconnect במשאבים חוצי-מקורות כדי לצמצם ככל האפשר את ההשפעה של הגילוי המאוחר של המשאב.
בנוסף, השימוש ב-preconnect זול יותר משימוש ב-preload מבחינת רוחב פס, אבל עדיין יש בו סיכונים. בדומה למקרים של רמזי preload מוגזמים, רמזי preconnect מוגזמים עדיין צורכים רוחב פס כשמדובר באישור TLS. חשוב להיזהר ולא ליצור חיבור מראש ליותר מדי מקורות, כי זה עלול לגרום למאבק על רוחב הפס.
סיכום
שני רמזים למשאבים האלה עוזרים לשפר את מהירות הדף כשאתם יודעים שתורידו משהו מדומיין של צד שלישי בקרוב, אבל אתם לא יודעים את כתובת ה-URL המדויקת של המשאב. לדוגמה, רשתות CDN שמפיצות ספריות JavaScript, תמונות או גופנים. חשוב להקפיד על מגבלות, להשתמש ב-preconnect רק עבור המשאבים החשובים ביותר, להסתמך על dns-prefetch עבור השאר ולמדוד תמיד את ההשפעה בעולם האמיתי.