בקטע 'הזדמנויות' בדוח Lighthouse מפורטות כל כתובות ה-URL שחוסמות את הצגת התמונה הראשונית (FP) של הדף במסך. המטרה היא לצמצם את ההשפעה של כתובות ה-URL שחוסמות את העיבוד, על ידי הטבעה של משאבים קריטיים, דחיית משאבים לא קריטיים והסרת כל מה שלא נמצא בשימוש.
אילו כתובות URL מסומנות כמשאבים שחוסמים עיבוד?
ב-Lighthouse מסמנים שני סוגים של כתובות URL שחוסמות עיבוד: סקריפטים וגיליונות סגנונות.
תג <script> אשר:
- נמצא ב
<head>של המסמך. - לא כולל מאפיין
defer. - לא כולל מאפיין
async.
תג <link rel="stylesheet"> אשר:
- לא כולל מאפיין
disabled. כשהמאפיין הזה קיים, הדפדפן לא מוריד את גיליון הסגנונות. - אין מאפיין
mediaשתואם באופן ספציפי למכשיר של המשתמש. הפונקציהmedia="all"נחשבת לחסימת עיבוד.
איך מזהים משאבים קריטיים
השלב הראשון בצמצום ההשפעה של משאבים שחוסמים את העיבוד הוא לזהות מה קריטי ומה לא. אתם יכולים להשתמש בכרטיסייה 'כיסוי' בכלי הפיתוח ל-Chrome כדי לזהות CSS ו-JS לא קריטיים. כשאתם טוענים או מפעילים דף, הכרטיסייה מציגה את כמות הקוד שבה השתמשתם לעומת כמות הקוד שנטענו:
תוכלו להקטין את גודל הדפים על ידי משלוח רק של הקוד והסגנונות הנחוצים לכם. לוחצים על כתובת URL כדי לבדוק את הקובץ בחלונית 'מקורות'. סגנונות בקובצי CSS וקוד בקובצי JavaScript מסומנים בשני צבעים:
- ירוק (קריטי): סגנונות שנדרשים למילוי הראשון, קוד שקריטי לפונקציונליות העיקרית של הדף.
- אדום (לא קריטי): סגנונות שחלים על תוכן שלא מוצג באופן מיידי, ולא נעשה שימוש בקוד בפונקציונליות העיקרית של הדף.
איך להסיר סקריפטים שחוסמים עיבוד
לאחר זיהוי הקוד הקריטי, העבירו את הקוד מכתובת ה-URL שחוסמת עיבוד אל תג script מוטבע בדף ה-HTML.
כשהדף ייטען, הוא יכלול את מה שהוא צריך כדי לטפל בפונקציונליות העיקרית של הדף.
אם יש קוד שאינו קריטי בכתובת URL לחסימת עיבוד, אפשר להשאיר אותו בכתובת ה-URL,
ולאחר מכן לסמן את כתובת ה-URL באמצעות מאפייני async או defer
(ראו גם הוספת אינטראקטיביות עם JavaScript).
יש להסיר קוד שלא נעשה בו שימוש כלל (ראו הסרת קוד שלא נעשה בו שימוש).
איך להסיר גיליונות סגנונות שחוסמים עיבוד
בדומה לקוד מוטבע בתג <script>,
הטבעו סגנונות קריטיים הנדרשים לצביעה הראשונה בתוך בלוק <style> ב-head של דף ה-HTML.
לאחר מכן, טוענים את שאר הסגנונות באופן אסינכרוני באמצעות הקישור preload (ראו דחיית CSS שאינו בשימוש).
כדאי לבצע אוטומציה של תהליך החילוץ וההטבעה של CSS מסוג "Above the Fold" באמצעות הכלי הקריטי.
גישה נוספת להסרת סגנונות שחוסמים עיבוד היא לפצל את הסגנונות האלה לקבצים שונים, שמסודרים לפי שאילתת מדיה. לאחר מכן מוסיפים מאפיין מדיה לכל קישור לגיליון סגנונות. בזמן טעינת דף, הדפדפן חוסם את הצבע הראשון רק כדי לאחזר את גיליונות הסגנונות שתואמים למכשיר של המשתמש (מידע נוסף זמין במאמר CSS לחסימת עיבוד).
לבסוף, תרצו להקטין את ה-CSS כדי להסיר רווחים או תווים מיותרים (ראו הקטנת CSS). כך ניתן להבטיח שהחבילה נשלחת הקטנה ביותר האפשרית למשתמשים שלך.
הנחיות ספציפיות למקבץ
AMP
אפשר להשתמש בכלים כמו AMP Optimize כדי לעבד פריסות AMP בצד השרת.
Drupal
כדאי להשתמש במודול כדי להטביע נכסים קריטיים של CSS ושל JavaScript או כדי לטעון נכסים באופן אסינכרוני באמצעות JavaScript כמו המודול Advanced CSS/JS Aggregation.
ג'ומלה
יש כמה יישומי פלאגין של Joomla שיכולים לעזור לכם להטביע נכסים קריטיים או לדחות טעינה של משאבים פחות חשובים.
WordPress
יש כמה יישומי פלאגין של WordPress שיכולים לעזור לך להטביע נכסים קריטיים או לדחות טעינה של משאבים פחות חשובים.