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

เมตริกใหม่ การอัปเดตคะแนนประสิทธิภาพ การตรวจสอบใหม่ และอื่นๆ

Connor Clark

วันนี้เราจะเปิดตัว Lighthouse 6.0!

Lighthouse เป็นเครื่องมือตรวจสอบเว็บไซต์อัตโนมัติที่ช่วยให้นักพัฒนาซอฟต์แวร์มีโอกาสและได้รับการวินิจฉัยเพื่อปรับปรุงประสบการณ์ของผู้ใช้บนเว็บไซต์ โดยพร้อมใช้งานใน Chrome DevTools, npm (เป็นโมดูลโหนดและ CLI) หรือเป็นส่วนขยายของเบราว์เซอร์ (ใน Chrome และ Firefox) ซึ่งขับเคลื่อนบริการมากมายของ Google ซึ่งรวมถึง web.dev/measure และ PageSpeed Insights

Lighthouse 6.0 พร้อมใช้งานทันทีบน npm และ Chrome Canary บริการอื่นๆ ของ Google ที่ใช้ประโยชน์จาก Lighthouse จะได้รับการอัปเดตภายในสิ้นเดือน โดยจะมีให้บริการใน Chrome เวอร์ชันเสถียรใน Chrome 84 (กลางเดือนกรกฎาคม)

หากต้องการลองใช้ Lighthouse Node CLI ให้ใช้คำสั่งต่อไปนี้ bash npm install -g lighthouse lighthouse https://www.example.com --view

Lighthouse เวอร์ชันนี้มีการเปลี่ยนแปลงมากมายซึ่งแสดงอยู่ในบันทึกการเปลี่ยนแปลงของเวอร์ชัน 6.0 เราจะพูดถึงไฮไลต์ในบทความนี้

• เมตริกใหม่
• การอัปเดตคะแนนประสิทธิภาพ
• การตรวจสอบใหม่
• CI ของ Lighthouse
• เปลี่ยนชื่อแผงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
• การจำลองอุปกรณ์เคลื่อนที่
• ส่วนขยายของเบราว์เซอร์
• งบประมาณ
• ลิงก์ตำแหน่งต้นทาง
• ในอนาคต
• ขอขอบคุณ

เมตริกใหม่

Lighthouse 6.0 มีเมตริกใหม่ 3 รายการในรายงาน เมตริกใหม่ 2 รายการ ได้แก่ Largest Contentful Paint (LCP) และ Cumulative Layout Shift (CLS) คือการติดตั้งใช้งาน Core Web Vitals ในห้องทดลอง

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) คือการวัดประสบการณ์การโหลดที่รับรู้ได้ ซึ่งจะทำเครื่องหมายจุดระหว่างการโหลดหน้าเว็บเมื่อเนื้อหาหลักหรือ "ใหญ่ที่สุด" โหลดขึ้นและแสดงต่อผู้ใช้ LCP เป็นส่วนเสริมที่สำคัญของ First Contentful Paint (FCP) ซึ่งบันทึกเฉพาะจุดเริ่มต้นของการโหลดเท่านั้น LCP จะส่งสัญญาณให้นักพัฒนาแอปทราบว่าผู้ใช้ดูเนื้อหาของหน้าเว็บได้เร็วเพียงใด คะแนน LCP ที่ต่ำกว่า 2.5 วินาที จะถือว่า "ดี"

ดูการเจาะลึกเกี่ยวกับ LCP นี้ โดย Paul Ireland เพื่อดูข้อมูลเพิ่มเติม

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) คือการวัดความเสถียรของภาพ ซึ่งเป็นตัววัดปริมาณที่เนื้อหาในหน้ามีการเปลี่ยนแปลง คะแนน CLS ที่ต่ำเป็นสัญญาณให้นักพัฒนาซอฟต์แวร์ทราบว่าผู้ใช้ไม่ได้ประสบกับการเปลี่ยนแปลงเนื้อหาอย่างไม่เหมาะสม คะแนน CLS ที่ต่ำกว่า 0.10 จะถือว่าผู้ใช้ "ดี"

CLS ในสภาพแวดล้อมของห้องทดลองจะวัดผ่านการสิ้นสุดการโหลดหน้าเว็บ ขณะที่ในช่องดังกล่าว คุณจะวัด CLS ได้ตั้งแต่การโต้ตอบครั้งแรกของผู้ใช้หรือรวมข้อมูลทั้งหมดจากผู้ใช้

ดูการเจาะลึก CLS นี้โดย Annie Sullivan เพื่อดูข้อมูลเพิ่มเติม

เวลาทั้งหมดในการบล็อก (TBT)

เวลาการบล็อกทั้งหมด (TBT) จะระบุจำนวนการตอบสนองของภาระงาน โดยวัดระยะเวลารวมเมื่อเทรดหลักถูกบล็อกนานพอที่จะป้องกันการตอบสนองของอินพุต TBT จะวัดระยะเวลารวมระหว่าง First Contentful Paint (FCP) กับ Time to Interactive (TTI) และเป็นเมตริกที่ใช้ร่วมกันกับ TTI และช่วยเพิ่มความแตกต่างเล็กน้อยในการวัดกิจกรรมเทรดหลักที่บล็อกความสามารถในการโต้ตอบกับหน้าเว็บของคุณของผู้ใช้

นอกจากนี้ TBT ยังสัมพันธ์กับเมตริกในช่อง First Input Delay (FID) ซึ่งเป็น Core Web Vitals อีกด้วย

การอัปเดตคะแนนประสิทธิภาพ

คะแนนประสิทธิภาพใน Lighthouse จะคำนวณจากการรวมเมตริกหลายรายการแบบถ่วงน้ำหนักเพื่อสรุปความเร็วของหน้าเว็บ สูตรคะแนนประสิทธิภาพ 6.0 มีดังนี้

ระยะ	ชื่อเมตริก	น้ำหนักเมตริก
ก่อนกำหนด (15%)	First Contentful Paint (FCP)	15%
ปานกลาง (40%)	ดัชนีความเร็ว (SI)	15%
	Largest Contentful Paint (LCP)	25%
ช้า (15%)	เวลาในการตอบสนอง (TTI)	15%
ชุดข้อความหลัก (25%)	เวลาทั้งหมดในการบล็อก (TBT)	25%
ความสามารถในการคาดการณ์ (5%)	Cumulative Layout Shift (CLS)	5%

เราได้เพิ่มเมตริกใหม่ 3 รายการและได้นำเมตริกเดิมออก 3 รายการ ได้แก่ First Meaningful Paint, First CPU Idle และ Max Potential FID เราได้แก้ไขน้ำหนักของเมตริกที่เหลือเพื่อเน้นการโต้ตอบของเทรดหลักและความสามารถในการคาดการณ์ของเลย์เอาต์

เพื่อเปรียบเทียบคะแนนของเวอร์ชัน 5

ระยะ	ชื่อเมตริก	น้ำหนัก
ก่อนกำหนด (23%)	First Contentful Paint (FCP)	23%
ปานกลาง (34%)	ดัชนีความเร็ว (SI)	27%
	การแสดงผลที่มีความหมายครั้งแรก (FMP)	7%
เสร็จสิ้น (46%)	เวลาในการตอบสนอง (TTI)	33%
	CPU ที่ไม่มีการใช้งานครั้งแรก (FCI)	13%
ชุดข้อความหลัก	FID สูงสุดที่อาจเกิดขึ้น	0%

ไฮไลต์บางส่วนของการเปลี่ยนแปลงการให้คะแนนระหว่าง Lighthouse เวอร์ชัน 5 ถึง 6 ได้แก่

• TTI น้ำหนักลดลงจาก 33% เป็น 15% ซึ่งเป็นการตอบสนองโดยตรงต่อความคิดเห็นของผู้ใช้เกี่ยวกับความผันแปรของ TTI รวมถึงความไม่สอดคล้องกันในการเพิ่มประสิทธิภาพเมตริกที่นำไปสู่การปรับปรุงประสบการณ์ของผู้ใช้ TTI ยังคงเป็นสัญญาณที่มีประโยชน์สำหรับกรณีที่หน้าเว็บมีการโต้ตอบเต็มรูปแบบ แต่ก็มี TBT เป็นส่วนเสริม ความแปรปรวนลดลง จากการเปลี่ยนแปลงคะแนนนี้ เราหวังว่านักพัฒนาซอฟต์แวร์จะได้รับการส่งเสริมให้เพิ่มประสิทธิภาพเพื่อการโต้ตอบของผู้ใช้ได้อย่างมีประสิทธิภาพมากขึ้น
• น้ำหนักของ FCP ลดลงจาก 23% เป็น 15% การวัดเฉพาะเมื่อพิกเซลแรก ได้รับการลงสี (FCP) ไม่ได้ทำให้เราเห็นภาพที่สมบูรณ์ การผสานรวมกับการวัดผลเมื่อผู้ใช้สามารถเห็นสิ่งที่น่าจะสนใจ (LCP) มากที่สุดจะสะท้อนถึงประสบการณ์การโหลดได้ชัดเจนขึ้น
• เลิกใช้งาน FID สูงสุด แล้ว รายการดังกล่าวจึงไม่ปรากฏในรายงานอีกต่อไป แต่ยังคงอยู่ใน JSON ตอนนี้ขอแนะนำให้ดูที่ TBT เพื่อระบุจำนวนการโต้ตอบแทน mpFID
• เลิกใช้งานการแสดงผลที่มีความหมายครั้งแรกแล้ว เมตริกนี้มีรูปแบบมากเกินไปและไม่มีเส้นทางสู่การเป็นมาตรฐานเนื่องจากการใช้งานมีเฉพาะกับการแสดงผลภายในของ Chrome เท่านั้น แม้ว่าบางทีมจะพบว่าช่วงเวลาของ FMP นั้นคุ้มค่าในเว็บไซต์ของตน แต่เมตริกจะไม่ได้รับการปรับปรุงเพิ่มเติม
• เลิกใช้งาน CPU Idle ครั้งแรกแล้วเนื่องจากมีความแตกต่างจาก TTI ไม่มากพอ TBT และ TTI เป็นเมตริกสำหรับการโต้ตอบในตอนนี้
• น้ำหนักของ CLS ค่อนข้างต่ำ แต่เราคาดว่าจะเพิ่มน้ำหนักในเวอร์ชันหลักในอนาคต

การเปลี่ยนแปลงของคะแนน

การเปลี่ยนแปลงเหล่านี้ส่งผลต่อคะแนนของเว็บไซต์จริงอย่างไร เราได้เผยแพร่การวิเคราะห์การเปลี่ยนแปลงคะแนนโดยใช้ชุดข้อมูล 2 ชุด ได้แก่ ชุดเว็บไซต์ทั่วไป และชุดเว็บไซต์แบบคงที่ที่สร้างด้วย Eleventy โดยสรุปแล้ว ประมาณ 20% ของเว็บไซต์มีคะแนนสูงขึ้นอย่างเห็นได้ชัด ประมาณ 30% แทบไม่มีการเปลี่ยนแปลง และประมาณ 50% เห็นคะแนนลดลงอย่างน้อย 5 จุด

การเปลี่ยนแปลงคะแนนแบ่งออกเป็น 3 องค์ประกอบหลักดังนี้

• การเปลี่ยนแปลงน้ำหนักของคะแนน
• แก้ไขข้อบกพร่องในการติดตั้งใช้งานเมตริกที่สำคัญ
• การเปลี่ยนแปลงเส้นโค้งของคะแนนแต่ละรายการ

การเปลี่ยนแปลงน้ำหนักคะแนนและการเปิดตัวเมตริกใหม่ 3 รายการช่วยกระตุ้นให้เกิดการเปลี่ยนแปลงคะแนนโดยรวมเป็นส่วนใหญ่ เมตริกใหม่ที่นักพัฒนาแอปยังไม่ได้เพิ่มประสิทธิภาพเพื่อรองรับน้ำหนักเป็นอย่างมากในคะแนนประสิทธิภาพเวอร์ชัน 6 แม้ว่าคะแนนประสิทธิภาพโดยเฉลี่ยของคลังข้อมูลการทดสอบในเวอร์ชัน 5 จะอยู่ที่ประมาณ 50 แต่คะแนนเฉลี่ยในเมตริก Total Block Time ใหม่และ Largest Contentful Paint ที่ประมาณ 30 คะแนน เมตริกทั้ง 2 นี้รวมกันเป็น 50% ของน้ำหนักในคะแนนประสิทธิภาพ Lighthouse เวอร์ชัน 6 ดังนั้นโดยทั่วไป เว็บไซต์ต่างๆ มักจะลดลงอย่างมาก

การแก้ไขข้อบกพร่องในการคํานวณเมตริกที่สำคัญอาจทําให้ได้คะแนนที่ต่างกัน ปัญหานี้ส่งผลกระทบต่อเว็บไซต์เพียงไม่กี่แห่ง แต่อาจมีผลกระทบอย่างมากในบางสถานการณ์ โดยรวมแล้ว ไซต์ประมาณ 8% ได้รับคะแนนเพิ่มขึ้นเนื่องจากการเปลี่ยนแปลงในการใช้งานเมตริก และประมาณ 4% ของไซต์มีคะแนนลดลงเนื่องจากการเปลี่ยนแปลงการใช้เมตริก เว็บไซต์ประมาณ 88% ไม่ได้รับผลกระทบจากการแก้ไขเหล่านี้

การเปลี่ยนแปลงของเส้นโค้งคะแนนแต่ละรายการก็จะส่งผลต่อการเปลี่ยนแปลงของคะแนนโดยรวมด้วยแม้จะเล็กน้อยมากก็ตาม เราจะคอยตรวจสอบเป็นระยะๆ ว่าเส้นโค้งคะแนนสอดคล้องกับเมตริกที่สังเกตได้ในชุดข้อมูล HTTPArchive การยกเว้นเว็บไซต์ที่ได้รับผลกระทบจากการเปลี่ยนแปลงการติดตั้งใช้งานครั้งใหญ่ การปรับเปลี่ยนเล็กๆ น้อยๆ ในเส้นโค้งคะแนนของแต่ละเมตริกช่วยปรับปรุงคะแนนของเว็บไซต์ได้ประมาณ 3% และลดคะแนนของเว็บไซต์ได้ประมาณ 4% เว็บไซต์ประมาณ 93% ไม่ได้รับผลกระทบจากการเปลี่ยนแปลงนี้

เครื่องคำนวณคะแนน

เราได้เผยแพร่เครื่องคำนวณคะแนนเพื่อช่วยคุณในการสำรวจการให้คะแนนประสิทธิภาพ เครื่องคำนวณนี้ยังให้การเปรียบเทียบคะแนนของ Lighthouse เวอร์ชัน 5 และ 6 ด้วย เมื่อคุณดำเนินการตรวจสอบด้วย Lighthouse 6.0 รายงานจะมาพร้อมลิงก์ไปยังเครื่องคำนวณซึ่งจะแสดงผลลัพธ์ให้คุณ

ขอขอบคุณ Ana Tudor สำหรับการอัปเกรดมาตรวัด!

การตรวจสอบใหม่

JavaScript ที่ไม่ได้ใช้

เราใช้ประโยชน์จากการครอบคลุมโค้ดสำหรับนักพัฒนาเว็บในการตรวจสอบใหม่ JavaScript ที่ไม่ได้ใช้

การตรวจสอบนี้ไม่ใช่การตรวจสอบใหม่ทั้งหมด เนื่องจากมีการเพิ่มเข้ามาในช่วงกลางปี 2017 แต่เนื่องจากมีการปิดใช้การตรวจสอบประสิทธิภาพโดยค่าเริ่มต้นเพื่อทำให้ Lighthouse เร็วที่สุดเท่าที่จะเป็นไปได้ ในตอนนี้ การรวบรวมข้อมูลการครอบคลุมนี้มีประสิทธิภาพมากขึ้นมาก ดังนั้นเราจึงยินดีเปิดใช้โดยค่าเริ่มต้น

การตรวจสอบการช่วยเหลือพิเศษ

Lighthouse ใช้ไลบรารี axe-core ที่ยอดเยี่ยมเพื่อขับเคลื่อนหมวดหมู่การช่วยเหลือพิเศษ ใน Lighthouse 6.0 เราได้เพิ่มการตรวจสอบต่อไปนี้

• aria-hidden-body
• โฟกัสแบบ aria-hidden
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• heading-order
• รหัสซ้ำที่ใช้งานอยู่
• รหัสซ้ำ

ไอคอนที่มาสก์ได้

ไอคอนที่มาสก์ได้คือไอคอนรูปแบบใหม่ที่ทำให้ไอคอนสำหรับ PWA ดูดีในอุปกรณ์ทุกประเภท เราได้ดำเนินการตรวจสอบใหม่เพื่อตรวจสอบว่าไฟล์ Manifest.json ของคุณรองรับไฟล์ Manifest รูปแบบใหม่นี้หรือไม่ เพื่อช่วยให้ PWA ดูดีที่สุดเท่าที่จะเป็นไปได้

การประกาศชุดอักขระ

องค์ประกอบชุดอักขระเมตาจะประกาศว่าควรใช้การเข้ารหัสอักขระแบบใดเพื่อตีความเอกสาร HTML หากองค์ประกอบนี้หายไปหรือหากมีการประกาศไว้ล่าช้าในเอกสาร เบราว์เซอร์จะใช้การเรียนรู้หลายลักษณะเพื่อคาดเดาว่าควรใช้การเข้ารหัสแบบใด หากเบราว์เซอร์เดาผิดและพบองค์ประกอบชุดอักขระเมตาที่ล่าช้า โดยทั่วไปโปรแกรมแยกวิเคราะห์จะทิ้งงานทั้งหมดที่ทำมาแล้วและเริ่มต้นใหม่ ทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี การตรวจสอบใหม่นี้ช่วยยืนยันว่าหน้าเว็บมีการเข้ารหัสอักขระที่ถูกต้องและมีการกำหนดไว้ตั้งแต่ต้นและตั้งแต่แรก

CI ของ Lighthouse

ที่ CDS เมื่อเดือนพฤศจิกายนปีที่แล้ว เราได้ประกาศเปิดตัว Lighthouse CI ซึ่งเป็นโหนดโอเพนซอร์ส CLI และเซิร์ฟเวอร์ที่ติดตามผลลัพธ์ของ Lighthouse ในทุกคอมมิตในไปป์ไลน์การผสานรวมอย่างต่อเนื่องของคุณ และเราก็มีการพัฒนาไปมากนับตั้งแต่การเปิดตัวเวอร์ชันอัลฟ่า ตอนนี้ CI สำหรับ Lighthouse รองรับผู้ให้บริการ CI หลายราย เช่น Travis, Circle, GitLab และ GitHub Actions รูปภาพเอกสารที่พร้อมนำมาใช้งาน ช่วยให้ตั้งค่าได้ง่าย และการออกแบบแดชบอร์ดใหม่ที่ครอบคลุมยังแสดงให้เห็นแนวโน้มในทุกหมวดหมู่และเมตริกใน Lighthouse สำหรับการวิเคราะห์อย่างละเอียด

เริ่มใช้ CI ของ Lighthouse ในโปรเจ็กต์วันนี้เลยโดยทำตามคู่มือเริ่มต้นใช้งาน

เปลี่ยนชื่อแผงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แล้ว

เราได้เปลี่ยนชื่อแผงการตรวจสอบเป็นแผง Lighthouse เพียงพอแล้ว!

แผงอาจอยู่หลังปุ่ม » ทั้งนี้ขึ้นอยู่กับขนาดหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บ คุณสามารถลากแท็บ เพื่อเปลี่ยนลำดับได้

วิธีแสดงแผงอย่างรวดเร็วด้วยเมนูคำสั่ง

1. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. กด Control+Shift+P (หรือ Command+Shift+P บน Mac) เพื่อเปิดเมนู Command
3. เริ่มพิมพ์ "Lighthouse"
4. กด Enter

การจำลองอุปกรณ์เคลื่อนที่

Lighthouse มุ่งเน้นแนวคิดที่เน้นอุปกรณ์เคลื่อนที่เป็นหลัก ปัญหาด้านประสิทธิภาพจะเห็นได้ชัดกว่าภายใต้สภาวะอุปกรณ์เคลื่อนที่ทั่วไป แต่นักพัฒนาซอฟต์แวร์มักไม่ได้ทดสอบในเงื่อนไขเหล่านี้ ด้วยเหตุนี้ การกำหนดค่าเริ่มต้นใน Lighthouse จึงนำการจำลองอุปกรณ์เคลื่อนที่มาใช้ การจำลองประกอบด้วย

• จำลองสภาวะของเครือข่ายและ CPU ที่ช้า (ผ่านเครื่องมือจำลองที่เรียกว่า Lantern )
• การจำลองหน้าจออุปกรณ์ (แบบเดียวกับที่พบในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome)

Lighthouse ใช้ Nexus 5X เป็นอุปกรณ์อ้างอิงมาตั้งแต่แรก ในช่วงไม่กี่ปีที่ผ่านมา วิศวกรประสิทธิภาพส่วนใหญ่ใช้ Moto G4 เพื่อวัตถุประสงค์ในการทดสอบ ตอนนี้ Lighthouse กำลังติดตาม และเปลี่ยนอุปกรณ์อ้างอิงเป็น Moto G4 ในทางปฏิบัติ การเปลี่ยนแปลงนี้ไม่ชัดเจนมากนัก แต่ต่อไปนี้คือการเปลี่ยนแปลงทั้งหมดที่หน้าเว็บตรวจพบได้

• ขนาดหน้าจอเปลี่ยนจาก 412x660 พิกเซลเป็น 360x640 พิกเซล
• สตริง User Agent มีการเปลี่ยนแปลงเล็กน้อย โดยส่วนของอุปกรณ์ที่ก่อนหน้านี้คือ Nexus 5 Build/MRA58N จะเปลี่ยนเป็น Moto G (4)

Moto G4 พร้อมให้ใช้งานในรายการจำลองอุปกรณ์ Chrome DevTools ตั้งแต่ Chrome 81 เป็นต้นไป

ส่วนขยายของเบราว์เซอร์

ส่วนขยาย Chrome สำหรับ Lighthouse เป็นวิธีที่สะดวกในการเรียกใช้ Lighthouse ในเครื่อง ขออภัยที่การสนับสนุนนั้นซับซ้อน เราคิดว่าเนื่องจากแผง Chrome DevTools Lighthouse นั้นให้ประสบการณ์ที่ดีกว่า (รายงานนี้ผสานรวมกับแผงอื่นๆ) เราสามารถลดค่าใช้จ่ายด้านวิศวกรรมได้ด้วยการลดความซับซ้อนของส่วนขยาย Chrome

ตอนนี้ส่วนขยายจะใช้ PageSpeed Insights API แทนการเรียกใช้ Lighthouse ในเครื่อง เราทราบดีว่าวิธีนี้ไม่เพียงพอสำหรับผู้ใช้บางคน ความแตกต่างที่สำคัญมีดังนี้

• PageSpeed Insights ตรวจสอบเว็บไซต์ที่ไม่เผยแพร่แบบสาธารณะไม่ได้ เนื่องจากทำงานผ่านเซิร์ฟเวอร์ระยะไกลไม่ใช่อินสแตนซ์ Chrome ในเครื่อง หากต้องการตรวจสอบเว็บไซต์ที่ไม่เป็นสาธารณะ ให้ใช้แผง Lighthouse สำหรับ DevTools หรือ Node CLI
• เราไม่รับประกันว่า PageSpeed Insights จะใช้ Lighthouse รุ่นล่าสุด หากต้องการใช้รุ่นล่าสุด ให้ใช้ Node CLI ส่วนขยายของเบราว์เซอร์จะได้รับการอัปเดตประมาณ 1-2 สัปดาห์หลังจากการเปิดตัว
• PageSpeed Insights เป็น Google API ซึ่งใช้ประกอบขึ้นเป็นการยอมรับข้อกำหนดในการให้บริการของ Google API หากไม่ต้องการหรือไม่ยอมรับข้อกำหนดในการให้บริการ ให้ใช้แผง Lighthouse สำหรับเครื่องมือสำหรับนักพัฒนาเว็บหรือ Node CLI

ข่าวดีคือการลดความซับซ้อนของเรื่องราวของผลิตภัณฑ์ช่วยให้เรามุ่งเน้นที่ปัญหาทางวิศวกรรมอื่นๆ ได้ ด้วยเหตุนี้เราจึงเปิดตัวส่วนขยาย Lighthouse ใน Firefox

งบประมาณ

Lighthouse 5.0 เปิดตัวงบประมาณด้านประสิทธิภาพซึ่งรองรับการเพิ่มเกณฑ์สำหรับจำนวนทรัพยากรแต่ละประเภท (เช่น สคริปต์ รูปภาพ หรือ CSS) ที่หน้าเว็บแสดงได้

Lighthouse 6.0 เพิ่มการรองรับเมตริกการตั้งงบประมาณ ตอนนี้คุณจึงสามารถกำหนดเกณฑ์สำหรับเมตริกเฉพาะ เช่น FCP ได้ สำหรับตอนนี้ งบประมาณจะใช้ได้กับ Node CLI และ CI เท่านั้น

ลิงก์สถานที่ตั้งของแหล่งที่มา

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

เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงบรรทัดโค้ดที่ทำให้เกิดปัญหา

ในอนาคต

Lighthouse เริ่มทดลองรวบรวมแผนที่แหล่งที่มาเพื่อเพิ่มประสิทธิภาพให้กับฟีเจอร์ใหม่ๆ เช่น

• ตรวจหาโมดูลที่ซ้ำกันในแพ็กเกจ JavaScript
• ตรวจหา Polyfill ที่มากเกินไปหรือการเปลี่ยนรูปแบบในโค้ดที่ส่งไปยังเบราว์เซอร์ที่ทันสมัย
• เสริมการตรวจสอบ JavaScript ที่ไม่ได้ใช้เพื่อให้รายละเอียดระดับโมดูล
• การแสดงภาพแผนภูมิทรีแม็ปซึ่งไฮไลต์โมดูลที่ต้องมีการดำเนินการ
• การแสดงซอร์สโค้ดต้นฉบับของรายการรายงานที่มี "ตำแหน่งต้นทาง"

การตรวจสอบ JavaScript ที่ไม่ได้ใช้โดยใช้การแมปแหล่งที่มาเพื่อแสดงโค้ดที่ไม่ได้ใช้ในโมดูลแบบกลุ่มที่เจาะจง

ระบบจะเปิดใช้ฟีเจอร์เหล่านี้โดยค่าเริ่มต้นใน Lighthouse เวอร์ชันในอนาคต สำหรับตอนนี้ คุณสามารถดูการตรวจสอบเชิงทดลองของ Lighthouse ด้วยแฟล็ก CLI ต่อไปนี้

lighthouse https://web.dev --view --preset experimental

ขอขอบคุณ

ขอขอบคุณที่ใช้ Lighthouse และแสดงความคิดเห็น ความคิดเห็นของคุณจะช่วยเราปรับปรุง Lighthouse ให้ดีขึ้นและหวังว่า Lighthouse 6.0 จะช่วยให้คุณปรับปรุงประสิทธิภาพของเว็บไซต์ได้ง่ายขึ้น

สิ่งที่คุณทำได้ต่อจากนี้

• เปิด Chrome Canary แล้วลองใช้แผง Lighthouse
• ใช้ Node CLI: npm install -g lighthouse && lighthouse https://yoursite.com --view
• ให้ Lighthouse CI ทำงานพร้อมกับโปรเจ็กต์
• อ่านเอกสารประกอบการตรวจสอบของ Lighthouse
• ขอให้สนุกกับการทำให้เว็บดีขึ้น!

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