קביעת סדר העדיפויות של המשאבים באמצעות link rel='preload'

Jeff Posnick

האם רצית פעם להודיע לדפדפן על גופן, סקריפט או משאב חשוב אחר שדרוש לדף, בלי לעכב את האירוע onload של הדף? הפקודה <link rel="preload"> מאפשרת למפתחי אתרים לעשות זאת, באמצעות תחביר מוכר של רכיבי HTML עם כמה מאפייני מפתח כדי לקבוע את ההתנהגות המדויקת. זהו טיוטה בתקן שנשלח כחלק מגרסת Chrome 50.

משאבים שנטענים דרך <link rel="preload"> מאוחסנים באופן מקומי בדפדפן, והם לא פעילים עד שמפנים אליהם ב-DOM, ב-JavaScript או ב-CSS. לדוגמה, הנה תרחיש לדוגמה שבו קובץ סקריפט נטען מראש, אבל לא מופעל באופן מיידי, כפי שהוא היה מופעל אם הוא היה נכלל באמצעות תג <script> ב-DOM.

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

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

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

מידע (הרבה) נוסף

יואב וויס כתב את המדריך המקיף לשימוש ב-<link rel="preload">. אם המאמר הזה עורר את סקרנותכם ואתם רוצים להתחיל להשתמש ב-AMP בדפים שלכם, מומלץ לקרוא את המאמר כדי לקבל מידע נוסף על היתרונות ועל תרחישים לדוגמה לשימוש בקריאייטיב.

<link rel="preload"> מחליף את <link rel="subresource">, שיש לו באגים וחסרונות משמעותיים, ושאף פעם לא יושם בדפדפנים אחרים מלבד Chrome. לכן, Chrome 50 מסיר את התמיכה ב-<link rel="subresource">.