ระบุ 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 และจะเพิ่มไปยังเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 77 เร็วๆ นี้

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

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

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

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

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

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

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

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

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

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

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

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