นำ JavaScript ที่ไม่ได้ใช้ออก

JavaScript ที่ไม่ได้ใช้อาจทำให้ความเร็วในการโหลดหน้าเว็บช้าลง

  • หาก JavaScript render-blockingอยู่ เบราว์เซอร์จะต้องดาวน์โหลด แยกวิเคราะห์ คอมไพล์ และประเมินสคริปต์ก่อนจึงจะทำงานอื่นๆ ที่จำเป็นสำหรับการแสดงผลหน้าเว็บได้
  • แม้ว่า JavaScript จะเป็นแบบไม่พร้อมกัน (ไม่ใช่การบล็อกการแสดงผล) แต่รหัสจะแย่งแบนด์วิดท์กับทรัพยากรอื่นๆ ขณะดาวน์โหลด ซึ่งส่งผลต่อประสิทธิภาพอย่างมาก นอกจากนี้ การส่งโค้ดที่ไม่ได้ใช้ผ่านเครือข่ายยังสิ้นเปลืองสำหรับผู้ใช้อุปกรณ์เคลื่อนที่ที่ไม่มีแพ็กเกจอินเทอร์เน็ตแบบไม่จำกัดด้วย

วิธีที่การตรวจสอบ JavaScript ที่ไม่ได้ใช้ล้มเหลว

Lighthouse จะแจ้งไฟล์ JavaScript ทุกไฟล์ที่มีโค้ดที่ไม่ได้ใช้มากกว่า 20 kibibyte ดังนี้

ภาพหน้าจอของการตรวจสอบ
คลิกค่าในคอลัมน์ URL เพื่อเปิดซอร์สโค้ดของสคริปต์ในแท็บใหม่

วิธีนำ 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 ที่ไม่ได้ใช้ในหน้าเว็บของคุณ

แหล่งข้อมูล