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

במודול הקודם בנושא אופטימיזציה של טעינת משאבים, למדתם איך משאבים שונים בדף, כמו 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 למשאבים שהכי חשובים לדף הנוכחי.

צילום מסך של תזמוני חיבור למשאב בחלונית Network בכלי הפיתוח ל-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" fetchpriority="high">

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

בדומה ל-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, וגם חיבור ומשא ומתן של TLS לפני שהדפדפן יגלה אותו בדרך אחרת.
תשובה נכונה!
מבצע רק חיפוש DNS לשרת ממקור אחר.
אפשר לנסות שוב.

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

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

מתי כדאי להשתמש ברמז prefetch?

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

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

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