โหลด JavaScript ของบุคคลที่สามอย่างมีประสิทธิภาพ

Milica Mihajlija

หากสคริปต์ของบุคคลที่สามทำให้การโหลดหน้าเว็บช้าลง คุณมี 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 จะทำงานในโอกาสแรกหลังจากที่ดาวน์โหลดเสร็จและก่อนเหตุการณ์ load ของหน้าต่าง ซึ่งหมายความว่ามีโอกาส (และเป็นไปได้) ที่สคริปต์ async จะไม่ทำงานตามลำดับที่ปรากฏใน HTML และยังหมายความว่าอาจรบกวนการสร้าง DOM ได้หากดาวน์โหลดเสร็จขณะที่โปรแกรมแยกวิเคราะห์ยังทำงานอยู่

แผนภาพของสคริปต์การบล็อกโปรแกรมแยกวิเคราะห์ที่มีแอตทริบิวต์ไม่พร้อมกัน
สคริปต์ที่มี async ยังคงบล็อกการแยกวิเคราะห์ HTML ได้

defer

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

แผนภาพโฟลว์ของโปรแกรมแยกวิเคราะห์ที่มีสคริปต์ที่มีแอตทริบิวต์ที่เลื่อนเวลาออกไป
สคริปต์ที่มี defer จะรอเรียกใช้จนกว่าเบราว์เซอร์จะแยกวิเคราะห์ HTML เสร็จ
  • ใช้ async หากสคริปต์ต้องทำงานเร็วขึ้นในกระบวนการโหลด
  • ใช้ defer สำหรับทรัพยากรที่สำคัญน้อยกว่า เช่น โปรแกรมเล่นวิดีโอที่อยู่ครึ่งหน้าล่าง

การใช้แอตทริบิวต์เหล่านี้สามารถเร่งการโหลดหน้าเว็บได้อย่างมาก ตัวอย่างเช่น Telegraph เลื่อนสคริปต์ทั้งหมด ซึ่งรวมถึงโฆษณาและการวิเคราะห์ และปรับปรุงเวลาที่ใช้ในการโหลดโฆษณาโดยเฉลี่ย 4 วินาที

สร้างการเชื่อมต่อกับต้นทางที่จำเป็นตั้งแต่เนิ่นๆ

คุณประหยัดเวลาได้ 100–500 มิลลิวินาทีด้วยการสร้างการเชื่อมต่อก่อนเปิดตัวกับต้นทางที่สำคัญของบุคคลที่สาม

<link> มี 2 ประเภท ได้แก่ preconnect และ dns-prefetch ที่ช่วยได้ที่นี่

preconnect

<link rel="preconnect"> บอกเบราว์เซอร์ว่าหน้าเว็บต้องการเชื่อมต่อกับต้นทางอื่น และคุณต้องการเริ่มกระบวนการนี้โดยเร็วที่สุด เมื่อเบราว์เซอร์ขอทรัพยากรจากต้นทางที่เชื่อมต่อล่วงหน้า การดาวน์โหลดจะเริ่มต้นทันที

<link rel="preconnect" href="https://cdn.example.com">

dns-prefetch

<link rel="dns-prefetch> จะจัดการสิ่งที่ <link rel="preconnect"> จัดการเพียงบางส่วน การสร้างการเชื่อมต่อเกี่ยวข้องกับการค้นหา DNS และแฮนด์เชค TCP และการเจรจา TLS สำหรับต้นทางที่ปลอดภัย dns-prefetch บอกเบราว์เซอร์ให้แปลงเฉพาะ DNS ของโดเมนที่ระบุก่อนที่จะมีการเรียกใช้อย่างชัดเจน

คำแนะนำ preconnect เหมาะสำหรับการเชื่อมต่อที่สำคัญที่สุดเท่านั้น สำหรับโดเมนของบุคคลที่สามที่สำคัญน้อยกว่า ให้ใช้ <link rel=dns-prefetch>

<link rel="dns-prefetch" href="http://example.com">

การรองรับเบราว์เซอร์สำหรับ dns-prefetch แตกต่างจากการรองรับ preconnect เล็กน้อย ดังนั้น dns-prefetch จึงเป็นเบราว์เซอร์สำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ preconnect ได้ ใช้แท็กลิงก์แยกต่างหากเพื่อติดตั้งใช้งานอย่างปลอดภัย

<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">

ทรัพยากรของบุคคลที่สามแบบ Lazy Loading

ทรัพยากรของบุคคลที่สามที่ฝังไว้อาจทำให้หน้าเว็บโหลดช้าลงมากหากสร้างขึ้นมาไม่ดี การโหลดแบบ Lazy Loading เป็นวิธีการที่ดีในการปรับปรุงเมตริก Page Speed และ Paint วิธีนี้จะช่วยให้ผู้ใช้ดูเนื้อหาหลักของหน้าได้เร็วขึ้นและได้รับประสบการณ์ที่ดีขึ้น

แผนภาพหน้าเว็บที่แสดงบนอุปกรณ์เคลื่อนที่ซึ่งมีเนื้อหาที่เลื่อนได้ยาวออกไปนอกหน้าจอ เนื้อหาที่อยู่ครึ่งหน้าล่างจะจางลงเนื่องจากยังไม่ได้โหลด
การโหลดแบบ Lazy Loading สำหรับเนื้อหาครึ่งหน้าล่าง

วิธีหนึ่งที่ได้ผลคือการโหลดเนื้อหาของบุคคลที่สามแบบ Lazy Loading หลังจากที่เนื้อหาในหน้าหลักโหลดแล้ว โฆษณาเป็นตัวเลือกที่ดีสำหรับแนวทางนี้

โฆษณาเป็นแหล่งรายได้ที่สำคัญสำหรับหลายๆ เว็บไซต์ แต่ผู้ใช้มักจะเข้ามาดู การโหลดโฆษณาแบบ Lazy Loading และการแสดงเนื้อหาหลักได้เร็วขึ้นจะช่วยเพิ่มเปอร์เซ็นต์การมองเห็นโฆษณาโดยรวมของโฆษณาได้ ตัวอย่างเช่น MediaVine ได้เปลี่ยนไปใช้โฆษณาแบบ Lazy Loading และพบว่าความเร็วในการโหลดหน้าเว็บเพิ่มขึ้น 200% Google Ad Manager มีเอกสารเกี่ยวกับวิธีโหลดโฆษณาแบบ Lazy Loading

คุณยังสามารถตั้งค่าเนื้อหาของบุคคลที่สามให้โหลดเฉพาะเมื่อผู้ใช้เลื่อนไปที่ส่วนนั้นของหน้าเป็นครั้งแรกก็ได้

Intersection Observer เป็น API ของเบราว์เซอร์ที่ตรวจจับได้อย่างมีประสิทธิภาพเมื่อองค์ประกอบเข้าหรือออกจากวิวพอร์ตของเบราว์เซอร์ และคุณจะใช้เทคนิคนี้เพื่อใช้เทคนิคนี้ได้ Lazysize เป็นไลบรารี JavaScript ยอดนิยมสำหรับรูปภาพที่โหลดแบบ Lazy Loading และ iframes ซึ่งรองรับการฝังและ วิดเจ็ตของ YouTube และยังมีตัวเลือกการสนับสนุนสำหรับ Intersection Observer

การใช้แอตทริบิวต์ loading สำหรับรูปภาพที่โหลดแบบ Lazy Loading และ iframe เป็นทางเลือกที่ยอดเยี่ยมแทนการใช้เทคนิค JavaScript และเพิ่งเปิดให้ใช้งานใน Chrome 76

เพิ่มประสิทธิภาพวิธีแสดงสคริปต์ของบุคคลที่สาม

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

การโฮสต์ CDN ของบุคคลที่สาม

ผู้ให้บริการบุคคลที่สามจะต้องระบุ URL สำหรับไฟล์ JavaScript ที่โฮสต์ไว้ ซึ่งโดยปกติจะอยู่ในเครือข่ายนำส่งข้อมูล (CDN) ข้อดีของวิธีนี้คือคุณสามารถเริ่มต้นใช้งานได้อย่างรวดเร็ว เพียงคัดลอกและวาง URL โดยไม่มีค่าใช้จ่ายในการบำรุงรักษา ผู้ให้บริการบุคคลที่สามจะเป็นผู้จัดการการกำหนดค่าเซิร์ฟเวอร์และการอัปเดตสคริปต์

แต่เนื่องจากแหล่งที่มาไม่ได้อยู่บนต้นทางเดียวกันกับทรัพยากรที่เหลือ การโหลดไฟล์จาก CDN สาธารณะจึงมีค่าใช้จ่ายของเครือข่าย เบราว์เซอร์ต้องค้นหา DNS, สร้างการเชื่อมต่อ HTTP ใหม่ และในต้นทางที่ปลอดภัย ดำเนินการแฮนด์เชค SSL กับเซิร์ฟเวอร์ของผู้ให้บริการ

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

สคริปต์ของบุคคลที่สามแบบโฮสต์ด้วยตนเอง

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

  • ลดเวลาในการค้นหา DNS และไป-กลับ
  • ปรับปรุงส่วนหัวการแคช HTTP
  • ใช้ประโยชน์จาก HTTP/2 หรือ HTTP/3 ที่ใหม่กว่า

ตัวอย่างเช่น Casper จัดการลดเวลาที่ใช้ในการโหลดได้ 1.7 วินาที โดยการโฮสต์สคริปต์การทดสอบ A/B ด้วยตนเอง

แต่การโฮสต์ด้วยตนเองมาพร้อมกับข้อเสียสำคัญอย่างหนึ่งคือ สคริปต์อาจล้าสมัยและจะไม่ได้รับการอัปเดตอัตโนมัติเมื่อมีการเปลี่ยนแปลง API หรือการแก้ไขด้านความปลอดภัย

ใช้ Service Worker เพื่อแคชสคริปต์จากเซิร์ฟเวอร์ของบุคคลที่สาม

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

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