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

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

Connor Clark

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

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

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 รายการ - ใหญ่ที่สุด Contentful Paint (LCP) และ Cumulative Layout Shift (CLS) คือการใช้งานในห้องทดลองของ Core Web Vitals

Largest Contentful Paint (LCP)

การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (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)

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

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

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

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

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

เพื่อการเปรียบเทียบ นี่คือการให้คะแนนในเวอร์ชัน 5:

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

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

วันที่

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

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

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

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

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

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

• เนื้อหา ARIA ที่ซ่อน
• โฟกัสที่ซ่อนของ aria
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• ลำดับส่วนหัว
• ซ้ำซ้อน-รหัส-ทำงาน
• รหัสซ้ำ-aria

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

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

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

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

ประภาคาร CI

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

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

เปลี่ยนชื่อแผงเครื่องมือสำหรับนักพัฒนาเว็บใน 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 ที่ช้า (ผ่านเครื่องมือจำลองที่เรียกว่า โคมไฟ)
• การจำลองหน้าจออุปกรณ์ (เช่นเดียวกับที่พบในเครื่องมือสำหรับนักพัฒนาเว็บใน 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 ภายในเครื่อง ขออภัย การสนับสนุนมีความซับซ้อน เนื่องจากแผง Lighthouse ของ Chrome DevTools จะให้ประสบการณ์ที่ดีกว่า (รายงาน ที่ผสานรวมกับแผงควบคุมอื่นๆ) เราสามารถช่วยลดค่าใช้จ่ายด้านวิศวกรรมของเราได้โดยการทำให้ Chrome ง่ายขึ้น ส่วนขยาย

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

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

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

งบประมาณ

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

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

ลิงก์ตำแหน่งต้นทาง

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

สู่ขอบฟ้า

Lighthouse เริ่มการทดลองรวบรวมแผนที่แหล่งที่มาเพื่อขับเคลื่อนฟีเจอร์ใหม่ๆ เช่น

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

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

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

ขอขอบคุณ

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

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

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

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