סיוע לדפדפן באמצעות טיפים למשאבים

במודול הקודם בנושא אופטימיזציה של טעינת משאבים, למדתם איך משאבים שונים בדף, כמו CSS ו-JavaScript, יכולים להשפיע על מהירות טעינת הדף, ואיך אפשר לבצע אופטימיזציה שלהם ושל ההעברה שלהם כדי להאיץ את הרינדור של הדף. זה הזמן המושלם לעבור להיבט מתקדם יותר של טעינת משאבים, שכולל שימוש ברמזים למשאבים כדי לעזור לדפדפן לטעון אותם מהר יותר.

רמזים למשאבים יכולים לעזור למפתחים לבצע אופטימיזציה נוספת של זמן טעינת הדף, על ידי כך שהם מספקים לדפדפן מידע על אופן הטעינה של המשאבים ועל סדר העדיפויות שלהם. הקבוצה הראשונית של רמזים למשאבים, כמו preconnect ו-dns-prefetch, הייתה הראשונה שהוצגה. עם זאת, לאורך זמן, preload ו-Fetch Priority API נוספו כדי לספק יכולות נוספות.

רמזים למשאבים מנחים את הדפדפן לבצע מראש פעולות מסוימות שיכולות לשפר את ביצועי הטעינה. רמזים למשאבים יכולים לבצע פעולות כמו חיפושי DNS מוקדמים, התחברות לשרתים מראש ואפילו אחזור משאבים לפני שהדפדפן יגלה אותם בדרך כלל.

אפשר לציין רמזים למשאבים ב-HTML – לרוב בתחילת הרכיב <head> – או להגדיר אותם ככותרת HTTP. היקף המודול הזה כולל את preconnect,‏ dns-prefetch ו-preload, וגם את התנהגויות האחזור הספקולטיבי ש-prefetch מספק.

preconnect

ההינט preconnect משמש ליצירת חיבור למקור אחר שממנו מאחזרים משאבים קריטיים. לדוגמה, יכול להיות שאתם מארחים את התמונות או הנכסים שלכם ב-CDN או במקורות אחרים:

<link rel="preconnect" href="https://example.com">

כשמשתמשים ב-preconnect, מצפים שהדפדפן יתחבר לשרת ספציפי חוצה מקורות בעתיד הקרוב מאוד, ושהדפדפן יפתח את החיבור הזה בהקדם האפשרי, באופן אידיאלי לפני שממתינים למנתח ה-HTML או לסורק הטעינה מראש שיעשו זאת.

אם יש לכם כמות גדולה של משאבים חוצי-מקורות בדף, כדאי להשתמש ב-preconnect למשאבים שהכי חשובים לדף הנוכחי.

צילום מסך של תזמוני החיבור למשאב בחלונית הרשת בכלי הפיתוח ל-Chrome. הגדרת החיבור כוללת זמן השהיה, משא ומתן של שרת proxy, חיפוש DNS, הגדרת חיבור ומשא ומתן של TLS.
הדמיה של תזמון החיבורים כפי שמוצג בחלונית הרשת בכלי הפיתוח ל-Chrome. התזמונים בתוך התיבה האדומה הם אלה שקשורים להגדרת חיבור עם שרת ממקור אחר, שאפשר להקדים את ההגדרה שלו כדי להקטין את משך הזמן הזה, במקום להגדיר אותו בזמן הגילוי של המשאב ממקור אחר.preconnect

תרחיש נפוץ לדוגמה לשימוש ב-preconnect הוא Google Fonts. גופנים של Google ממליצים preconnect לדומיין https://fonts.googleapis.com שבו מתבצעות ההצהרות @font-face ולדומיין https://fonts.gstatic.com שבו מתבצעת ההצהרה של קובצי הגופן.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

המאפיין crossorigin מציין אם צריך לאחזר משאב באמצעות שיתוף משאבים בין מקורות (CORS). אם משתמשים ברמז preconnect, והמשאב שמורידים מהמקור משתמש ב-CORS (למשל קובצי גופנים), צריך להוסיף את המאפיין crossorigin לרמז preconnect.

dns-prefetch

פתיחת חיבורים לשרתים חוצי-מקורות מוקדם ככל האפשר יכולה לשפר באופן משמעותי את זמן הטעינה הראשוני של הדף, אבל יכול להיות שלא יהיה סביר או אפשרי ליצור חיבורים לכמה שרתים חוצי-מקורות בו-זמנית. אם אתם חוששים שאתם משתמשים יתר על המידה ב-preconnect, כדאי להשתמש ברמז dns-prefetch, שהוא רמז למשאב הרבה פחות יקר.

כפי ששמו מרמז, התג dns-prefetch לא יוצר חיבור לשרת חוצה מקורות, אלא רק מבצע חיפוש DNS עבורו מראש. חיפוש DNS מתרחש כששם דומיין מתורגם לכתובת ה-IP הבסיסית שלו. למרות ששכבות של מטמוני DNS ברמת המכשיר וברמת הרשת עוזרות להפוך את התהליך הזה למהיר בדרך כלל, הוא עדיין לוקח זמן.

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

חיפושי DNS הם די זולים, ובגלל העלות הנמוכה יחסית שלהם, יכול להיות שבמקרים מסוימים הם יהיו כלי מתאים יותר מאשר preconnect. בפרט, יכול להיות שיהיה כדאי להשתמש ברמז למשאב במקרים של קישורים שמובילים לאתרים אחרים, שלדעתכם סביר שהמשתמש ילחץ עליהם. dnstradamus הוא כלי כזה שמבצע את הפעולה הזו באופן אוטומטי באמצעות JavaScript, ומשתמש ב-Intersection Observer API כדי להוסיף רמזים של dns-prefetch ל-HTML של הדף הנוכחי כשגוללים קישורים לאתרים אחרים אל אזור התצוגה של המשתמש.

preload

ההנחיה preload משמשת כדי ליזום בקשה מוקדמת למשאב שנדרש לעיבוד הדף:

<link rel="preload" href="/lcp-image.jpg" as="image">

ההנחיות של preload צריכות להיות מוגבלות למשאבים קריטיים שמתגלים בשלב מאוחר. תרחישי השימוש הנפוצים ביותר הם קובצי גופנים, קובצי CSS שאוחזרו באמצעות @importהצהרות, או משאבי CSS background-image שיש סיכוי גבוה שיהיו מועמדים למהירות שבה נטען רכיב התוכן הכי גדול (LCP). במקרים כאלה, סורק הטעינה מראש לא יזהה את הקבצים האלה כי המשאב מפנה למשאבים חיצוניים.

בדומה ל-preconnect, ההנחיה preload מחייבת את המאפיין crossorigin אם מבצעים טעינה מראש של משאב CORS, כמו גופנים. אם לא מוסיפים את המאפיין crossorigin, או אם מוסיפים אותו לבקשות שאינן CORS, הדפדפן מוריד את המשאב פעמיים, וזה בזבוז של רוחב פס שאפשר היה להשתמש בו בצורה טובה יותר למשאבים אחרים.

<link rel="preload" href="/font.woff2" as="font" crossorigin>

בקטע ה-HTML שלמעלה, הדפדפן מקבל הוראה לטעון מראש את /font.woff2 באמצעות בקשת CORS – גם אם /font.woff2 נמצא באותו דומיין.

prefetch

ההנחיה prefetch משמשת כדי ליזום בקשה בעדיפות נמוכה למשאב שסביר להניח שישמש לניווטים עתידיים:

<link rel="prefetch" href="/next-page.css" as="style">

ההנחיה הזו דומה בפורמט שלה להנחיה preload, רק שבמאפיין rel של הרכיב <link> נעשה שימוש בערך "prefetch". אבל בניגוד להנחיה preload, ההנחיה prefetch היא במידה רבה ספקולטיבית, כי אתם יוזמים אחזור של משאב לניווט עתידי שעשוי לקרות או לא לקרות.

יש מקרים שבהם prefetch יכול להיות מועיל – לדוגמה, אם זיהיתם באתר שלכם תהליך שרוב המשתמשים עוברים עד לסיומו, prefetch של משאב שחיוני לעיבוד הדפים העתידיים יכול לעזור לקצר את זמני הטעינה שלהם.

Fetch Priority API

אתם יכולים להשתמש בFetch Priority API באמצעות המאפיין fetchpriority כדי להגדיל את העדיפות של משאב. אפשר להשתמש במאפיין עם הרכיבים <link>,‏ <img> ו-<script>.

<div class="gallery">
  <div class="poster">
    <img src="img/poster-1.jpg" fetchpriority="high">
  </div>
  <div class="thumbnails">
    <img src="img/thumbnail-2.jpg" fetchpriority="low">
    <img src="img/thumbnail-3.jpg" fetchpriority="low">
    <img src="img/thumbnail-4.jpg" fetchpriority="low">
  </div>
</div>

כברירת מחדל, התמונות מאוחזרות בעדיפות נמוכה יותר. אחרי הפריסה, אם התמונה נמצאת באזור התצוגה הראשוני, העדיפות עולה לגבוהה. בקטע ה-HTML הקודם, התג fetchpriority immediately מורה לדפדפן להוריד את תמונת ה-LCP הגדולה יותר עם עדיפות High, ותמונות המיניאטורה שפחות חשובות מורדות עם עדיפות נמוכה יותר.

דפדפנים מודרניים טוענים משאבים בשני שלבים. השלב הראשון שמור למשאבים קריטיים ומסתיים אחרי שכל הסקריפטים שחוסמים את הטעינה הורדו והופעלו. במהלך השלב הזה, יכול להיות שיהיה עיכוב בהורדה של משאבים בעדיפות נמוכה. באמצעות fetchpriority="high" אפשר להגדיר עדיפות גבוהה יותר למשאב, וכך לאפשר לדפדפן להוריד אותו במהלך השלב הראשון.

הדגמות של רמזים למשאבים

בוחנים את הידע

מה עושה רמז המשאב preconnect?

מבצע רק חיפוש DNS לשרת ממקור אחר.
פותחת חיבור לשרת חוצה מקורות, כולל חיפוש DNS, וגם חיבור ומשא ומתן של TLS לפני שהדפדפן יגלה אותו.

מה אפשר לעשות באמצעות Fetch Priority API?

מציינים את העדיפות היחסית של הרכיבים <link>, <img> ו-<script>.
מציינים את העדיפות שבה קובץ ה-HTML של הדף הנוכחי יורד.

מתי כדאי להשתמש בהצעה prefetch?

כשבטוחים שהמשאבים או הדפים שרוצים לבצע להם אחזור מראש נחוצים למשתמש.
לכל המשאבים או הדפים שהמשתמש עשוי להזדקק להם, גם אם הוא לא באמת יזדקק להם בעתיד.
אם המשתמש לא ציין העדפה מפורשת לשימוש מופחת בנתונים.

השלב הבא: ביצועי התמונות

בשלב הזה, סביר להניח שאתם כבר מרגישים בטוחים בידע שלכם בנוגע לשיקולי ביצועים כלליים כשמדובר ב-HTML של דף, ברכיב <head> וברמזים למשאבים. עם זאת, יש אופטימיזציות נוספות שספציפיות לסוגים שונים של משאבים שנטענים בדרך כלל בדפים. במודול הבא נסביר על ביצועי התמונות. המידע הזה יעזור לכם לטעון את התמונות באתר שלכם במהירות המקסימלית האפשרית, בלי קשר למכשיר של המשתמש.