มีอะไรใหม่ใน Lighthouse 11

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

Lighthouse คือเครื่องมือตรวจสอบเว็บไซต์ซึ่งช่วยมอบโอกาสและการวินิจฉัยเพื่อปรับปรุงประสบการณ์ของผู้ใช้ในเว็บไซต์ให้แก่นักพัฒนาซอฟต์แวร์

Lighthouse 11 พร้อมใช้งานทันทีในบรรทัดคำสั่งถึง npm ใน Chrome Canary และ PageSpeed Insights ซึ่งจะอยู่ใน Chrome เวอร์ชันเสถียรใน 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 คะแนนในการช่วยเหลือพิเศษไม่ได้รับประกันว่าหน้าเว็บที่ตรวจสอบจะเข้าถึงได้ การทดสอบด้วยตนเองยังคงมีความสำคัญ นอกจากนี้ เรายังจัดเรียงการตรวจสอบด้วยตนเองให้เริ่มต้นด้วยการตรวจสอบที่เข้าถึงได้มากที่สุด

การเปลี่ยนแปลงการตรวจสอบที่มีอยู่

การโต้ตอบกับ Next Paint (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);

การนำทางเดิม

Flag --legacy-navigation สำหรับ CLI, ฟังก์ชัน legacyNavigation() ใน Node API และ "การนำทางเดิม" นำช่องทำเครื่องหมายในแผงเครื่องมือสำหรับนักพัฒนาเว็บออกแล้ว การเปลี่ยนแปลงนี้เกิดขึ้นเป็นเวลาหลายปีในโครงสร้างพื้นฐานของ 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

หากต้องการพูดคุยเกี่ยวกับฟีเจอร์ใหม่ การเปลี่ยนแปลงในรุ่น Lighthouse 11 หรืออื่นๆ ที่เกี่ยวข้องกับ Lighthouse