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

Jeff Posnick

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

משאבים שנטענים דרך <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">.