YouTube-Embeds sind viel zu schwergewichtig – und das lässt sich beheben

• YouTube-Embeds sind etwa 1,3 MB groß und teilen keine Ressourcen zwischen mehreren Embeds
• Mit der Webkomponente <lite-youtube> lässt sich das auf etwa 100 KB reduzieren; Ressourcen werden geteilt, ohne Funktionalität einzubüßen

YouTube-Video-Embed

• YouTube-Videos lassen sich in Websites einbetten
• Im Share-Menü von YouTube kann die Option < > Embed ausgewählt werden; dann wird HTML-Code mit einem <iframe> bereitgestellt
• <iframe> ist nicht gut für die Performance, eignet sich aber für geschützte Inhalte von Drittanbietern

Vorschläge zur Performance-Verbesserung

• Das Attribut loading="lazy" hinzufügen, damit das Video nicht sofort geladen wird, wenn es noch nicht sichtbar ist
• Inline-Styles hinzufügen, damit das ursprüngliche Seitenverhältnis des Videos erhalten bleibt und es responsiv wird

Probleme des aktuellen YouTube-Embeds

• Eine Seite mit nur einem YouTube-Embed verursacht 32 Requests, 1,3 MB Datenübertragung und 2,76 Sekunden Ladezeit
• Ressourcen werden nicht zwischen mehreren Embeds geteilt, sodass die übertragene Datenmenge mit der Zahl der Embeds linear ansteigt

Aussehen und Funktion

• Das YouTube-Embed bietet das „Poster“-Bild des Videos, den Videotitel und einen großen Play-Button
• Diese Funktionen lassen sich auch ohne hohen Ressourceneinsatz umsetzen

Warum ist das so?

• Leichtgewichtige Embeds wurden getestet, doch es wurde berichtet, dass das Engagement zurückging
• Dieses Ergebnis widerspricht jedoch der Intuition und sollte genauer untersucht werden
• Ein hoher Ressourcenverbrauch ist auch aus Umweltsicht problematisch

Lösung: Das Embed-Erlebnis auf andere Weise nachbilden

• Es gibt die von Google-Mitarbeiter Paul Irish entwickelte Webkomponente lite-youtube-embed
• Diese Komponente konzentriert sich auf visuelle Performance und rendert etwa 224-mal schneller
• Sie bietet die gleiche Funktionalität wie das Standard-Embed und verbessert zugleich Geschwindigkeit, Effizienz und den Datenschutzstandard

Verwendung von Lite YouTube Embed

1. Das JavaScript einbinden, das die Webkomponente initialisiert
2. Verwenden

• Kann über npm installiert oder ins Projekt kopiert werden
• Kann über ein CDN eingebunden werden

Alternativen

• Shadow-DOM-Version (Stilschutz, aber schwerer zu stylen)
• Selbst implementieren
  • Raymond Camden: YouTube-Embed-Webkomponente bauen (Vanilla- und WebC-Version)
  • Adrian Roselli: YouTube- und Vimeo-Webkomponenten
• Mux: <youtube-video> (entspricht der DOM API)
• React-Port und offizielle Next.js-Version

Zusammenfassung von GN⁺

• YouTube-Embeds verbrauchen viele Ressourcen und wirken sich negativ auf die Performance aus
• Mit Webkomponenten wie lite-youtube-embed lässt sich die Performance deutlich verbessern
• Das kann auch positive Auswirkungen auf die Umwelt haben
• Andere Webkomponenten mit ähnlicher Funktionalität sind ebenfalls einen Blick wert

[xguru]

lite-youtube-embed – schnelleres YouTube-Embed

[GN⁺]

Hacker-News-Kommentare

• Erkennt auf Community-Forenplattformen YouTube-Einbettungen und ersetzt sie durch ein Proxy-Thumbnail, das erst beim Klick geladen wird

  • Nur weil eine Person ein YouTube-Video teilt, müssen nicht alle Nutzer mehr als 1 MB YouTube-JavaScript herunterladen und ihre IP von Google verfolgen lassen

• Der Autor glaubt nicht, dass die leichte Version das Engagement verringert

  • Im Gegensatz dazu glaube ich das vollständig
  • In der Demo auf der empfohlenen Projektseite von lite-youtube-embed braucht die leichte Version länger, um das Video abzuspielen
  • Je mehr sich die Ladezeit um Millisekunden erhöht, desto stärker sinkt das Engagement

• Es ist nicht überraschend, dass ein anderer Player von Nutzern anders behandelt wird

  • lite-youtube-embed erlaubt keinen Klick zur eigentlichen YouTube-Seite
  • Das kann wie ein Versuch wirken, den Wechsel zur eigentlichen Quelle des Inhalts zu verhindern
  • Ich spiele eingebettete Videos fast nie ab, aber wenn doch, bevorzuge ich die normale YouTube-Erfahrung
  • Wenn es nach einer zusätzlichen Ebene aussieht, ist die Wahrscheinlichkeit geringer, dass ich klicke

• Das ist ein Beispiel für den Irrglauben von Entwicklern, sie könnten genau wissen, wie Nutzer ihre Software verwenden

  • Man möchte Videos und die Nutzung von Google reduzieren und Megabytes an JavaScript einsparen
  • Für ein besseres Web sollte man aufhören, YouTube-Videos einzubetten

• Blogger sollten dazu gebracht werden, keine GitHub-Gist-Einbettungen zu verwenden

  • Statische Site-Generatoren wie Hugo unterstützen Code-Snippets mit Syntax-Highlighting
  • Dynamische Sites können highlight.js verwenden

• Eine Möglichkeit, das Gesamtgewicht von Einbettungen zu reduzieren und die UX zu verbessern, ist das Blockieren von Werbung

  • Mit Content Security Policies kann man Werbung auf der Seite blockieren

• Als clientseitige Lösung für uBlock-Nutzer kann man click 2 load verwenden

  • Da Chrome auf Manifest V3 umstellt, funktioniert es möglicherweise nicht

• Es gibt Testergebnisse, dass leichte Einbettungen das Engagement verringern

  • Schnelle Ladezeiten sollten das Engagement verbessern, aber wenn das Engagement mit leichten Einbettungen gesunken ist, wurde wahrscheinlich Funktionalität geopfert

• Ein eingebettetes Video könnte ein <video>-Element sein, das auf Dateien auf YouTube-Servern verweist

  • Kommerzielle Interessen standen im Weg

• Je mehr Einbettungen es gibt, desto stärker steigt das Gewicht linear an

  • Die Same-Origin-Policy sollte es ermöglichen, gecachte Ressourcen zu verwenden

• Ich teile meine Lösung als Alternative zu lite-youtube-embed

  • Sie bietet einen besseren Kompromiss im Hinblick auf vollständige Anpassbarkeit