יש להסיר JavaScript שלא נמצא בשימוש

JavaScript שאינו בשימוש עלול להאט את מהירות הטעינה של הדף:

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

כיצד ביקורת JavaScript שאינה בשימוש נכשלת

הכלי Lighthouse מסמן כל קובץ JavaScript שמכיל יותר מ-20 קילובייט של קוד שאינו בשימוש:

צילום מסך של הביקורת.
לוחצים על ערך בעמודה כתובת URL כדי לפתוח את קוד המקור של הסקריפט בכרטיסייה חדשה.

איך להסיר קוד JavaScript שאינו בשימוש

זיהוי JavaScript שאינו בשימוש

בכרטיסייה 'כיסוי' בכלי הפיתוח ל-Chrome תוכלו לראות פירוט של קוד שלא נמצא בשימוש, שורה אחר שורה.

המחלקה Coverage ב-Puppeteer יכולה לעזור באוטומציה של תהליך הזיהוי והחילוץ של קוד שלא נמצא בשימוש.

כלי build לתמיכה בהסרת קוד שלא נמצא בשימוש

כדאי לבדוק את הבדיקות הבאות של Tooling.Report כדי לגלות אם ה-bundler תומך בתכונות שמאפשרות להימנע מקוד שאינו בשימוש או להסיר אותו בקלות:

הנחיות ספציפיות למקבץ

Angular

אם אתם משתמשים ב-Angular CLI, יש לכלול מפות מקור ב-build של סביבת הייצור כדי לבדוק את החבילות.

Drupal

כדאי לשקול הסרה של נכסי JavaScript שאינם בשימוש, ולצרף לדף הרלוונטי או לרכיב בדף רק את ספריות ה-Drupal הנדרשות. פרטים נוספים זמינים במאמר הגדרת ספרייה.

ג'ומלה

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

Magento

משביתים את יצירת חבילות JavaScript המובנית ב-Magento.

React

אם לא מתבצע רינדור בצד השרת, צריך לפצל את חבילות JavaScript עם React.lazy(). אחרת, צריך לפצל את הקוד באמצעות ספרייה של צד שלישי כמו רכיבים שניתן לטעון.

Vue

אם אתם לא מעבדים רינדור בצד השרת ואתם משתמשים בנתב Vue, צריך לפצל את החבילות לפי מסלולי טעינה מדורגת.

WordPress

כדאי לצמצם את מספר יישומי הפלאגין של WordPress שטוענים תוכן JavaScript בלתי נחוץ בדף, או להשבית אותם.

משאבים