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

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

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

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

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

โค้ดที่ฝังไว้คืออะไร

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

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

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

โดยมักจะใช้โค้ดที่ฝังไว้ในกรณีต่อไปนี้

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

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

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

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

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

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

การตรวจสอบ 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> ใช้ได้ ในเบราว์เซอร์ที่ทันสมัยทั้งหมด

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

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

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

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

ต่อไปนี้คือวิธีต่างๆ ที่คุณใช้โหลด iframe แบบ Lazy Loading สำหรับโค้ดที่ฝังไว้ประเภทต่างๆ ได้

  • วิดีโอ YouTube: หากต้องการโหลด iframe ของโปรแกรมเล่นวิดีโอ YouTube แบบ Lazy Loading ให้ใส่แอตทริบิวต์ loading ลงในโค้ดที่ฝังไว้ซึ่ง YouTube ให้ไว้ การโหลดโค้ดที่ฝังไว้ของ YouTube แบบ Lazy Loading จะช่วยประหยัดข้อมูลได้ประมาณ 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 ต่อไปนี้คือตัวอย่างโค้ดที่มีตัวยึดตำแหน่งสำหรับคีย์ API ของ Google Cloud
<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>

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

โปรดทราบว่า lazysizes ใช้ Intersection Observer API เพื่อตรวจหาเวลาที่องค์ประกอบแสดง

การใช้ data-lazy ใน Facebook

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

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

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

แทนที่โค้ดที่ฝังไว้ด้วยโค้ดจำลอง

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

โค้ดที่ฝังไว้ของแผนที่พร้อมฟีเจอร์ซูมเข้าและซูมออก
Facade แผนที่ที่เป็นรูปภาพ

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

ใช้รูปภาพแบบคงที่เป็นโค้ดจำลอง

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

ตัวเลือก &quot;จับภาพหน้าจอของโหนด&quot; ไฮไลต์ในเมนูตามบริบทในเครื่องมือแก้ไข HTML

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

ใช้รูปภาพแบบไดนามิกเป็นโค้ดจำลอง

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

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

    เครื่องมือ Static Map Maker ช่วยกำหนดค่าพารามิเตอร์ที่จำเป็นสำหรับ 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. เมื่อวางเมาส์เหนือ: โค้ดจำลองจะเชื่อมต่อล่วงหน้ากับผู้ให้บริการโค้ดของบุคคลที่สามที่ฝังไว้
  3. เมื่อคลิก: ระบบจะแทนที่โค้ดจำลองด้วยผลิตภัณฑ์ของบุคคลที่สาม

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

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

  • โค้ดจำลองของ YouTube

    Lite-youtube-embed เป็น Facade ที่แนะนำสำหรับโปรแกรมเล่น 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
    โค้ดที่ฝังไว้ของ lite-YouTube
    การฝัง YouTube จริง
    โค้ดที่ฝังไว้ของ YouTube

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

  • โค้ดจำลองของวิดเจ็ตแชท

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

    วิดเจ็ตแชทของ Postmark ในตัวแก้ไข HTML แสดงโค้ดที่แพ็กเกจ

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

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

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

Layout Shift Terminator มีฟังก์ชันดังนี้

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

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

    Layout Shift Terminator แสดงเอาต์พุตโค้ดและตัวอย่าง

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

บทสรุป

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