בקטע Opportunities (הזדמנויות) בדוח Lighthouse, בקשות ברמה השלישית בשרשרת הבקשות הקריטיות מסומנות כמועמדות לטעינה מראש:
איך Lighthouse קובע אילו נכסים מתאימים לטעינה מראש
נניח ששרשור הבקשות הקריטי של הדף נראה כך:
index.html |--app.js |--styles.css |--ui.js
בקובץ index.html מוצהר על <script src="app.js">. כשמריצים את app.js , הוא קורא ל-fetch() כדי להוריד את styles.css ואת ui.js. הדף לא נראה שלם עד ששני המשאבים האחרונים האלה יורדו, ינותחו ויופעלו.
לפי הדוגמה שלמעלה, Lighthouse יסמן את styles.css ואת ui.js כמועמדים.
החיסכון הפוטנציאלי מבוסס על הזמן שבו הדפדפן יוכל להתחיל את הבקשות אם תצהירו על קישורים לטעינה מראש.
לדוגמה, אם לוקח 200 אלפיות השנייה להוריד, לנתח ולהפעיל את app.js, החיסכון הפוטנציאלי לכל משאב הוא 200 אלפיות השנייה, כי app.js כבר לא מהווה צוואר בקבוק לכל אחת מהבקשות.
טעינה מראש של בקשות יכולה לקצר את זמני הטעינה של הדפים.
styles.css ו-ui.js נשלחות רק אחרי שהקובץ app.js הורד, נותח והופעל.
הבעיה כאן היא שהדפדפן מודע רק ל-2 המשאבים האחרונים האלה אחרי שהוא מוריד, מנתח ומבצע את app.js.
אבל אתם יודעים שהמשאבים האלה חשובים וכדאי להוריד אותם בהקדם האפשרי.
הצהרה על קישורים לטעינה מראש
מצהירים על קישורים לטעינה מראש ב-HTML כדי להנחות את הדפדפן להוריד משאבים מרכזיים בהקדם האפשרי.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
styles.css ול-ui.js בו-זמנית עם app.js.
הנחיות נוספות זמינות גם במאמר טעינה מראש של נכסים קריטיים לשיפור מהירות הטעינה.
תאימות דפדפן
החל מיוני 2020, טעינה מראש נתמכת בדפדפנים שמבוססים על Chromium. אפשר לעיין בתאימות לדפדפנים כדי לראות עדכונים.
תמיכה בכלי בנייה לטעינה מראש
אפשר לעיין בדף Tooling.Report's Preloading Assets.
הנחיות ספציפיות לטכנולוגיה
Angular
אפשר לטעון מראש מסלולים כדי להאיץ את הניווט.
Magento
משנים את פריסת העיצוב ומוסיפים תגי <link rel=preload>.