หากสคริปต์ของบุคคลที่สามทำให้การโหลดหน้าเว็บช้าลง คุณมี 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 ได้หากดาวน์โหลดเสร็จขณะที่โปรแกรมแยกวิเคราะห์ยังทำงานอยู่
defer
สคริปต์ที่มีแอตทริบิวต์ defer
จะทำงานหลังจากการแยกวิเคราะห์ HTML เสร็จสิ้น แต่อยู่ก่อนเหตุการณ์ DOMContentLoaded
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 และการแสดงเนื้อหาหลักได้เร็วขึ้นจะช่วยเพิ่มเปอร์เซ็นต์การมองเห็นโฆษณาโดยรวมของโฆษณาได้ ตัวอย่างเช่น 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
คุณจะเชื่อมต่อได้ตั้งแต่เนิ่นๆ และลดค่าใช้จ่ายของเครือข่ายด้วย