โหลด 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 และเมตริกการแสดงผล วิธีนี้จะช่วยให้ผู้ใช้ได้รับเนื้อหาหลักของหน้า เร็วขึ้นและได้รับประสบการณ์ที่ดีขึ้น

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

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

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

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

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

การใช้แอตทริบิวต์ loading สำหรับรูปภาพและ iframe ที่โหลดแบบ Lazy Loading เป็นทางเลือกที่ยอดเยี่ยมสำหรับเทคนิค 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 คุณสามารถสร้างการเชื่อมต่อตั้งแต่เนิ่นๆ และยังช่วย ลดต้นทุนด้านเครือข่าย