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

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

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

Addy Osmani

Katie Hempenius

Leena Sohoni

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

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

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

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

ระบบแสดงการฝังนอกหน้าจอหลายรายการ ซึ่งอาจเป็นการโหลดแบบ Lazy Loading

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

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

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

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

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

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

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

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

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

ลำดับสคริปต์

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

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

คำขอสำหรับการฝังของบุคคลที่สามอาจขัดขวางการโหลดเนื้อหาของบุคคลที่หนึ่ง ดังนั้นตำแหน่งของแท็กสคริปต์ของบุคคลที่สามจึงมีความสำคัญ สคริปต์อาจส่งผลต่อลำดับการโหลดเนื่องจากการสร้าง DOM จะหยุดชั่วคราวขณะเรียกใช้สคริปต์ วางแท็กสคริปต์ของบุคคลที่สามไว้หลังแท็กบุคคลที่หนึ่งที่สำคัญ และใช้แอตทริบิวต์ 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> พร้อมใช้งานใน Chrome 77 ขึ้นไป และยังได้แนะนำให้เบราว์เซอร์อื่นๆ ที่ใช้ Chromium ด้วย

<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 ฝัง 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 ที่สอดคล้องกันในเบราว์เซอร์ต่างๆ คุณอาจใช้ไลบรารีขนาด Lazysize ได้

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 สำหรับการฝังของบุคคลที่สามอื่นๆ ได้

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

การใช้ข้อมูลแบบ Lazy Loading ใน Facebook

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

ฟีด Instagram แบบ Lazy Loading

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

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

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

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

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

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

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

เครื่องมือสำหรับนักพัฒนาเว็บจะจับภาพเป็น png แต่คุณก็พิจารณาแปลงเป็น WebP format for better performance ได้เช่นกัน

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

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

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

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

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

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

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

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

ส่วนหน้าของ 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 และการฝังจริง

การฝังใน YouTube แบบ Lite

การฝังวิดีโอ YouTube

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

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

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

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

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

บทสรุป

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