ระบุ JavaScript ของบุคคลที่สามที่ช้า

เพิ่มทักษะในการค้นหาปัญหาด้านประสิทธิภาพด้วย Lighthouse และเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

Milica Mihajlija

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

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

หากคุณมีเวลาเพียง 5 นาที

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

วิธีเรียกใช้การตรวจสอบ

1. กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
2. คลิกแท็บ Lighthouse
3. คลิกอุปกรณ์เคลื่อนที่
4. เลือกช่องทําเครื่องหมายประสิทธิภาพ (คุณสามารถล้างช่องทําเครื่องหมายที่เหลือในส่วนการตรวจสอบได้)
5. คลิก3G ที่เร็วจำลอง ชะลอความเร็ว CPU ลง 4 เท่า
6. เลือกช่องทำเครื่องหมายล้างพื้นที่เก็บข้อมูล
7. คลิกเรียกใช้การตรวจสอบ

การใช้งานของบุคคลที่สาม

การตรวจสอบการใช้บุคคลที่สามของ Lighthouse จะแสดงรายชื่อผู้ให้บริการบุคคลที่สามที่หน้าเว็บใช้ ภาพรวมนี้จะช่วยให้คุณเข้าใจภาพรวมและระบุโค้ดของบุคคลที่สามที่ซ้ำซ้อนได้ดีขึ้น การตรวจสอบมีอยู่ในส่วนขยาย Lighthouse และจะเพิ่มลงใน DevTools ใน Chrome 77 ในเร็วๆ นี้

ลดเวลาในการดำเนินการกับ JavaScript

การตรวจสอบลดเวลาในการดำเนินการกับ JavaScript ของ Lighthouse จะไฮไลต์สคริปต์ที่ใช้เวลานานในการแยกวิเคราะห์ คอมไพล์ หรือประเมิน เลือกช่องทําเครื่องหมายแสดงทรัพยากรของบุคคลที่สามเพื่อค้นหาสคริปต์ของบุคคลที่สามที่ใช้ CPU มาก

หลีกเลี่ยงเพย์โหลดเครือข่ายปริมาณมาก

การตรวจสอบหลีกเลี่ยงเพย์โหลดเครือข่ายปริมาณมากของ Lighthouse จะระบุคำขอของเครือข่าย ซึ่งรวมถึงคำขอจากบุคคลที่สามที่อาจทำให้หน้าเว็บโหลดช้าลง การตรวจสอบจะดำเนินการไม่สำเร็จเมื่อเพย์โหลดของเครือข่ายเกิน 4,000 KB

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

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

วิธีเปิดใช้การบล็อกคําขอ 1. กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ 1. คลิกแท็บเครือข่าย 1. คลิกขวาที่คำขอใดก็ได้ในแผงเครือข่าย 1. เลือกบล็อก URL คำขอ

แท็บการบล็อกคำขอจะปรากฏในลิ้นชักเครื่องมือสำหรับนักพัฒนาเว็บ คุณสามารถจัดการคำขอที่ถูกบล็อกในส่วนนี้ได้

วิธีวัดผลสคริปต์ของบุคคลที่สาม

1. วัดระยะเวลาที่หน้าเว็บใช้เวลาโหลดโดยใช้แผงเครือข่าย หากต้องการจำลองสภาพการใช้งานจริง ให้เปิดการควบคุมเครือข่ายและการควบคุม CPU (ในการเชื่อมต่อที่เร็วขึ้นและฮาร์ดแวร์เดสก์ท็อป ผลกระทบของสคริปต์ที่มีราคาแพงอาจไม่แสดงผลมากเท่ากับในโทรศัพท์มือถือ)
2. บล็อก URL หรือโดเมนที่รับผิดชอบสคริปต์ของบุคคลที่สามที่คุณเชื่อว่าเป็นปัญหา
3. โหลดหน้าเว็บซ้ำและวัดเวลาในการโหลดอีกครั้งโดยไม่มีสคริปต์ของบุคคลที่สามที่ถูกบล็อก

คุณควรเห็นความเร็วที่ดีขึ้น แต่บางครั้งการบล็อกสคริปต์ของบุคคลที่สามอาจไม่ได้ผลตามที่คาดไว้ ในกรณีนี้ ให้ลดรายการ URL ที่ถูกบล็อกจนกว่าจะแยก URL ที่ทําให้ช้าออกได้

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