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

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

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

preload

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

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

הוראות preload צריכות להיות מוגבלות למשאבים קריטיים שזוהו בשלב מאוחר. התרחישים הנפוצים ביותר הם קובצי גופנים או קובצי CSS שאוחזרו דרך @import או משאבי CSS background-image שצפויים להיות הגדולים ביותר מועמדים ל-Contentful Paint (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 למשאב קריטי לעיבוד של הדפים העתידיים האלה יכול לעזור לקצר את זמני הטעינה עבורם.

ממשק 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 מיד מנחה את הדפדפן להוריד את תמונת ה-LCP הגדולה יותר עם עדיפות גבוהה, בזמן ההורדה של התמונות הממוזערות החשובות פחות, הן בעדיפות נמוכה יותר.

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

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

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

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

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

מה מאפשר ממשק ה-API של אחזור בעדיפות גבוהה?

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

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

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

הסרטון הבא: ביצועי תמונות

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