JavaScript ที่ไม่ได้ใช้อาจทำให้ความเร็วในการโหลดหน้าเว็บช้าลง
- หาก JavaScript render-blockingอยู่ เบราว์เซอร์จะต้องดาวน์โหลด แยกวิเคราะห์ คอมไพล์ และประเมินสคริปต์ก่อนจึงจะทำงานอื่นๆ ที่จำเป็นสำหรับการแสดงผลหน้าเว็บได้
- แม้ว่า JavaScript จะเป็นแบบไม่พร้อมกัน (ไม่ใช่การบล็อกการแสดงผล) แต่รหัสจะแย่งแบนด์วิดท์กับทรัพยากรอื่นๆ ขณะดาวน์โหลด ซึ่งส่งผลต่อประสิทธิภาพอย่างมาก นอกจากนี้ การส่งโค้ดที่ไม่ได้ใช้ผ่านเครือข่ายยังสิ้นเปลืองสำหรับผู้ใช้อุปกรณ์เคลื่อนที่ที่ไม่มีแพ็กเกจอินเทอร์เน็ตแบบไม่จำกัดด้วย
วิธีที่การตรวจสอบ JavaScript ที่ไม่ได้ใช้ล้มเหลว
Lighthouse จะแจ้งไฟล์ JavaScript ทุกไฟล์ที่มีโค้ดที่ไม่ได้ใช้มากกว่า 20 kibibyte ดังนี้
วิธีนำ JavaScript ที่ไม่ได้ใช้ออก
ตรวจหา JavaScript ที่ไม่ได้ใช้
แท็บการครอบคลุมใน Chrome DevTools จะแสดงรายละเอียดอย่างละเอียดของโค้ดที่ไม่ได้ใช้งานได้
คลาส Coverage
ใน Puppeteer จะช่วยให้กระบวนการตรวจหาโค้ดที่ไม่ได้ใช้และการแยกโค้ดที่ใช้เป็นแบบอัตโนมัติได้
เครื่องมือสร้างที่รองรับการนำโค้ดที่ไม่ได้ใช้งานออก
ตรวจสอบการทดสอบ Tooling.Report ต่อไปนี้เพื่อดูว่าเครื่องมือสร้างแพ็กเกจรองรับฟีเจอร์ที่ช่วยหลีกเลี่ยงหรือนำโค้ดที่ไม่ได้ใช้ออกได้ง่ายขึ้นหรือไม่
คำแนะนำเฉพาะสแต็ก
Angular
หากคุณกำลังใช้ Angular CLI ให้รวมแมปที่มาลงในรุ่นที่ใช้งานจริงเพื่อตรวจสอบกลุ่ม
Drupal
ลองนำเนื้อหา JavaScript ที่ไม่ได้ใช้ออก และแนบเฉพาะไลบรารี Drupal
ที่จำเป็นลงในหน้าที่เกี่ยวข้องหรือคอมโพเนนต์ในหน้า ดูรายละเอียดได้ในเอกสารประกอบของ Drupal หากต้องการระบุไลบรารีที่แนบซึ่งเพิ่ม JavaScript โดยไม่จำเป็น ให้ลองเรียกใช้การครอบคลุมโค้ดใน DevTools ของ Chrome คุณระบุธีมหรือโมดูลที่รับผิดชอบได้จาก URL ของสคริปต์เมื่อปิดใช้การรวม JavaScript ในเว็บไซต์ Drupal
หาธีมหรือโมดูลที่มีสคริปต์จำนวนมากอยู่ในรายการซึ่งมีสีแดงอยู่จำนวนมากใน Code การครอบคลุม ธีมหรือโมดูลควรแนบไลบรารีสคริปต์เฉพาะเมื่อมีการใช้งานจริงๆ ในหน้าเท่านั้น
ดูรายละเอียด
Joomla
ลองลดหรือเปลี่ยนจำนวนส่วนขยาย Joomla ที่โหลด JavaScript ที่ไม่ได้ใช้ในหน้าเว็บของคุณ
Magento
ปิดใช้การรวมกลุ่ม JavaScript ในตัวของ Magento
โต้ตอบ
หากคุณไม่ได้กำลังแสดงผลฝั่งเซิร์ฟเวอร์ ให้แยกกลุ่ม JavaScript ด้วย React.lazy()
หรือแยกโค้ดโดยใช้ไลบรารีของบุคคลที่สาม เช่น loadable-components
Vue
หากคุณไม่ได้แสดงผลฝั่งเซิร์ฟเวอร์และใช้เราเตอร์ Vue ให้แยกแพ็กเกจตามเส้นทางการโหลดแบบ Lazy Loading
WordPress
ลองลดหรือเปลี่ยนจำนวนปลั๊กอิน WordPress ที่โหลด JavaScript ที่ไม่ได้ใช้ในหน้าเว็บของคุณ