Lighthouseคือเครื่องมือที่จะช่วยคุณวัดผลและหาวิธีปรับปรุงประสิทธิภาพของหน้าเว็บ ต่อไปนี้เป็นเวิร์กโฟลว์ทั่วไปสำหรับวิธีที่คุณใช้ Lighthouse
- คุณบอกให้ Lighthouse ทราบว่าต้องตรวจสอบหน้าเว็บใด
- Lighthouse โหลดหน้าเว็บนั้นและบันทึกระยะเวลาที่หน้าเว็บใช้เพื่อให้บรรลุเป้าหมายด้านประสิทธิภาพต่างๆ เป้าหมายเหล่านี้เรียกว่าmetrics
- Lighthouse จะแสดงรายงานประสิทธิภาพของหน้าเว็บ รายงานจะแสดงคะแนนของแต่ละเมตริกและรายการโอกาส ซึ่งหากคุณใช้โอกาสดังกล่าวควรทำให้การโหลดหน้าเว็บเร็วขึ้น
คุณมีภารกิจที่จะปรับปรุงคะแนนเมตริกไปเรื่อยๆ หรืออย่างน้อยก็เพื่อให้คะแนนไม่แย่ลง อย่างไรก็ตาม ไม่มีวิธีที่จะใช้เมตริกโดยตรง แต่คุณทำตามโอกาสที่ Lighthouse มอบให้แทน การจัดการโอกาสเหล่านั้น มีแนวโน้มที่จะทำให้คะแนนเมตริกดีขึ้น
เรียกใช้ Lighthouse จากหน้าโปรไฟล์ของคุณ
เรียกใช้ Lighthouse จากหน้าโปรไฟล์ web.dev
ระบุ URL แล้ว Lighthouse จะเรียกใช้ชุดการตรวจสอบเพื่อสร้างรายงานว่าหน้าเว็บทำงานได้ดีเพียงใด
ตรวจสอบรายงานการตรวจสอบเพื่อระบุส่วนที่ควรปรับปรุงหน้าเว็บ
ในการตรวจสอบแต่ละครั้ง คุณจะเห็นคำแนะนำและขั้นตอนที่ควรทำทันทีเพื่อปรับปรุงคะแนน
เรียกใช้ Lighthouse จาก Chrome DevTools
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คือชุดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่สร้างขึ้นในเบราว์เซอร์ Google Chrome โดยตรง คุณไม่ต้องดาวน์โหลดอะไรเลยเพื่อรับเครื่องมือสำหรับนักพัฒนาเว็บ หากคุณมี Chrome แสดงว่าคุณมีเครื่องมือสำหรับนักพัฒนาเว็บ
- ไปยังหน้าที่ต้องการตรวจสอบใน Chrome
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
คลิกแท็บการตรวจสอบ หากไม่เห็นแท็บนี้ ให้คลิกสัญลักษณ์ » แล้วเลือกการตรวจสอบจากรายการ Lighthouse คือเครื่องมือที่ขับเคลื่อนแผงการตรวจสอบ นั่นเป็นเหตุผลว่าทำไมคุณถึงเห็นภาพ ประภาคาร
- ตรวจสอบว่าได้เลือกปุ่มตัวเลือกอุปกรณ์เคลื่อนที่แล้ว เมื่อ Lighthouse ตรวจสอบหน้าเว็บ หน้าเว็บจะจำลองวิวพอร์ตและสตริง User Agent ของอุปกรณ์เคลื่อนที่
- ตรวจสอบว่าได้เปิดใช้ช่องทำเครื่องหมายประสิทธิภาพแล้ว คุณเปิดหรือปิดใช้ช่องทำเครื่องหมายที่เหลือได้ในส่วนการตรวจสอบ หากคุณเปิดใช้ คุณจะเห็นโอกาสมากมายในการปรับปรุงส่วนอื่นๆ ของหน้าเว็บ
- ตรวจสอบว่าได้เลือกปุ่มตัวเลือก Simulated Fast 3G, 4x CPU Slowdown แล้ว Lighthouse ไม่ได้ควบคุมเครือข่ายหรือ CPU ของคุณในขณะที่โหลดหน้าเว็บ แต่จะดูระยะเวลาที่หน้าเว็บใช้ในการโหลดภายใต้สภาวะปกติ แล้วประมาณระยะเวลาที่จะต้องใช้ในเครือข่าย 3G ที่เร็วซึ่งมี CPU ที่ทรงประสิทธิภาพน้อยกว่าเครื่องของคุณ 4 เท่า
- ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายล้างพื้นที่เก็บข้อมูลแล้ว ตัวเลือกนี้จะบังคับให้ Lighthouse ไปที่เครือข่ายสำหรับทรัพยากรทุกหน้า ซึ่งเป็นวิธีที่ผู้เข้าชมครั้งแรกจะได้สัมผัสหน้าดังกล่าว
- คลิกดำเนินการตรวจสอบ Lighthouse จะแสดงรายงานหลังจากผ่านไป 5-10 วินาที
ตัวอย่างเช่น หากคุณดำเนินการตรวจสอบบางส่วนโดยใช้ 3G แบบรวดเร็วจำลอง เปิดใช้การควบคุมการลดช้าลง 4 เท่าของ CPU และในบางครั้งที่คุณดำเนินการตรวจสอบโดยปิดใช้การควบคุม คะแนนเมตริกจะลดลงอย่างมากเมื่อคุณเปิดใช้การควบคุม คุณอาจต้องใช้เวลานานในการค้นหาสาเหตุที่หน้าเว็บทำงานช้าลงมากในตอนนี้ ทั้งที่จริงๆ แล้ว สิ่งเดียวที่เปลี่ยนไปคือการกําหนดค่าของคุณ
ทำความเข้าใจรายงาน
รายงานจะแสดงคะแนนประสิทธิภาพโดยรวมทางด้านขวาบน 100 ถือเป็นคะแนนยอดเยี่ยม ด้านล่างคะแนนโดยรวมจะเป็นคะแนนเมตริก คู่มือการให้คะแนนของ Lighthouse v3 อธิบายว่าคะแนนเมตริกแต่ละรายการส่งผลต่อคะแนนโดยรวมอย่างไร
วางเมาส์เหนือเมตริกเพื่อดูข้อมูลเพิ่มเติม คลิกดูข้อมูลเพิ่มเติมเพื่ออ่านเอกสารประกอบเกี่ยวกับฟีเจอร์นี้
ด้านล่างคะแนนเมตริก คุณจะเห็นภาพหน้าจอของหน้าเว็บที่แสดงขณะที่โหลด
ด้านล่างภาพหน้าจอ คุณจะเห็นโอกาสในการปรับปรุงประสิทธิภาพของหน้าเว็บ
คลิกที่โอกาสเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับโอกาสนั้น
ขั้นตอนถัดไป
ลองใช้ Lighthouse เพื่อตรวจสอบหน้าเว็บ ไม่ว่าจะจากหน้าโปรไฟล์หรือจากเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ใช้โอกาสใดโอกาสหนึ่ง แล้วตรวจสอบหน้าเว็บอีกครั้งเพื่อดูว่าการเปลี่ยนแปลงส่งผลต่อรายงานของคุณอย่างไร คะแนนเมตริกของคุณน่าจะดีกว่านี้อีกนิดหน่อย และ Lighthouse ไม่ควรจะจัดการกับโอกาสดังกล่าวอีกต่อไป
การเรียกใช้ Lighthouse ด้วยตนเองเหมาะสำหรับการแก้ปัญหาการตรวจสอบเฉพาะจุด แต่ท้ายที่สุดแล้วคุณจะต้องตั้งค่าการตรวจสอบอย่างต่อเนื่องเพื่อให้เว็บไซต์มีประสิทธิภาพอยู่เสมอ หากต้องการติดตามความคืบหน้าของ Lighthouse เมื่อเวลาผ่านไป ให้เพิ่มเว็บไซต์ลงในโปรไฟล์