מה חדש ב-Lighthouse 11

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

‫Lighthouse הוא כלי לביקורת אתרים שעוזר למפתחים לזהות הזדמנויות ולבצע אבחונים כדי לשפר את חוויית המשתמש באתרים שלהם.

גרסה 11 של Lighthouse זמינה באופן מיידי בשורת הפקודה דרך npm, ב-Chrome Canary וב-PageSpeed Insights. היא תהיה זמינה בגרסה היציבה של Chrome 118.

הרשימה המלאה של השינויים מופיעה ביומן השינויים של גרסה 11.0.

עדכונים בקטגוריית הנגישות

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

בדיקות חדשות ומשקל חדש

מאז Lighthouse 10.0, נוספו 13 בדיקות נגישות חדשות:

  • aria-allowed-role
  • aria-dialog-name
  • aria-text
  • html-xml-lang-mismatch
  • image-redundant-alt
  • input-button-name
  • label-content-name-mismatch
  • link-in-text-block
  • select-name
  • skip-link
  • table–duplicate-name
  • table-fake-caption
  • td-has-header

בנוסף לבדיקות החדשות, המשקלים של כל הבדיקות עודכנו כדי להתאים טוב יותר לרמות ההשפעה של כללי aXe התואמות. במסמכי התיעוד של ניקוד הנגישות של Lighthouse מפורטים הפרטים המדויקים על הבדיקות והמשקלים החדשים.

הרשאות גישה לביקורת ידנית

מערכת Lighthouse תמיד כללה כמה ביקורות ידניות שאי אפשר לבדוק באופן אוטומטי, אבל הן עדיין נכללות כרשימת משימות לאימות פונקציונליות חשובה. הקטע של הביקורת הידנית מורחב עכשיו באופן אוטומטי כשכל הביקורות האוטומטיות עברו בהצלחה.

דוח Lighthouse שבו מוצגות הביקורות הידניות בקטגוריית הנגישות במצב מורחב

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

שינויים בביקורות קיימות

מהירות התגובה לאינטראקציה באתר (INP)

מדד INP כבר לא ניסיוני, ולכן הוא הועבר מ-experimental-interaction-to-next-paint אל interaction-to-next-paint.

קובצי שירות (service worker)

כבר לא צריך קובץ שירות (service worker) כדי שדף יהיה ניתן להתקנה כ-PWA ב-Chrome, ולכן הבדיקה של service-worker הוסרה מהקטגוריה PWA ב-Lighthouse.

סיכום המשאבים

הבדיקה resource-summary הוסרה מהדוח של Lighthouse. עדיין אפשר לאסוף נתונים סטטיסטיים של בקשות לאחזור מהרשת באמצעות הביקורת המוסתרת network-requests:

const {lhr} = await lighthouse('https://example.com');
const networkRequests = lhr.audits['network-requests'].details.items;
const resourceSummary = {};

for (const request of networkRequests) {
  let total = resourceSummary[request.resourceType] || 0;
  total += request.resourceSize;
  resourceSummary[request.resourceType] = total;
}

console.log(resourceSummary);

הניווט הקודם

הדגל --legacy-navigation של ה-CLI, הפונקציה legacyNavigation() ב-Node API ותיבת הסימון "Legacy navigation" בחלונית DevTools הוסרו. בכך הושלם מעבר של שנים בתשתית של Lighthouse לתמיכה במסלולי משתמשים.

הפעלת Lighthouse

הכלי Lighthouse זמין בכלי הפיתוח ל-Chrome, ב-npm (כמודול של Node וככלי CLI) וכתוסף לדפדפן (ב-Chrome וב-Firefox). הוא גם מפעיל כמה שירותים של Google, כולל PageSpeed Insights.

כדי לנסות את Lighthouse Node CLI, משתמשים בפקודות הבאות:

npm install -g lighthouse
lighthouse https://www.example.com --view

יצירת קשר עם צוות Lighthouse

כדי לדון בתכונות החדשות, בשינויים בגרסה Lighthouse 11 או בכל נושא אחר שקשור ל-Lighthouse: