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

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

Addy Osmani
Addy Osmani
X GitHub
Katie Hempenius
Katie Hempenius
X
Leena Sohoni
Leena Sohoni
X

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

เนื้อหาของบุคคลที่สามอาจส่งผลต่อประสิทธิภาพของหน้าเว็บได้หลายวิธี อาจเป็นรายการที่บล็อกการแสดงผล แย่งทรัพยากรสําคัญอื่นๆ สําหรับเครือข่ายและแบนด์วิดท์ หรือส่งผลต่อเมตริก 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> คุณสามารถใช้การโหลดแบบเลื่อนดูเมื่อพร้อมระดับเบราว์เซอร์เพื่อเลื่อนการโหลด 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 จะละเว้นแอตทริบิวต์ดังกล่าว คุณจึงใช้การโหลดแบบเลื่อนเวลาระดับเบราว์เซอร์เป็นการเพิ่มประสิทธิภาพแบบเป็นขั้นเป็นตอนได้ เบราว์เซอร์ที่รองรับแอตทริบิวต์นี้อาจใช้เกณฑ์ 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 จะช่วยให้มั่นใจได้ว่าปลั๊กอินจะใช้กลไกการโหลดแบบเลื่อนเวลาของเบราว์เซอร์โดยการตั้งค่าแอตทริบิวต์ iframe loading="lazy"

การโหลดฟีด Instagram แบบ Lazy Loading

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

แทนที่การฝังด้วย 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 ยังยอมรับพารามิเตอร์เพื่อปรับแต่งพื้นหลัง สี เส้นขอบ และขนาดของรูปภาพด้วย

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

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

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

ฟาซาดอาจใช้ร่วมกับการฝังของบุคคลที่สามสำหรับวิดีโอเพลเยอร์ วิดเจ็ตแชท บริการตรวจสอบสิทธิ์ และวิดเจ็ตโซเชียลมีเดีย การฝังวิดีโอ 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
    การฝัง Lite-YouTube
    การฝัง YouTube ที่เกิดขึ้นจริง
    การฝังใน YouTube

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

  • ส่วนหน้าของวิดเจ็ตแชท

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

    วิดเจ็ตแชทของ 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 ของ min-height รอบมาร์กอัปการฝังโดยใช้ Media Query (และ Container Query) จนกว่าการฝังจะเริ่มต้น (หลังจากนั้นระบบจะนำสไตล์ min-height ออก)

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

    เทอร์มินัลที่มีการเปลี่ยนอุปกรณ์

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

บทสรุป

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