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