เมตริกใหม่ การอัปเดตคะแนนประสิทธิภาพ การตรวจสอบใหม่ และอื่นๆ
วันนี้เราเปิดตัว Lighthouse 6.0
Lighthouse เป็นเครื่องมือตรวจสอบเว็บไซต์อัตโนมัติที่ช่วยให้นักพัฒนาซอฟต์แวร์มีโอกาสและข้อมูลการวินิจฉัยเพื่อปรับปรุงประสบการณ์ของผู้ใช้เว็บไซต์ ซึ่งพร้อมใช้งานในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome, npm (เป็นโมดูล Node และ CLI) หรือเป็นส่วนขยายของเบราว์เซอร์ (ใน Chrome และ Firefox) ซึ่งขับเคลื่อนบริการหลายอย่างของ Google รวมถึง PageSpeed Insights
Lighthouse 6.0 พร้อมใช้งานใน npm และ Chrome Canary ทันที บริการอื่นๆ ของ Google ที่ใช้ Lighthouse จะได้รับการอัปเดตภายในสิ้นเดือน โดยจะเปิดตัวใน Chrome Stable ใน Chrome 84 (กลางเดือนกรกฎาคม)
หากต้องการลองใช้ Lighthouse Node CLI ให้ใช้คําสั่งต่อไปนี้
bash
npm install -g lighthouse
lighthouse https://www.example.com --view
Lighthouse เวอร์ชันนี้มาพร้อมกับการเปลี่ยนแปลงจำนวนมากที่ระบุไว้ในบันทึกการเปลี่ยนแปลงของเวอร์ชัน 6.0 เราจะกล่าวถึงไฮไลต์ในบทความนี้
- เมตริกใหม่
- การอัปเดตคะแนนประสิทธิภาพ
- การตรวจสอบใหม่
- Lighthouse CI
- เปลี่ยนชื่อแผงเครื่องมือสำหรับนักพัฒนาเว็บใน 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 Irish
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) คือค่าที่วัดความเสถียรของภาพ ซึ่งจะวัดปริมาณการเลื่อนตำแหน่งของเนื้อหาในหน้าเว็บ คะแนน CLS ที่ต่ำเป็นสัญญาณที่บอกนักพัฒนาซอฟต์แวร์ว่าผู้ใช้ไม่ได้พบการเปลี่ยนแปลงเนื้อหาที่ไม่เหมาะสม โดยคะแนน CLS ที่ต่ำกว่า 0.10 ถือว่า "ดี"
CLS ในสภาพแวดล้อมของห้องทดลองจะวัดตั้งแต่ต้นจนจบการโหลดหน้าเว็บ ขณะที่ในสนาม คุณสามารถวัด CLS จนถึงการโต้ตอบของผู้ใช้ครั้งแรกหรือรวมอินพุตของผู้ใช้ทั้งหมด
ดูข้อมูลเพิ่มเติมได้จากวิดีโอเจาะลึกเกี่ยวกับ CLS ของ Annie Sullivan
เวลาทั้งหมดในการบล็อก (TBT)
เวลาในการบล็อกทั้งหมด (TBT) จะวัดการตอบสนองของการโหลด โดยวัดระยะเวลาทั้งหมดที่มีการบล็อกเทรดหลักเป็นเวลานานพอที่จะป้องกันการตอบสนองต่ออินพุต TBT จะวัดระยะเวลาทั้งหมดระหว่าง First Contentful Paint (FCP) กับเวลาในการตอบสนอง (TTI) ซึ่งเป็นเมตริกที่ทำงานร่วมกับ TTI และช่วยเพิ่มความซับซ้อนในการวัดกิจกรรมของเธรดหลักที่บล็อกไม่ให้ผู้ใช้โต้ตอบกับหน้าเว็บ
นอกจากนี้ TBT ยังสัมพันธ์กับเมตริกในสนามอย่าง First Input Delay (FID) ซึ่งเป็น Core Web Vital อีกด้วย
การอัปเดตคะแนนประสิทธิภาพ
คะแนนประสิทธิภาพใน 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 และ FID สูงสุดที่เป็นไปได้ เราได้ปรับน้ำหนักของเมตริกที่เหลือเพื่อเน้นการโต้ตอบของชุดข้อความหลักและความคาดการณ์เลย์เอาต์
คะแนนของเวอร์ชัน 5 มีดังนี้
ระยะ | ชื่อเมตริก | น้ำหนัก |
---|---|---|
ระดับเริ่มต้น (23%) | First Contentful Paint (FCP) | 23% |
ปานกลาง (34%) | ดัชนีความเร็ว (SI) | 27% |
First Meaningful Paint (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
- เราได้เลิกใช้งาน First Meaningful Paint แล้ว เมตริกนี้มีความหลากหลายมากเกินไปและไม่มีเส้นทางที่เป็นไปได้ในการทำให้มาตรฐาน เนื่องจากการใช้งานมีไว้สำหรับการแสดงผลภายในของ Chrome โดยเฉพาะ แม้ว่าทีมบางทีมจะพบว่าช่วงเวลา FMP มีประโยชน์ในเว็บไซต์ของตน แต่เมตริกนี้จะไม่ได้รับการปรับปรุงเพิ่มเติม
- First CPU Idle ถูกเลิกใช้งานแล้วเนื่องจากไม่แตกต่างจาก TTI มากพอ TBT และ TTI เป็นเมตริกสําหรับการโต้ตอบที่ควรใช้ในปัจจุบัน
- CLS มีน้ำหนักค่อนข้างต่ำ แต่เราคาดว่าจะเพิ่มน้ำหนักในเวอร์ชันหลักในอนาคต
การเปลี่ยนแปลงของคะแนน
การเปลี่ยนแปลงเหล่านี้ส่งผลต่อคะแนนของเว็บไซต์จริงอย่างไร เราได้เผยแพร่การวิเคราะห์การเปลี่ยนแปลงคะแนนโดยใช้ชุดข้อมูล 2 ชุด ได้แก่ ชุดเว็บไซต์ทั่วไปและชุดเว็บไซต์แบบคงที่ที่สร้างด้วย Eleventy โดยสรุปแล้ว เว็บไซต์ประมาณ 20% มีคะแนนสูงขึ้นอย่างเห็นได้ชัด ประมาณ 30% แทบไม่มีการเปลี่ยนแปลง และประมาณ 50% มีคะแนนลดลงอย่างน้อย 5 จุด
การเปลี่ยนแปลงคะแนนแบ่งออกเป็น 3 องค์ประกอบหลัก ดังนี้
- การเปลี่ยนแปลงน้ำหนักของคะแนน
- แก้ไขข้อบกพร่องในการติดตั้งใช้งานเมตริกพื้นฐาน
- การเปลี่ยนแปลงเส้นโค้งคะแนนแต่ละรายการ
การเปลี่ยนแปลงน้ำหนักของคะแนนและการนำเมตริกใหม่ 3 รายการมาใช้เป็นสาเหตุของการเปลี่ยนแปลงคะแนนโดยรวมส่วนใหญ่ เมตริกใหม่ซึ่งนักพัฒนาแอปยังไม่ได้เพิ่มประสิทธิภาพจะมีน้ำหนักมากในคะแนนประสิทธิภาพเวอร์ชัน 6 ขณะที่คะแนนประสิทธิภาพโดยเฉลี่ยของชุดทดสอบในเวอร์ชัน 5 อยู่ที่ประมาณ 50 คะแนน โดยคะแนนเฉลี่ยของเมตริกเวลาการบล็อกทั้งหมดและ Largest Contentful Paint ใหม่อยู่ที่ประมาณ 30 เมตริกทั้ง 2 รายการนี้คิดเป็นสัดส่วน 50% ของน้ำหนักในคะแนนประสิทธิภาพของ Lighthouse เวอร์ชัน 6 ดังนั้นเว็บไซต์จํานวนมากจึงมีคะแนนลดลง
การแก้ไขข้อบกพร่องในการคำนวณเมตริกพื้นฐานอาจส่งผลให้คะแนนแตกต่างกัน การดำเนินการนี้ส่งผลกระทบต่อเว็บไซต์จำนวนไม่มากนัก แต่อาจส่งผลกระทบอย่างมากในบางสถานการณ์ โดยรวมแล้ว เว็บไซต์ประมาณ 8% คะแนนเพิ่มขึ้นเนื่องจากการเปลี่ยนแปลงการติดตั้งใช้งานเมตริก และเว็บไซต์ประมาณ 4% คะแนนลดลงเนื่องจากการเปลี่ยนแปลงการติดตั้งใช้งานเมตริก เว็บไซต์ประมาณ 88% จะไม่ได้รับผลกระทบจากการแก้ไขเหล่านี้
การเปลี่ยนแปลงเส้นโค้งคะแนนแต่ละรายการส่งผลต่อการเปลี่ยนแปลงคะแนนโดยรวมด้วย แม้ว่าจะเล็กน้อยมากก็ตาม เราตรวจสอบเป็นระยะว่าเส้นโค้งคะแนนสอดคล้องกับเมตริกที่สังเกตได้ในชุดข้อมูล HTTPArchive ยกเว้นเว็บไซต์ที่ได้รับผลกระทบจากการเปลี่ยนแปลงการติดตั้งใช้งานที่สำคัญ การปรับเส้นโค้งคะแนนของเมตริกแต่ละรายการเล็กน้อยช่วยเพิ่มคะแนนของเว็บไซต์ประมาณ 3% และลดคะแนนของเว็บไซต์ประมาณ 4% เว็บไซต์ประมาณ 93% ไม่ได้รับผลจากการเปลี่ยนแปลงนี้
เครื่องคำนวณคะแนน
เราได้เผยแพร่เครื่องคำนวณคะแนนเพื่อช่วยให้คุณสํารวจคะแนนประสิทธิภาพ เครื่องคำนวณยังแสดงการเปรียบเทียบคะแนนของ Lighthouse เวอร์ชัน 5 กับ 6 ด้วย เมื่อเรียกใช้การตรวจสอบด้วย Lighthouse 6.0 รายงานจะมีลิงก์ไปยังเครื่องคิดเลขพร้อมผลลัพธ์ของคุณ
การตรวจสอบใหม่
JavaScript ที่ไม่ได้ใช้
เราใช้ประโยชน์จากการครอบคลุมโค้ดของเครื่องมือสำหรับนักพัฒนาเว็บในการตรวจสอบใหม่ นั่นคือ JavaScript ที่ไม่ได้ใช้
การตรวจสอบนี้ไม่ได้ใหม่ทั้งหมด เราได้เพิ่มการตรวจสอบนี้เมื่อกลางปี 2017 แต่เนื่องจากมีค่าใช้จ่ายเพิ่มเติมด้านประสิทธิภาพ ระบบจึงปิดใช้การตรวจสอบนี้โดยค่าเริ่มต้นเพื่อให้ Lighthouse ทำงานได้เร็วที่สุด ตอนนี้การเก็บรวบรวมข้อมูลความครอบคลุมนี้มีประสิทธิภาพมากขึ้นมาก เราจึงเปิดใช้ข้อมูลนี้โดยค่าเริ่มต้น
การตรวจสอบการช่วยเหลือพิเศษ
Lighthouse ใช้ไลบรารี axe-core ที่ยอดเยี่ยมเพื่อขับเคลื่อนหมวดหมู่การช่วยเหลือพิเศษ ใน Lighthouse 6.0 เราได้เพิ่มการตรวจสอบต่อไปนี้
aria-hidden-body
aria-hidden-focus
aria-input-field-name
aria-toggle-field-name
form-field-multiple-labels
heading-order
duplicate-id-active
duplicate-id-aria
ไอคอนที่มาสก์ได้
ไอคอนที่ปิดบังได้เป็นรูปแบบไอคอนใหม่ที่ทำให้ไอคอน PWA ของคุณดูดีในอุปกรณ์ทุกประเภท เราได้เปิดตัวการตรวจสอบใหม่เพื่อตรวจสอบว่าไฟล์ manifest.json รองรับรูปแบบใหม่นี้หรือไม่ เพื่อช่วยให้คุณ PWA แสดงผลได้ดีที่สุด
การประกาศชุดอักขระ
องค์ประกอบ meta charset จะประกาศว่าควรใช้การเข้ารหัสอักขระใดเพื่อตีความเอกสาร HTML หากไม่มีองค์ประกอบนี้หรือประกาศองค์ประกอบนี้ในเอกสารช้าเกินไป เบราว์เซอร์จะใช้วิธีการเดาหลายวิธีเพื่อคาดเดาว่าควรใช้การเข้ารหัสใด หากเบราว์เซอร์เดาไม่ถูกต้องและพบองค์ประกอบ meta charset ในช่วงท้าย โดยทั่วไปโปรแกรมแยกวิเคราะห์จะทิ้งงานที่ทำมาทั้งหมดและเริ่มใหม่ ซึ่งทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดี การตรวจสอบใหม่นี้จะยืนยันว่าหน้าเว็บมีการเข้ารหัสอักขระที่ถูกต้องและมีการกําหนดไว้ตั้งแต่เนิ่นๆ
Lighthouse CI
เมื่อเดือนพฤศจิกายนที่ผ่านมาใน CDS เราประกาศ Lighthouse CI ซึ่งเป็น Node CLI และเซิร์ฟเวอร์โอเพนซอร์สที่ติดตามผลลัพธ์ของ Lighthouse ในการคอมมิตทุกรายการในไปป์ไลน์การผสานรวมอย่างต่อเนื่อง และเราได้พัฒนาไปมากตั้งแต่รุ่นอัลฟ่า ตอนนี้ Lighthouse CI รองรับผู้ให้บริการ CI หลายรายแล้ว ซึ่งรวมถึง Travis, Circle, GitLab และ GitHub Actions อิมเมจ Docker ที่พร้อมใช้งานช่วยให้การตั้งค่าเป็นเรื่องง่ายดาย และหน้าแดชบอร์ดที่ออกแบบใหม่อย่างครอบคลุมจะแสดงแนวโน้มในทุกหมวดหมู่และเมตริกใน Lighthouse สําหรับการวิเคราะห์โดยละเอียด
เริ่มใช้ Lighthouse CI ในโปรเจ็กต์ของคุณวันนี้โดยทําตามคู่มือการเริ่มต้นใช้งาน
เปลี่ยนชื่อแผงเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
เราได้เปลี่ยนชื่อแผงการตรวจสอบเป็นแผง Lighthouse พูดแค่นี้พอ
แผงอาจอยู่หลังปุ่ม »
ทั้งนี้ขึ้นอยู่กับขนาดหน้าต่าง DevTools คุณลากแท็บเพื่อเปลี่ยนลำดับได้
วิธีแสดงแผงที่มีเมนูคำสั่งอย่างรวดเร็ว
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- กด
Control+Shift+P
(หรือCommand+Shift+P
ใน Mac) เพื่อเปิดเมนูคำสั่ง - เริ่มพิมพ์ "Lighthouse"
- กด
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)
ตั้งแต่ Chrome 81 เป็นต้นไป Moto G4 จะอยู่ในรายการการจําลองอุปกรณ์ของเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ Chrome ด้วย
ส่วนขยายของเบราว์เซอร์
ส่วนขยาย Chrome สําหรับ Lighthouse เป็นวิธีที่สะดวกในการเรียกใช้ Lighthouse ในเครื่อง ขออภัย การสนับสนุนเรื่องนี้มีความซับซ้อน เราพบว่าแผง Lighthouse ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ให้ประสบการณ์การใช้งานที่ดีกว่า (รายงานผสานรวมกับแผงอื่นๆ) เราจึงลดค่าใช้จ่ายด้านวิศวกรรมได้โดยลดความซับซ้อนของส่วนขยาย Chrome
ตอนนี้ส่วนขยายใช้ PageSpeed Insights API แทนการเรียกใช้ Lighthouse ในเครื่อง เราตระหนักดีว่าฟีเจอร์นี้อาจไม่เพียงพอสำหรับผู้ใช้บางราย ความแตกต่างที่สำคัญมีดังนี้
- PageSpeed Insights ไม่สามารถตรวจสอบเว็บไซต์ที่ไม่ใช่แบบสาธารณะได้ เนื่องจากทำงานผ่านเซิร์ฟเวอร์ระยะไกล ไม่ใช่อินสแตนซ์ Chrome ในเครื่อง หากต้องการตรวจสอบเว็บไซต์ที่ไม่ใช่แบบสาธารณะ ให้ใช้แผง Lighthouse ของเครื่องมือสำหรับนักพัฒนาเว็บ หรือ Node CLI
- PageSpeed Insights ไม่ได้รับประกันว่าจะใช้ Lighthouse เวอร์ชันล่าสุด หากต้องการใช้รุ่นล่าสุด ให้ใช้ Node CLI ส่วนขยายเบราว์เซอร์จะได้รับการอัปเดตประมาณ 1-2 สัปดาห์หลังจากการเผยแพร่
- PageSpeed Insights เป็น Google API การใช้ PageSpeed Insights ถือว่าคุณยอมรับข้อกำหนดในการให้บริการของ Google API หากไม่ต้องการหรือไม่ยอมรับข้อกำหนดในการให้บริการ ให้ใช้แผง Lighthouse ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ หรือ Node CLI
ข่าวดีคือการปรับให้เรื่องราวผลิตภัณฑ์เรียบง่ายช่วยให้เรามุ่งเน้นที่ปัญหาด้านวิศวกรรมอื่นๆ ได้ ด้วยเหตุนี้ เราจึงเปิดตัวส่วนขยาย Lighthouse Firefox
งบประมาณ
Lighthouse 5.0 ได้เปิดตัวงบประมาณด้านประสิทธิภาพซึ่งรองรับการเพิ่มเกณฑ์สำหรับจำนวนทรัพยากรแต่ละประเภท (เช่น สคริปต์ รูปภาพ หรือ CSS) ที่หน้าเว็บจะแสดงได้
Lighthouse 6.0 เพิ่มการรองรับเมตริกการกําหนดงบประมาณ คุณจึงกําหนดเกณฑ์สําหรับเมตริกที่เฉพาะเจาะจง เช่น FCP ได้แล้ว ขณะนี้งบประมาณใช้ได้กับ Node CLI และ Lighthouse CI เท่านั้น
ลิงก์ตำแหน่งของแหล่งที่มา
ปัญหาบางอย่างที่ Lighthouse พบเกี่ยวกับหน้าเว็บสามารถย้อนกลับไปยังบรรทัดของซอร์สโค้ดที่เฉพาะเจาะจงได้ และรายงานจะระบุไฟล์และบรรทัดที่เจาะจงซึ่งเกี่ยวข้อง คลิกตำแหน่งที่ระบุในรายงานเพื่อเปิดไฟล์ที่เกี่ยวข้องในแผงแหล่งที่มา เพื่อให้คุณสำรวจได้ง่ายในเครื่องมือสำหรับนักพัฒนาเว็บ
กำลังจะเกิดขึ้น
Lighthouse ได้เริ่มทดสอบการเก็บรวบรวมแผนที่ซอร์สโค้ดเพื่อขับเคลื่อนฟีเจอร์ใหม่ๆ เช่น
- ตรวจหาโมดูลที่ซ้ำกันในแพ็กเกจ JavaScript
- ตรวจหา Polyfill หรือการเปลี่ยนรูปแบบมากเกินไปในโค้ดที่ส่งไปยังเบราว์เซอร์สมัยใหม่
- การเพิ่มการตรวจสอบ JavaScript ที่ไม่ได้ใช้เพื่อให้รายละเอียดระดับโมดูล
- ภาพแผนภูมิต้นไม้ที่ไฮไลต์โมดูลที่ต้องดำเนินการ
- แสดงซอร์สโค้ดต้นฉบับของรายการรายงานที่มี "ตำแหน่งแหล่งที่มา"
ฟีเจอร์เหล่านี้จะเปิดใช้โดยค่าเริ่มต้นใน Lighthouse เวอร์ชันในอนาคต ขณะนี้คุณสามารถดูการตรวจสอบเวอร์ชันทดลองของ Lighthouse ได้ด้วย Flag 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 เป็นโปรเจ็กต์โอเพนซอร์สและเราขอแสดงความขอบคุณอย่างยิ่งแก่ผู้มีส่วนร่วมทุกคนที่ช่วยเหลือเราในทุกเรื่อง ตั้งแต่การแก้ไขคำที่พิมพ์ผิด ไปจนถึงการปรับโครงสร้างเอกสารประกอบ ไปจนถึงการตรวจสอบใหม่ทั้งหมด หากสนใจมีส่วนร่วม ไปที่ที่เก็บ GitHub ของ Lighthouse