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

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

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

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

ติดต่อทีม Lighthouse

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