מה חדש ב-Lighthouse 11

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

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

Lighthouse 11 זמין באופן מיידי בשורת הפקודה דרך 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 זמין ב-Chrome DevTools, ב-npm (כמודול צומת וכלי CLI) וכתוסף לדפדפן (ב-Chrome וב-Firefox). הוא גם מפעיל מספר שירותים של Google, כולל PageSpeed Insights.

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

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

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

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