מתכוננים לסיום של קובצי cookie של צדדים שלישיים ב-Chrome. כדאי לבדוק את האתר עוד היום כדי לוודא שאין תקלות.

דף זה תורגם על ידי Cloud Translation API.

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

במודול האחרון בנושא אופטימיזציה של טעינת משאבים, למדתם איך משאבים שונים בדף, כמו 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 Fonts היא 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 Overer API כדי להחדיר רמזים dns-prefetch ל-HTML של הדף הנוכחי כשהמשתמשים נגללים בתצוגת קישורים לאתרים אחרים.

`preload`

ההוראה preload משמשת ליצירת בקשה מוקדמת למשאב שנדרש לעיבוד הדף:

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

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

אזהרה: אם משתמשים ב-preload כדי להוריד תמונה שצוינה על ידי רכיב <img> שמשתנה בהתאם לאזור התצוגה של המשתמש, חשוב להוסיף את המאפיין imagesrcset לרמז preload כדי להוריד את התמונה הנכונה לאזור התצוגה הנוכחי. צריך גם להחריג את המאפיין src כדי שדפדפנים שלא תומכים בטעינה מראש רספונסיבית, לא יורידו את תמונת הגיבוי.

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

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

חשוב: מתבצעת הורדה כפולה של משאב שצוין בהוראת preload אם המאפיין as חסר ברכיב <link> של ההוראה. כדי לקבל רשימה של ערכי מאפיינים של as, אפשר לעיין במסמכי התיעוד של MDN לגבי ערכי מאפיינים של as.

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

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

`prefetch`

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

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

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

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

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

אזהרה: בגלל האופי הספקולטיבי של prefetch, השימוש במשאב טמון בחסרונות פוטנציאליים שעלולים לגרום לכך שהנתונים שמשמשים לאחזור המשאב לא יהיו בשימוש אם המשתמש לא ינווט לדף שבסופו של דבר יש צורך במשאב שנשלף מראש. אפשר להסתמך על ניתוח הנתונים או מקורות נתונים אחרים לדפוסי השימוש באתר שלך כדי להחליט בעצמך אם כדאי להשתמש ב-prefetch. לחלופין, אפשר להשתמש ברמז לSave-Data כדי לבטל את ההסכמה לשליפה מראש (prefetch) לגבי משתמשים שציינו העדפה לשימוש מופחת בנתונים.

ממשק 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>

חשוב: המאפיין fetchpriority יעיל במיוחד כשמוסיפים אותו לתמונת LCP בדף. העלאת העדיפות של תמונת LCP עם המאפיין הזה מאפשרת לשפר את ה-LCP של דף במעט מאמץ.

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

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

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

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

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

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

נכון!

מבצע רק חיפוש DNS עבור השרת חוצה-המקורות.

אפשר לנסות שוב.

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

ציין את העדיפות שבה המערכת מורידה את ה-HTML של הדף הנוכחי.

אפשר לנסות שוב.

יש לציין את העדיפות היחסית של הרכיבים <link>, <img> ו-<script>.

נכון!

מתי יש להשתמש ברמז prefetch?

לכל המשאבים או הדפים שהמשתמש עשוי להזדקק להם, גם אם הוא לא יזדקק להם בפועל בעתיד.

אפשר לנסות שוב.

אם יש לכם בטוח גבוה שהמשאבים או הדפים שאתם מתכוונים לשלוף מראש נדרשים על ידי המשתמש.

נכון!

אם המשתמש לא הצהיר העדפה מפורשת לצמצום השימוש בנתונים.

נכון!

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

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