หากสคริปต์ของบุคคลที่สามทําให้การโหลดหน้าเว็บช้าลง คุณจะมี 2 ตัวเลือกในการปรับปรุงประสิทธิภาพ ดังนี้
- นําออกหากไม่ได้เพิ่มคุณค่าที่ชัดเจนให้กับเว็บไซต์
- เพิ่มประสิทธิภาพกระบวนการโหลด
โพสต์นี้จะอธิบายวิธีเพิ่มประสิทธิภาพขั้นตอนการโหลดสคริปต์ของบุคคลที่สามด้วยเทคนิคต่อไปนี้
- การใช้แอตทริบิวต์
asyncหรือdeferในแท็ก<script> - การสร้างการเชื่อมต่อล่วงหน้ากับต้นทางที่จำเป็น
- การโหลดแบบ Lazy Loading
- การเพิ่มประสิทธิภาพวิธีแสดงสคริปต์ของบุคคลที่สาม
ใช้ async หรือ defer
เนื่องจากสคริปต์แบบซิงค์จะทำให้เกิดการสร้างและการแสดงผล DOM ล่าช้า คุณจึงควรโหลดสคริปต์ของบุคคลที่สามแบบไม่ซิงค์เสมอ เว้นแต่ว่าสคริปต์จะต้องทำงานก่อนหน้าเว็บจะแสดงผลได้
แอตทริบิวต์ async และ defer บอกให้เบราว์เซอร์แยกวิเคราะห์ HTML ต่อไปขณะโหลดสคริปต์ในเบื้องหลัง จากนั้นเรียกใช้สคริปต์หลังจากโหลด วิธีนี้จะทำให้การดาวน์โหลดสคริปต์ไม่บล็อกการสร้าง DOM หรือการเรนเดอร์หน้าเว็บ ซึ่งช่วยให้ผู้ใช้เห็นหน้าเว็บก่อนที่สคริปต์ทั้งหมดจะโหลดเสร็จ
<script async src="script.js">
<script defer src="script.js">
ความแตกต่างระหว่างแอตทริบิวต์ async กับ defer คือเวลาที่เบราว์เซอร์เรียกใช้สคริปต์
async
สคริปต์ที่มีแอตทริบิวต์ async จะทํางานเมื่อมีโอกาสครั้งแรกหลังจากที่ดาวน์โหลดเสร็จแล้วและก่อนเหตุการณ์โหลดของหน้าต่าง ซึ่งหมายความว่าสคริปต์ async อาจไม่ทํางานตามลําดับที่ปรากฏใน HTML ซึ่งหมายความว่าไฟล์เหล่านี้อาจขัดจังหวะการสร้าง DOM ได้หากดาวน์โหลดเสร็จแล้วขณะที่โปรแกรมแยกวิเคราะห์ยังทํางานอยู่