במודול האחרון בנושא אופטימיזציה של טעינת משאבים, למדתם איך משאבים שונים בדף, כמו 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
למשאבים שהם הקריטיים ביותר לדף הנוכחי.
תרחיש לדוגמה נפוץ עבור 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). במקרים כאלה, סורק הטעינה מראש לא יגלה את הקבצים האלה כי המשאבים החיצוניים מפנים למשאב.
בדומה ל-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
?
מה אפשר לעשות בעזרת Fetch Priority API?
<link>
, <img>
ו-<script>
.
מתי יש להשתמש ברמז prefetch
?
השלב הבא: ביצועי תמונות
אתם בטח כבר מתחילים להרגיש די בטוחים בידע שלכם לגבי שיקולי ביצועים כלליים בכל הנוגע ל-HTML של דף, לרכיב <head>
ולרמזים למשאבים. עם זאת, יש אופטימיזציות נוספות שהן ספציפיות לסוגי משאבים שונים שדפים נטענים בדרך כלל. בשלב הבא, נלמד במודול הבא על ביצועי התמונות, כדי לעזור לכם לטעון את התמונות באתר מהר ככל האפשר, ללא קשר למכשיר של המשתמש.