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

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

Interaction to 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

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 ให้ทำดังนี้