ภาพรวมของเทคนิคในการโหลดวิดีโอแบบฝังยอดนิยมของบุคคลที่สามอย่างมีประสิทธิภาพ
เว็บไซต์จำนวนมากใช้การฝังของบุคคลที่สามเพื่อสร้างประสบการณ์ที่น่าสนใจสำหรับผู้ใช้โดยมอบสิทธิ์บางส่วนของหน้าเว็บให้แก่ผู้ให้บริการเนื้อหารายอื่น ตัวอย่างที่พบบ่อยที่สุดของการฝังเนื้อหาของบุคคลที่สามคือโปรแกรมเล่นวิดีโอ ฟีดโซเชียลมีเดีย แผนที่ และโฆษณา
เนื้อหาของบุคคลที่สามสามารถส่งผลกระทบต่อประสิทธิภาพของหน้าเว็บได้หลายวิธี ซึ่งอาจบล็อกการแสดงผล แข่งขันกับทรัพยากรที่สำคัญอื่นๆ สำหรับเครือข่ายและแบนด์วิดท์ หรือส่งผลต่อเมตริก Core Web Vitals การฝังของบุคคลที่สามยังอาจทำให้เกิดการเปลี่ยนเลย์เอาต์เมื่อโหลดด้วยเช่นกัน บทความนี้จะกล่าวถึงแนวทางปฏิบัติแนะนำด้านประสิทธิภาพที่คุณสามารถใช้เมื่อโหลดไฟล์ที่ฝังของบุคคลที่สาม เทคนิคการโหลดที่มีประสิทธิภาพ และเครื่องมือ Layout Shift Terminator ที่ช่วยลดการเปลี่ยนแปลงของเลย์เอาต์สำหรับการฝังวิดีโอยอดนิยม
การฝังคืออะไร
เนื้อหาที่ฝังของบุคคลที่สามคือเนื้อหาที่แสดงในเว็บไซต์ของคุณซึ่ง * คุณไม่ได้เป็นผู้เขียน * แสดงจากเซิร์ฟเวอร์ของบุคคลที่สาม
การฝังมักจะใช้ในสถานการณ์ต่อไปนี้ * เว็บไซต์ที่เกี่ยวกับกีฬา ข่าวสาร บันเทิง และแฟชั่นใช้วิดีโอเพื่อเสริมเนื้อหาที่เป็นข้อความ * องค์กรที่มีบัญชี 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 Loadingeager
: โหลด iframe ทันที ใช้ในกรณีที่ iframe ไม่ใช่ตัวเลือกที่ดีสำหรับการโหลดแบบ Lazy Loading หากไม่ได้ระบุแอตทริบิวต์loading
นี่จะเป็นลักษณะการทำงานเริ่มต้น ยกเว้นในโหมด Liteauto
: เบราว์เซอร์จะกำหนดว่าจะโหลดเฟรมนี้แบบ 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 ในตำแหน่งนั้น
![แผนที่ฝังอยู่](https://web.developers.google.cn/static/articles/embed-best-practices/image/a-map-embed-f6423736a2e72.png?authuser=5&hl=th)
![ส่วนหน้าแผนที่](https://web.developers.google.cn/static/articles/embed-best-practices/image/a-map-facade-afc7913398c88.png?authuser=5&hl=th)
ส่วนหน้าคือองค์ประกอบแบบคงที่ซึ่งดูคล้ายกับบุคคลที่สามที่ฝังไว้ แต่กลับใช้งานไม่ได้ ดังนั้นจึงช่วยลดภาษีในการโหลดหน้าเว็บลงมาก ต่อไปนี้คือกลยุทธ์บางอย่างเพื่อให้โหลดการฝังดังกล่าวได้อย่างมีประสิทธิภาพที่สุดและยังคงให้คุณค่าแก่ผู้ใช้ได้
ใช้ภาพนิ่งเป็นส่วนหน้า
สามารถใช้ภาพนิ่งแทนการฝังแผนที่ โดยที่คุณอาจไม่จำเป็นต้องทำให้แผนที่เป็นแบบอินเทอร์แอกทีฟ คุณสามารถซูมเข้าไปในพื้นที่ที่สนใจบนแผนที่ จับภาพ และใช้พื้นที่นี้แทนการฝังแผนที่แบบอินเทอร์แอกทีฟ นอกจากนี้ คุณยังใช้ฟังก์ชันจับภาพหน้าจอของโหนดสำหรับเครื่องมือสำหรับนักพัฒนาเว็บเพื่อจับภาพหน้าจอขององค์ประกอบ 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 ได้ทุกเมื่อ เครื่องมือจะอยู่ในสถานะเบต้าและมีเป้าหมายที่จะปรับปรุงให้ดีขึ้นเมื่อเวลาผ่านไปโดยมีการปรับแต่งเพิ่มเติม
บทสรุป
การฝังของบุคคลที่สามอาจให้คุณค่าแก่ผู้ใช้ได้มาก แต่เมื่อจำนวนและขนาดของการฝังในหน้าเว็บเพิ่มขึ้น ประสิทธิภาพก็อาจลดลงได้ ด้วยเหตุนี้คุณจึงต้องวัดผล ตัดสิน และใช้กลยุทธ์การโหลดที่เหมาะสมสำหรับวิดีโอที่ฝังโดยอิงตามอันดับ ความเกี่ยวข้อง และความต้องการของผู้ที่มีโอกาสเป็นผู้ใช้