ค้นพบโอกาสในการเพิ่มประสิทธิภาพด้วย Lighthouse

Kayce Basques

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

1. คุณต้องบอก Lighthouse ว่าให้ตรวจสอบหน้าใด
2. Lighthouse จะโหลดหน้านั้นและบันทึกระยะเวลาที่หน้าเว็บใช้ในการบรรลุเป้าหมายด้านประสิทธิภาพต่างๆ โดยเหตุการณ์สําคัญเหล่านี้เรียกว่าเมตริก
3. Lighthouse จะแสดงรายงานเกี่ยวกับประสิทธิภาพของหน้าเว็บ รายงานจะแสดงคะแนนของเมตริกแต่ละรายการและรายการโอกาส ซึ่งหากนำมาใช้ ก็จะช่วยให้หน้าเว็บโหลดเร็วขึ้น

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

เรียกใช้ Lighthouse จากหน้าโปรไฟล์

วิธีเรียกใช้ Lighthouse จากหน้าโปรไฟล์ web.dev

1. ระบุ URL ใดก็ได้ แล้ว Lighthouse จะเรียกใช้ชุดการตรวจสอบเพื่อสร้างรายงานประสิทธิภาพของหน้าเว็บ

2. ตรวจสอบรายงานการตรวจสอบเพื่อระบุจุดที่ควรปรับปรุงหน้าเว็บ

3. คุณจะดูคําแนะนําและขั้นตอนที่ทําได้ทันทีเพื่อปรับปรุงคะแนนได้ในการตรวจสอบแต่ละรายการ

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

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คือชุดเครื่องมือสำหรับนักพัฒนาเว็บที่สร้างขึ้นในเบราว์เซอร์ Google Chrome โดยตรง คุณไม่จำเป็นต้องดาวน์โหลดอะไรเลยเพื่อรับเครื่องมือสำหรับนักพัฒนาเว็บ หากมี Chrome คุณก็มีเครื่องมือสำหรับนักพัฒนาเว็บ

1. ใน Chrome ให้ไปที่หน้าที่ต้องการตรวจสอบ
2. กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

คลิกแท็บการตรวจสอบ หากไม่เห็นแท็บนี้ ให้คลิกสัญลักษณ์ » แล้วเลือกการตรวจสอบจากรายการ Lighthouse เป็นเครื่องมือที่ขับเคลื่อนแผงการตรวจสอบ คุณจึงเห็นรูปภาพประภาคาณ

1. ตรวจสอบว่าได้เลือกปุ่มตัวเลือกอุปกรณ์เคลื่อนที่ เมื่อ Lighthouse ตรวจสอบหน้าเว็บ จะจำลองวิดเจ็ตการแสดงผลและสตริง User Agent ของอุปกรณ์เคลื่อนที่
2. ตรวจสอบว่าได้เปิดใช้ช่องทําเครื่องหมายประสิทธิภาพ คุณเปิดหรือปิดใช้ช่องทําเครื่องหมายที่เหลือได้ในส่วนการตรวจสอบ หากเปิดใช้ฟีเจอร์เหล่านี้ คุณจะเห็นโอกาสมากมายในการปรับปรุงด้านอื่นๆ ของหน้า
3. ตรวจสอบว่าได้เลือกปุ่มตัวเลือกจำลอง 3G ที่เร็ว ชะลอความเร็ว CPU ลง 4 เท่า Lighthouse ไม่ได้จำกัดเครือข่ายหรือ CPU ขณะที่โหลดหน้าเว็บ แต่จะใช้ระยะเวลาที่หน้าเว็บใช้เวลาโหลดภายใต้เงื่อนไขปกติ แล้วประมาณระยะเวลาที่หน้าเว็บจะใช้เวลาโหลดในเครือข่าย 3G ที่รวดเร็วด้วย CPU ที่มีประสิทธิภาพน้อยกว่าเครื่องของคุณ 4 เท่า
4. ตรวจสอบว่าได้เปิดใช้ช่องทำเครื่องหมายล้างพื้นที่เก็บข้อมูล ตัวเลือกนี้จะบังคับให้ Lighthouse ไปที่เครือข่ายเพื่อขอทรัพยากรของหน้าเว็บทุกหน้า ซึ่งเป็นประสบการณ์ที่ผู้เข้าชมครั้งแรกได้รับ
5. คลิกเรียกใช้การตรวจสอบ หลังจากผ่านไป 5-10 วินาที Lighthouse จะแสดงรายงานให้คุณเห็น

ตัวอย่างเช่น หากคุณเรียกใช้การตรวจสอบบางอย่างด้วยการจําลอง 3G ที่เร็ว เปิดใช้การควบคุมการจำกัดความเร็ว CPU ลง 4 เท่า และเรียกใช้การตรวจสอบในบางครั้งโดยปิดใช้การควบคุมการจำกัดความเร็ว คะแนนเมตริกจะลดลงอย่างมากเมื่อคุณเปิดใช้การควบคุมการจำกัดความเร็ว คุณอาจเสียเวลาไปมากในการพยายามหาสาเหตุที่หน้าเว็บช้าลงมากในตอนนี้ ทั้งๆ ที่ในความเป็นจริงแล้วมีเพียงการกําหนดค่าเท่านั้นที่เปลี่ยนแปลงไป

ทําความเข้าใจรายงาน

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

วางเมาส์เหนือเมตริกเพื่อดูข้อมูลเพิ่มเติม คลิกดูข้อมูลเพิ่มเติมเพื่ออ่านเอกสารประกอบเกี่ยวกับเรื่องนี้

ด้านล่างคะแนนเมตริก คุณจะเห็นภาพหน้าจอของลักษณะหน้าเว็บขณะโหลด

คุณจะเห็นโอกาสในการปรับปรุงประสิทธิภาพของหน้าเว็บใต้ภาพหน้าจอ

คลิกโอกาสเพื่อดูข้อมูลเพิ่มเติม

ขั้นตอนถัดไป

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

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