הקטע 'הזדמנויות' בדוח 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 כמועמדים.
החיסכון הפוטנציאלי מבוסס על כמה מוקדם יותר הדפדפן יכול
כדי להפעיל את הבקשות אם הצהרת על קישורים לטעינה מראש.
לדוגמה, אם הורדה, ניתוח והפעלה של app.js לוקחות 200 אלפיות השנייה,
החיסכון הפוטנציאלי לכל משאב הוא 200 אלפיות השנייה, מפני ש-app.js כבר לא צוואר בקבוק בכל אחת מהבקשות.
בקשות טעינה מראש יכולות להאיץ את הטעינה של הדפים.
styles.css ו
נדרשות ui.js רק לאחר ההורדה של app.js,
אחרי שנתחיל,
הבעיה כאן היא שרק הדפדפן מודע לבעיה
משני המשאבים האחרונים האלה אחרי שהם מורידים, מנתחים ומריצים את 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. צפייה תאימות הדפדפן לקבלת עדכונים.
תמיכה בכלים לבניית טעינה מראש
לפרטים נוספים, אפשר לעיין בקטע כלים לדיווח על נכסים שנטענים מראש הדף הזה.
הנחיות ספציפיות למקבץ
Angular
טעינה מראש של מסלולים מראש כדי לזרז את הניווט.
Magento
שינוי הפריסה של העיצובים
ולהוסיף <link rel=preload> תגים.