เพิ่มทักษะในการค้นหาปัญหาด้านประสิทธิภาพด้วย Lighthouse และเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
Milica Mihajlija
ในฐานะนักพัฒนาซอฟต์แวร์ คุณมักไม่สามารถควบคุมสคริปต์ของบุคคลที่สามที่เว็บไซต์โหลด คุณต้องทํางานสืบสวนเพื่อหาสาเหตุที่ทำให้เว็บไซต์ช้าก่อนจึงจะเพิ่มประสิทธิภาพเนื้อหาของบุคคลที่สามได้ 🕵️
ในโพสต์นี้ คุณจะได้เรียนรู้วิธีใช้ Lighthouse และเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อระบุทรัพยากรของบุคคลที่สามที่ทำงานช้า โพสต์นี้จะอธิบายเทคนิคที่มีประสิทธิภาพมากขึ้นซึ่งควรใช้ร่วมกัน
หากคุณมีเวลาเพียง 5 นาที
การตรวจสอบประสิทธิภาพของ Lighthouse ช่วยให้คุณค้นพบโอกาสในการเร่งความเร็วในการโหลดหน้าเว็บ สคริปต์ของบุคคลที่สามที่ทำงานช้ามีแนวโน้มที่จะปรากฏในส่วนการวินิจฉัยภายใต้การตรวจสอบลดเวลาในการดำเนินการกับ JavaScript และหลีกเลี่ยงเพย์โหลดเครือข่ายขนาดใหญ่
วิธีเรียกใช้การตรวจสอบ
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- คลิกแท็บ Lighthouse
- คลิกอุปกรณ์เคลื่อนที่
- เลือกช่องทําเครื่องหมายประสิทธิภาพ (คุณสามารถล้างช่องทําเครื่องหมายที่เหลือในส่วนการตรวจสอบได้)
- คลิก3G ที่เร็วจำลอง ชะลอความเร็ว CPU ลง 4 เท่า
- เลือกช่องทำเครื่องหมายล้างพื้นที่เก็บข้อมูล
- คลิกเรียกใช้การตรวจสอบ