มีอะไรใหม่ใน 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

นอกจากการตรวจสอบใหม่แล้ว น้ำหนักของการตรวจสอบทั้งหมดยังได้รับการอัปเดตให้ตรงกับระดับผลกระทบของกฎ aX ที่เกี่ยวข้องมากขึ้น โปรดดูรายละเอียดทั้งหมดเกี่ยวกับการตรวจสอบและน้ำหนักใหม่ได้ในเอกสารประกอบการให้คะแนนการช่วยเหลือพิเศษของ 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);

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

นำแฟล็ก --legacy-navigation สำหรับ CLI, ฟังก์ชัน legacyNavigation() ใน Node API และช่องทำเครื่องหมาย "การนำทางแบบเดิม" ในแผงเครื่องมือสำหรับนักพัฒนาเว็บออกแล้ว การดําเนินการนี้ทำให้ระบบเปลี่ยนโครงสร้างพื้นฐานของ Lighthouse เป็นเวลาหลายปีเพื่อรองรับการไหลเวียนของผู้ใช้

ไฟสำหรับวิ่ง

Lighthouse พร้อมใช้งานในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome, npm (เป็นโมดูลโหนดและเครื่องมือ CLI) รวมถึงเป็นส่วนขยายเบราว์เซอร์ (ใน Chrome และ Firefox) และยังเป็นตัวขับเคลื่อนบริการต่างๆ ของ Google ซึ่งรวมถึง PageSpeed Insights ด้วย

หากต้องการลองใช้ Lighthouse Node CLI ให้ใช้คำสั่งต่อไปนี้

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

ติดต่อทีม Lighthouse

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