หากสคริปต์ของบุคคลที่สามทำให้ การโหลดหน้าเว็บคุณมีตัวเลือก 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 ได้ถ้า
ดาวน์โหลดให้เสร็จขณะที่โปรแกรมแยกวิเคราะห์ยังทำงานอยู่
![แผนภาพของสคริปต์การบล็อกโปรแกรมแยกวิเคราะห์ที่มีแอตทริบิวต์อะซิงโครนัส](https://web.dev/static/articles/efficiently-load-third-party-javascript/image/diagram-parser-blocking-020263bc7658c.png?authuser=19&hl=th)
async
ยังคงสามารถบล็อก
การแยกวิเคราะห์ HTMLdefer
สคริปต์ที่มีแอตทริบิวต์ defer
จะทำงานหลังจากการแยกวิเคราะห์ HTML เสร็จสมบูรณ์
แต่ก่อน
DOMContentLoaded
กิจกรรม defer
ดูแลให้สคริปต์ทำงานตามลำดับที่ปรากฏใน HTML และ
อย่าบล็อกโปรแกรมแยกวิเคราะห์
![แผนภาพแสดงโฟลว์ของโปรแกรมแยกวิเคราะห์ที่มีสคริปต์ซึ่งมีแอตทริบิวต์ที่เลื่อนเวลาออกไป](https://web.dev/static/articles/efficiently-load-third-party-javascript/image/diagram-parser-flow-a-s-f9a9ef751f974.png?authuser=19&hl=th)
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 และเมตริกการแสดงผล วิธีนี้จะช่วยให้ผู้ใช้ได้รับเนื้อหาหลักของหน้า เร็วขึ้นและได้รับประสบการณ์ที่ดีขึ้น
![แผนภาพของหน้าเว็บที่แสดงบนอุปกรณ์เคลื่อนที่ซึ่งมีเนื้อหาที่เลื่อนได้ซึ่งขยายออกไปนอกหน้าจอ เนื้อหาครึ่งหน้าล่างจะอิ่มตัวเนื่องจากยังไม่ได้โหลด](https://web.dev/static/articles/efficiently-load-third-party-javascript/image/a-diagram-a-webpage-show-0c848a2212482.png?authuser=19&hl=th)
แนวทางหนึ่งที่มีประสิทธิภาพคือการโหลดเนื้อหาของบุคคลที่สามแบบ 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
คุณสามารถสร้างการเชื่อมต่อตั้งแต่เนิ่นๆ และยังช่วย
ลดต้นทุนด้านเครือข่าย