YouTube Embeds หนักเกินไป และแก้ให้ดีขึ้นได้

• YouTube Embeds มีขนาดประมาณ 1.3MB และไม่แชร์ทรัพยากรระหว่างหลาย embed
• หากใช้เว็บคอมโพเนนต์ <lite-youtube> จะลดลงเหลือประมาณ 100k พร้อมแชร์ทรัพยากรและไม่ต้องแลกกับการสูญเสียฟีเจอร์

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

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

ข้อเสนอเพื่อปรับปรุงประสิทธิภาพ

• เพิ่มแอตทริบิวต์ loading="lazy" เพื่อไม่ให้วิดีโอถูกโหลดทันทีเมื่อยังไม่ปรากฏบนหน้าจอ
• เพิ่ม inline style เพื่อรักษาสัดส่วนดั้งเดิมของวิดีโอและทำให้ปรับขนาดได้อย่างยืดหยุ่น

ปัญหาของ YouTube Embed ในปัจจุบัน

• หน้าเว็บที่มี YouTube Embed เพียงรายการเดียวต้องใช้ 32 requests, ส่งข้อมูล 1.3MB และใช้เวลาโหลด 2.76 วินาที
• ไม่มีการแชร์ทรัพยากรระหว่างหลาย embed ทำให้ปริมาณการส่งข้อมูลเพิ่มขึ้นแบบเส้นตรงตามจำนวน embed

รูปลักษณ์และการทำงาน

• YouTube Embed แสดงภาพ "poster" ของวิดีโอ ชื่อวิดีโอ และปุ่มเล่นขนาดใหญ่
• ฟีเจอร์เหล่านี้สามารถทำได้โดยไม่ต้องใช้ทรัพยากรมาก

ทำไมถึงเป็นแบบนี้?

• มีรายงานว่าเคยทดสอบ embed แบบเบาแล้วพบว่าการมีส่วนร่วมลดลง
• แต่ผลลัพธ์นี้ขัดกับสัญชาตญาณ จึงควรตรวจสอบเชิงลึกเพิ่มเติม
• การใช้ทรัพยากรมหาศาลยังเป็นปัญหาในด้านสิ่งแวดล้อมด้วย

วิธีแก้: จำลองประสบการณ์ embed ด้วยวิธีอื่น

• มีเว็บคอมโพเนนต์ lite-youtube-embed ที่สร้างโดย Paul Irish จาก Google
• คอมโพเนนต์นี้โฟกัสที่ visual performance และเรนเดอร์ได้เร็วขึ้นประมาณ 224 เท่า
• ให้ฟังก์ชันเหมือน embed แบบปกติ แต่เพิ่มความเร็ว ประสิทธิภาพ และความเป็นส่วนตัวพื้นฐาน

วิธีใช้ Lite YouTube Embed

1. เชื่อมต่อ JavaScript สำหรับเริ่มต้นเว็บคอมโพเนนต์
2. ใช้งาน

• ติดตั้งจาก npm หรือคัดลอกมาใส่ในโปรเจ็กต์แล้วใช้งานได้
• ใช้งานโดยลิงก์จาก CDN ได้

ทางเลือกอื่น

• เวอร์ชัน Shadow DOM (ปกป้องสไตล์ แต่ปรับแต่งสไตล์ยาก)
• ทำขึ้นเองโดยตรง
  • Raymond Camden: สร้างเว็บคอมโพเนนต์ YouTube Embed (เวอร์ชัน vanilla และ WebC)
  • Adrian Roselli: เว็บคอมโพเนนต์สำหรับ YouTube และ Vimeo
• Mux: <youtube-video> (สอดคล้องกับ DOM API)
• React port และเวอร์ชันทางการของ Next.js

สรุปโดย GN⁺

• YouTube Embed ใช้ทรัพยากรมากและส่งผลเสียต่อประสิทธิภาพ
• การใช้เว็บคอมโพเนนต์อย่าง lite-youtube-embed สามารถช่วยเพิ่มประสิทธิภาพได้อย่างมาก
• ยังอาจส่งผลเชิงบวกต่อสิ่งแวดล้อมด้วย
• เว็บคอมโพเนนต์อื่นที่ให้ฟังก์ชันคล้ายกันก็น่าลองพิจารณา

[xguru]

lite-youtube-embed - ฝัง YouTube ที่เร็วกว่า

[GN⁺]

ความคิดเห็นบน Hacker News

• ตรวจพบการฝัง YouTube บนแพลตฟอร์มฟอรัมชุมชน และแทนที่ด้วยภาพขนาดย่อแบบพร็อกซีที่ไม่โหลดจนกว่าจะมีการคลิก

  • แค่เพราะมีคนแชร์วิดีโอ YouTube หนึ่งรายการ ไม่ได้แปลว่าผู้ใช้ทุกคนต้องดาวน์โหลด JavaScript ของ YouTube มากกว่า 1MB และให้ Google ติดตาม IP

• ผู้เขียนไม่เชื่อว่าเวอร์ชันแบบเบาจะทำให้การมีส่วนร่วมลดลง

  • แต่ฉันเชื่อเต็มที่
  • ในเดโมบนหน้าโปรเจกต์ lite-youtube-embed ที่มีการแนะนำ เวอร์ชันแบบเบาใช้เวลานานกว่าจะเริ่มเล่นวิดีโอ
  • ยิ่งเวลาโหลดเพิ่มขึ้นเป็นระดับมิลลิวินาที การมีส่วนร่วมก็ยิ่งลดลง

• ไม่น่าแปลกใจที่ผู้เล่นแบบอื่นจะทำให้ผู้ใช้รู้สึกต่างออกไป

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

• นี่เป็นตัวอย่างของความเชื่อที่ผิดว่าผู้พัฒนารู้แน่ชัดว่าผู้ใช้ใช้งานซอฟต์แวร์อย่างไร

  • ต้องการลดการใช้วิดีโอและ Google และลด JavaScript ลงอีกเป็นระดับเมกะไบต์
  • เพื่อเว็บที่ดีกว่า ควรเลิกฝังวิดีโอ YouTube

• จำเป็นต้องบังคับไม่ให้บล็อกเกอร์ใช้การฝัง GitHub Gist

  • ตัวสร้างไซต์แบบสแตติกอย่าง Hugo รองรับโค้ดสไนเป็ตที่มี syntax highlighting
  • ไซต์แบบไดนามิกสามารถใช้ highlight.js ได้

• วิธีหนึ่งในการลดน้ำหนักรวมของการฝังและปรับปรุง UX คือการบล็อกโฆษณา

  • สามารถใช้ Content Security Policies เพื่อบล็อกโฆษณาบนหน้าได้

• สำหรับผู้ใช้ ublock สามารถใช้ click 2 load เป็นโซลูชันฝั่งผู้ใช้ได้

  • แต่อาจใช้ไม่ได้เพราะ Chrome กำลังเปลี่ยนไปใช้ manifest v3

• มีผลการทดสอบว่าการฝังแบบเบาทำให้การมีส่วนร่วมลดลง

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

• วิดีโอที่ฝังไว้อาจเป็นเพียงองค์ประกอบ <video> ที่ชี้ไปยังไฟล์บนเซิร์ฟเวอร์ของ YouTube

  • ผลประโยชน์เชิงพาณิชย์เข้ามาขัดขวาง

• ยิ่งจำนวนการฝังเพิ่มขึ้น น้ำหนักก็ยิ่งเพิ่มแบบเชิงเส้น

  • นโยบายแหล่งที่มาเดียวกันควรทำให้สามารถใช้ทรัพยากรที่แคชไว้ได้

• แชร์โซลูชันของฉันเป็นทางเลือกแทน lite youtube embed

  • ให้จุดสมดุลที่ดีกว่าในแง่ของความสามารถในการปรับแต่งได้เต็มที่