מה חדש ב-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

בנוסף לביקורות החדשות, עודכנו המשקלים של כל הביקורות כדי שיתאימו בצורה טובה יותר לרמות ההשפעה של XeX. לקבלת פרטים מדויקים על הביקורות והמשקולות החדשות, אפשר לעיין במסמכי התיעוד בנושא דירוג הנגישות של 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 ו'הניווט מדור קודם' הוסרו כל התיבות בחלונית כלי הפיתוח. התהליך הזה כולל מעבר למשך שנים בתשתית של Lighthouse כדי לתמוך בתהליכים של המשתמשים.

מגדלור פועל

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

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

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

פנייה לצוות של Lighthouse

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