หน้านี้ได้รับการแปลโดย Cloud Translation API

แนวทางปฏิบัติที่ดีที่สุดในการใช้การฝังของบุคคลที่สาม

ภาพรวมของเทคนิคในการโหลดการฝังของบุคคลที่สามที่ได้รับความนิยมอย่างมีประสิทธิภาพ

Addy Osmani

Katie Hempenius

Leena Sohoni

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

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

การฝังคืออะไร

เนื้อหาที่ฝังของบุคคลที่สามคือเนื้อหาใดๆ ที่แสดงบนเว็บไซต์ของคุณที่มีลักษณะต่อไปนี้

คุณไม่ได้เขียนขึ้นมา
แสดงจากเซิร์ฟเวอร์ของบุคคลที่สาม

มีการแสดงการฝังนอกหน้าจอหลายรายการ ซึ่งอาจโหลดแบบ Lazy Loading ได้

การฝังมักใช้ในสิ่งต่อไปนี้

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

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

ผลกระทบด้านประสิทธิภาพของการฝังของบุคคลที่สาม

ไฟล์ฝังยอดนิยมจำนวนมากมี JavaScript ขนาดกว่า 100 KB และบางครั้งอาจมีขนาดถึง 2 MB ซึ่งจะใช้เวลาโหลดมากกว่าและจะทำให้เทรดหลักไม่ว่างขณะดำเนินการ เครื่องมือตรวจสอบประสิทธิภาพ เช่น Lighthouse และ Chrome DevTools ช่วยวัดผลกระทบจากการฝังของบุคคลที่สามที่มีต่อประสิทธิภาพ

ลดผลกระทบจากโค้ดของบุคคลที่สาม การตรวจสอบ Lighthouse จะแสดงรายการผู้ให้บริการบุคคลที่สามที่หน้าเว็บใช้ พร้อมขนาดและเวลาการบล็อกเทรดหลัก การตรวจสอบจะพร้อมใช้งานผ่านเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ในแท็บ Lighthouse

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

ลดผลกระทบจากโค้ดของบุคคลที่สาม

กำลังโหลดแนวทางปฏิบัติแนะนำ

การฝังของบุคคลที่สามอาจส่งผลเสียต่อประสิทธิภาพ แต่ก็มีฟังก์ชันการทำงานที่สำคัญเช่นกัน หากต้องการใช้ไฟล์ฝังของบุคคลที่สามอย่างมีประสิทธิภาพและลดผลกระทบด้านประสิทธิภาพ ให้ทำตามหลักเกณฑ์เหล่านี้

การจัดเรียงสคริปต์

ในหน้าเว็บที่ออกแบบมาอย่างดี เนื้อหาสำคัญของบุคคลที่หนึ่งจะเป็นจุดสนใจของหน้าเว็บ ส่วนเนื้อหาที่ฝังของบุคคลที่สามจะอยู่ในแถบด้านข้างหรือปรากฏขึ้นหลังจากเนื้อหาของบุคคลที่หนึ่ง

เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีที่สุด เนื้อหาหลักควรโหลดอย่างรวดเร็วและก่อนเนื้อหาสนับสนุนอื่นๆ ตัวอย่างเช่น ข้อความข่าวในหน้าข่าวควรโหลดก่อนที่จะมีการฝังสำหรับฟีดหรือโฆษณา Twitter

คำขอสำหรับการฝังของบุคคลที่สามอาจเป็นอุปสรรคในการโหลดเนื้อหาของบุคคลที่หนึ่ง ดังนั้นตำแหน่งของแท็กสคริปต์ของบุคคลที่สามจึงมีความสำคัญ สคริปต์อาจส่งผลต่อลำดับการโหลดเนื่องจากการสร้าง DOM จะหยุดชั่วคราวขณะเรียกใช้สคริปต์ วางแท็กสคริปต์ของบุคคลที่สามไว้หลังแท็กบุคคลที่ 1 ที่สําคัญ และใช้แอตทริบิวต์ async หรือ defer เพื่อโหลดแบบไม่พร้อมกัน

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

การโหลดแบบ Lazy Loading

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

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

การโหลดแบบ Lazy Loading ของเบราว์เซอร์สำหรับ `<iframe>`

สำหรับการฝังของบุคคลที่สามที่โหลดผ่านเอลิเมนต์ <iframe> คุณสามารถใช้การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์เพื่อเลื่อนการโหลด iframe นอกหน้าจอออกไปจนกว่าผู้ใช้จะเลื่อนเข้าไปใกล้ แอตทริบิวต์การโหลดสำหรับ <iframe> ใช้ได้ในเบราว์เซอร์สมัยใหม่ทั้งหมด

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

แอตทริบิวต์การโหลดรองรับค่าต่อไปนี้

lazy: บ่งบอกว่าเบราว์เซอร์ควรเลื่อนการโหลด iframe ออกไป เบราว์เซอร์จะโหลด iframe เมื่ออยู่ใกล้กับวิวพอร์ต ใช้ในกรณีที่ iframe เป็นตัวเลือกที่ดีสำหรับการโหลดแบบ Lazy Loading
eager: โหลด iframe ทันที ใช้ในกรณีที่ iframe ไม่ใช่ตัวเลือกที่ดีสำหรับการโหลดแบบ Lazy Loading หากไม่ได้ระบุแอตทริบิวต์ loading ลักษณะการทำงานนี้เป็นค่าเริ่มต้น ยกเว้นในโหมด Lite
auto: เบราว์เซอร์จะกำหนดว่าจะโหลดเฟรมนี้แบบ Lazy Loading หรือไม่

เบราว์เซอร์ที่ไม่รองรับแอตทริบิวต์ loading จะไม่สนใจแอตทริบิวต์ดังกล่าว ดังนั้นคุณจึงใช้การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่องได้ เบราว์เซอร์ที่รองรับแอตทริบิวต์อาจมีการใช้งานเกณฑ์ distance-from-viewport (ระยะทางที่ iframe เริ่มโหลด) แตกต่างกัน

ตัวอย่างวิธีโหลด iframe แบบ Lazy Loading สำหรับการฝังประเภทต่างๆ มีดังนี้

วิดีโอ YouTube: หากต้องการโหลด iframe ของโปรแกรมเล่นวิดีโอ YouTube แบบ Lazy Loading ให้ใส่แอตทริบิวต์ loading ลงในโค้ดสำหรับฝังที่ YouTube มีให้ การโหลดแบบ Lazy Loading ที่ฝังไว้ของ YouTube จะช่วยประหยัดได้ประมาณ 500 KB ในการโหลดหน้าเว็บเริ่มต้น

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   loading="lazy"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
            encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

Google Maps: หากต้องการโหลด iframe ของ Google Maps แบบ Lazy Loading ให้ใส่แอตทริบิวต์ loading ในโค้ดสำหรับการฝัง iframe ที่สร้างขึ้นโดย Google Maps Embed API ต่อไปนี้เป็นตัวอย่างโค้ดที่มีตัวยึดตำแหน่งสำหรับคีย์ Google Cloud API

<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

คลังแบบ Lazysizes

เนื่องจากเบราว์เซอร์ใช้ระยะห่างของการฝังจากวิวพอร์ต นอกเหนือจากสัญญาณต่างๆ อย่างเช่นประเภทการเชื่อมต่อที่มีประสิทธิภาพและโหมด Lite ในการตัดสินใจว่าควรโหลด iframe เมื่อใด การโหลดแบบ Lazy Loading ของเบราว์เซอร์อาจไม่สอดคล้องกัน หากต้องการควบคุมเกณฑ์ระยะทางได้ดียิ่งขึ้นหรือต้องการมอบประสบการณ์การโหลดแบบ Lazy Loading ที่สอดคล้องกันในเบราว์เซอร์ต่างๆ คุณใช้ไลบรารี lazysizes ได้

lazysizes เป็นการโหลดแบบ Lazy Loading ที่รวดเร็วและเหมาะกับ SEO สำหรับทั้งรูปภาพและ iframe เมื่อคุณดาวน์โหลดคอมโพเนนต์แล้ว สามารถใช้คอมโพเนนต์ดังกล่าวกับ iframe สำหรับการฝังใน YouTube ดังนี้

<script src="lazysizes.min.js" async></script>

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

ในทำนองเดียวกัน อาจใช้ Lazysize กับ iframe สำหรับการฝังอื่นๆ ของบุคคลที่สาม

โปรดทราบว่า Lazysizes ใช้ Intersection Observer API ในการตรวจจับเมื่อองค์ประกอบปรากฏให้เห็น

การใช้ Data Lazy ใน Facebook

Facebook มีปลั๊กอินโซเชียลประเภทต่างๆ ที่สามารถฝังได้ ซึ่งรวมถึงโพสต์ ความคิดเห็น วิดีโอ และปุ่มชอบที่ได้รับความนิยมสูงสุด ปลั๊กอินทั้งหมดมีการตั้งค่าสำหรับ data-lazy การตั้งค่าเป็น true ช่วยให้ปลั๊กอินใช้กลไกการโหลดแบบ Lazy Loading ของเบราว์เซอร์โดยการตั้งค่าแอตทริบิวต์ iframe loading="lazy"

ฟีด Instagram ที่โหลดแบบ Lazy Loading

Instagram มีบล็อกของมาร์กอัปและสคริปต์ที่เป็นส่วนหนึ่งของการฝัง สคริปต์จะแทรก <iframe> ลงในหน้าเว็บ การโหลดแบบ Lazy Loading นี้ <iframe> จะช่วยปรับปรุงประสิทธิภาพได้เนื่องจากไฟล์ที่ฝังสามารถมีขนาด gzip ได้เกิน 100 KB ปลั๊กอิน Instagram จำนวนมากสำหรับเว็บไซต์ WordPress เช่น WPZoom และ Elfsight มีตัวเลือกการโหลดแบบ Lazy Loading

แทนที่การฝังด้วย Facade

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

การฝังแผนที่ — แผนที่ฝังพร้อมฟีเจอร์ซูมเข้าและออก

ส่วนหน้าแบบแผนที่ — ส่วนหน้าของแผนที่ที่เป็นรูปภาพ

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

ใช้ภาพนิ่งเป็นส่วนหน้า

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

จับภาพหน้าจอของโหนด

เครื่องมือสำหรับนักพัฒนาเว็บจะจับภาพเป็น png หรือคุณจะลองแปลงเป็นรูปแบบ WebP เพื่อประสิทธิภาพที่ดีขึ้นก็ได้

ใช้รูปภาพแบบไดนามิกเป็นส่วนหน้า

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

Maps Static API: บริการ Maps Static API ของ Google จะสร้างแผนที่ตามพารามิเตอร์ของ URL ที่รวมอยู่ในคำขอ HTTP มาตรฐาน และแสดงแผนที่เป็นรูปภาพที่แสดงบนหน้าเว็บของคุณ URL ดังกล่าวต้องมีคีย์ Google Maps API และต้องวางแท็ก <img> ในหน้าเว็บเป็นแอตทริบิวต์ src

เครื่องมือสร้างแผนที่แบบคงที่ช่วยกำหนดค่าพารามิเตอร์ที่จำเป็นสำหรับ URL และให้โค้ดสำหรับองค์ประกอบภาพในแบบเรียลไทม์

ตัวอย่างต่อไปนี้แสดงโค้ดสำหรับรูปภาพที่มีการตั้งค่าแหล่งที่มาเป็น URL ของ Maps Static API ซึ่งถูกรวมไว้ในแท็กลิงก์เพื่อให้สามารถเข้าถึงแผนที่จริงได้โดยคลิกที่รูปภาพ (หมายเหตุ: แอตทริบิวต์คีย์ API ไม่รวมอยู่ใน URL)
```
<a href="https://www.google.com/maps/place/Albany,+NY/">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
</a>
```
ภาพหน้าจอ Twitter: แนวคิดนี้คล้ายกับภาพหน้าจอแผนที่ ซึ่งจะช่วยให้คุณฝังภาพหน้าจอ Twitter แบบไดนามิกแทนฟีดสดได้ Tweetpik เป็นเครื่องมือหนึ่งที่ใช้จับภาพหน้าจอของทวีตได้ Tweetpik API ยอมรับ URL ของทวีตและส่งคืนรูปภาพพร้อมเนื้อหา นอกจากนี้ API ยังยอมรับพารามิเตอร์เพื่อปรับแต่งพื้นหลัง สี เส้นขอบ และขนาดของรูปภาพด้วย

ใช้คลิกเพื่อโหลดเพื่อปรับปรุง Facade

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

เมื่อมีการโหลดหน้าเว็บ: องค์ประกอบ Facade หรือองค์ประกอบคงที่จะรวมอยู่ในหน้าเว็บ
เมื่อวางเมาส์เหนือ: Facade จะเชื่อมต่อล่วงหน้ากับผู้ให้บริการฝังของบุคคลที่สาม
เมื่อคลิก: ส่วนหน้าอาคารจะถูกแทนที่ด้วยผลิตภัณฑ์ของบุคคลที่สาม

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

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

ส่วนหน้าของ YouTube

Lite-youtube-embed เป็นส่วนหน้าที่แนะนำสำหรับโปรแกรมเล่น YouTube ซึ่งคล้ายกับโปรแกรมเล่นจริงแต่เร็วกว่า 224 เท่า ซึ่งอาจใช้ได้โดยการดาวน์โหลดสคริปต์และสไตล์ชีต จากนั้นใช้แท็ก <lite-youtube> ใน HTML หรือ JavaScript ระบบอาจรวมพารามิเตอร์โปรแกรมเล่นที่กำหนดเองซึ่ง YouTube รองรับผ่านแอตทริบิวต์ params
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
ต่อไปนี้เป็นการเปรียบเทียบระหว่าง lite-youtube-embed กับการฝังจริง

วันที่
การฝัง Lite-YouTube

การฝังใน YouTube

ส่วนหน้าที่คล้ายกันอื่นๆ ที่มีสำหรับ YouTube และโปรแกรมเล่น Vimeo ได้แก่ lite-youtube, lite-vimeo-embed และ lite-vimeo
ส่วนหน้าของวิดเจ็ตแชท

รีแอ็กชันตัวโหลดแชทสดจะโหลดปุ่มที่ดูเหมือนเป็นการฝังแชท แทนที่จะเป็นการฝังตัว ซึ่งสามารถใช้กับแพลตฟอร์มผู้ให้บริการแชทที่หลากหลาย เช่น Intercom, Help Scout, Messenger วิดเจ็ตที่ดูเหมือนของจริงมีน้ำหนักเบากว่าวิดเจ็ตแชทมากและโหลดได้เร็วกว่า ซึ่งอาจแทนที่ด้วยวิดเจ็ตแชทจริงเมื่อผู้ใช้วางเมาส์เหนือปุ่มหรือคลิกปุ่ม หรือหากหน้าเว็บไม่ได้ใช้งานเป็นเวลานาน กรณีศึกษาของ Postmark จะอธิบายถึงวิธีการใช้งาน react-live-chat-loader และการปรับปรุงประสิทธิภาพที่ได้รับ

นำออกหรือแทนที่ส่วนที่ฝังด้วยลิงก์

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

ความเสถียรของเลย์เอาต์

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

เนื่องจากความเสถียรของภาพเป็นสิ่งสำคัญเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่น Cumulative Layout Shift (CLS) จะวัดความถี่ในการเกิดการเปลี่ยนแปลงและการเปลี่ยนแปลงเหล่านี้

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

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

การฝังที่ได้รับความนิยม เช่น YouTube, Google Maps และ Facebook จะมีโค้ดสำหรับฝังพร้อมแอตทริบิวต์ขนาดที่ระบุไว้ แต่อาจมีผู้ให้บริการที่ไม่รวมข้อมูลนี้ ตัวอย่างเช่น ข้อมูลโค้ดนี้ไม่ได้ระบุมิติของการฝังที่ได้

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

ข้อมูลนี้สามารถใช้ในการกำหนดขนาดขององค์ประกอบที่มีอยู่เพื่อให้มั่นใจว่าคอนเทนเนอร์จะไม่ขยายเมื่อโหลดฟีดและไม่มีการเปลี่ยนเลย์เอาต์ ข้อมูลโค้ดต่อไปนี้อาจใช้เพื่อแก้ไขขนาดของไฟล์ที่ฝังอยู่ก่อนหน้านี้

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

จุดสิ้นสุดการเปลี่ยนเลย์เอาต์

เนื่องจากการฝังของบุคคลที่สามมักไม่ใส่ขนาด (ความกว้าง ความสูง) สำหรับเนื้อหาสุดท้ายที่แสดงผล จึงอาจส่งผลให้เกิดการเปลี่ยนเลย์เอาต์บนหน้าเว็บอย่างมาก ปัญหานี้อาจแก้ไขได้ยากโดยไม่ต้องตรวจสอบขนาดสุดท้ายด้วยตนเองโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บในวิวพอร์ตขนาดต่างๆ

และตอนนี้เรามีเครื่องมืออัตโนมัติที่เรียกว่า Layout Shift Terminator ที่ช่วยลดการเปลี่ยนเลย์เอาต์จากการฝังยอดนิยม เช่น Twitter, Facebook และผู้ให้บริการอื่นๆ

จุดสิ้นสุดการเปลี่ยนเลย์เอาต์:

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

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

บทสรุป

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