יש להימנע ממשאבים שחוסמים עיבוד

בקטע 'הזדמנויות' בדוח Lighthouse מפורטות כל כתובות ה-URL שחוסמות את הצגת התמונה הראשונית (FP) של הדף. המטרה היא לצמצם את ההשפעה של כתובות ה-URL שחוסמות עיבוד על ידי סימון משאבים קריטיים, לדחות משאבים לא קריטיים ולהסיר פריטים שלא נמצאים בשימוש.

צילום מסך של הביקורת של Lighthouse בנושא הסרת משאבים שחוסמים את העיבוד

אילו כתובות URL מסומנות כמשאבים שחוסמים את העיבוד?

Lighthouse מסמנים שני סוגים של כתובות URL שמונעות עיבוד: סקריפטים וסגנונות פורמט.

תג <script> ש:

  • נמצא ב-<head> של המסמך.
  • אין לו מאפיין defer.
  • לא מכיל מאפיין async.

תג <link rel="stylesheet"> ש:

  • אין לו מאפיין disabled. כשהמאפיין הזה קיים, הדפדפן לא מוריד את גיליון הסגנון.
  • אין לו מאפיין media שתואמת למכשיר של המשתמש באופן ספציפי. media="all" נחשבת לחסימת עיבוד.

איך מזהים משאבים קריטיים

השלב הראשון בצמצום ההשפעה של משאבים חוסמי רינדור הוא לזהות מה קריטי ומה לא. תוכלו להשתמש בכרטיסייה 'כיסוי' בכלי הפיתוח ל-Chrome כדי לזהות CSS ו-JS שאינם קריטיים. כשאתם טוענים או מפעילים דף, בכרטיסייה מוצג כמה קוד נעשה בו שימוש, לעומת כמה קוד נטען:

כלי הפיתוח ל-Chrome: הכרטיסייה &#39;כיסוי&#39;
כלי הפיתוח ל-Chrome: הכרטיסייה Coverage (כיסוי).

כדי לצמצם את גודל הדפים, אפשר לשלוח רק את הקוד והסגנונות הנחוצים. לוחצים על כתובת URL כדי לבדוק את הקובץ הזה בחלונית המקורות. סגנונות בקובצי CSS וקוד בקובצי JavaScript מסומנים בשני צבעים:

  • ירוק (קריטי): סגנונות שנדרשים לציור הראשון, קוד קריטי לפונקציונליות הליבה של הדף.
  • אדום (לא קריטי): סגנונות שחלים על תוכן שלא גלוי באופן מיידי. קוד שלא נעשה בו שימוש בפונקציונליות הבסיסית של הדף.

איך מסירים סקריפטים שחוסמים את העיבוד

אחרי שמזהים קוד קריטי, צריך להעביר את הקוד הזה מכתובת ה-URL שגורמת לחסימת הרינדור לתג script בתוך הדף ב-HTML. כשהדף ייטען, הוא יכלול את כל מה שנחוץ כדי לטפל בפונקציונליות הליבה של הדף.

אם כתובת ה-URL לחסימת עיבוד מכילה קוד לא קריטי, אפשר להשאיר אותו בכתובת ה-URL ולאחר מכן לסמן אותה במאפיינים async או defer (ראו גם הוספת אינטראקטיביות עם JavaScript).

צריך להסיר קוד שלא נמצא בשימוש בכלל (ראו הסרת קוד שלא בשימוש).

איך מסירים גיליונות סגנונות שחוסמים את העיבוד

בדומה להטמעת קוד בתוך תג <script>, הטמעת סגנונות קריטיים בתוך בלוק <style> ב-head של דף ה-HTML, שנדרשים לציור הראשון. לאחר מכן, אפשר לטעון את שאר הסגנונות באופן אסינכררוני באמצעות הקישור preload (ראו דחיית CSS שלא בשימוש).

כדאי להשתמש בכלי הקריטי כדי להפוך את תהליך החילוץ וההטמעה של CSS 'מעל למסך' לאוטומטי.

גישה נוספת להסרת סגנונות שגורמים לחסימת הרינדור היא לפצל את הסגנונות האלה לקובצי css שונים, שמאורגנים לפי שאילתה של מדיה. לאחר מכן מוסיפים מאפיין מדיה לכל קישור של גיליון סגנונות. כשדף נטען, הדפדפן חוסם רק את הצביעה הראשונה כדי לאחזר את גיליונות הסגנונות שתואמים למכשיר של המשתמש (ראו CSS לחסימת עיבוד).

לבסוף, כדאי למזער את ה-CSS כדי להסיר ממנו רווחים או תווים מיותרים (ראו מזעור קובצי CSS). האפשרות הזו מבטיחה שליחת החבילה הקטנה ביותר האפשרית למשתמשים.

הנחיות ספציפיות ל-stack

AMP

אפשר להשתמש בכלים כמו AMP Optimizer כדי לרנדר פריסות AMP בצד השרת.

Drupal

כדאי להשתמש במודול כדי להטביע נכסים קריטיים של CSS ושל JavaScript, ולהשתמש במאפיין העיכוב בנכסים לא קריטיים של CSS או של JavaScript.

Joomla

יש כמה יישומי פלאגין של Joomla שיכולים לעזור לכם להטמיע נכסים קריטיים או לדחות משאבים פחות חשובים.

WordPress

יש כמה יישומי פלאגין של WordPress שיכולים לעזור לכם להטמיע נכסים קריטיים או לדחות משאבים פחות חשובים.

משאבים