Lazy Load für Embedded Youtube Videos

Erst vor kurzen bekam ich eine Nachricht, die da ungefähr lautete:

Hey Benjamin, ich weiß gar nicht wieso unsere Seite so langsam ist. Wir haben da ja fast nix drauf. Magst mal schauen, warum die Seite so langsam lädt?

(PS: Du hast auch eine langsame Seite oder ein anderes Problem? Meld Dich bei mir)

Da bei so etwas mein technisches Herz getriggert wird, hab ich mich der Sache natürlich angenommen. Die Daten waren auf den ersten Blick erschreckend. Leider habe ich zu dem Zeitpunkt vergessen einen markanten Screenshot zu machen, aber die Werte lauteten wie folgt:

Seitengröße: 10,5 MB
Ladezeit: 8.53 Sekunden
Requests: 178
Performance Grade: F

Also warum die Seite langsam ist konnte sehr schnell diagnostiziert werden. Die Seitengröße von sagenhaften 10,5 MB kam durch die verwendeten Bilder und Scripte zustande. Und da ausser Youtube Videos und Bildern nichts weiteres auf der Seite verwendet wurde. War auch relativ schnell klar, wer da auf der Handbremse steht.

Als erstes wurden alle Bilder, die sich nicht im sichtbaren Bereich befinden via Lazy Loading nachgeladen. Allerdings funktionierte das für die eingebundenen Youtube Videos nicht. Bis jetzt. Wie man sich von riesenhaften embedded Youtube Videos lossagen kann, ohne auf den Service zu verzichten erfahrt ihr jetzt hier.

Wozu Lazy Loading bei Youtube Videos?

Videos in seiner Webseite einzubinden ging nie einfacher als heute. Auf Youtube den Code kopieren, auf der Seite einfügen und fertig. Allerdings bindet man sich mit einem eingebundenen Youtube Video einen Ressourcenklotz ans Bein, der die Performance der Webseite maßlos in den Boden reißt. Und sobald man mehr als ein Video einbindet wird es noch schlimmer.

Sobald ein Video eingebunden wurde, wird nicht nur eine einzige Ressource geladen. Eine ganze Abfolge an Ressourcen, darunter JavaScripte, Stylesheets, Bilder und co reihen sich in den Download Queue der Ressourcen ein. Ein Youtube Video lädt dabei bis zu 11 Ressourcen. Auf der analysierten Seite wurden 5 YouTube Videos eingebunden und so wurden sich die Performance Probleme Quasi selbst ins Haus geholt.

Ein Beispiel für den Unterschied ohne und mit Lazy Loading für Youtube Videos

Vor der Optimierung
Nach der Lazy Load Aktivierung

Worin besteht nun also die Idee?

Anstatt die Videos direkt bei Seitenaufruf zu laden, laden wir sie nur, wenn der User darum bittet. Also wenn er auf Play drückt. Durch dieses Vorgehen sparen wir Requests, Megabytes und Nerven der User.

Wie man Lazy Load für Youtube Videos aktiviert

Schritt 1: HTML Struktur

Der erste Schritt besteht darin, zwei <div> Elemente zu verwenden. Dabei dient der erste <div> Container als Wrapper für das eingebundene Video. Der zweite Div Container dient als Play Button für den User.

<!-- Wrapper für das Video -->
<div class="youtubevideo" data-embed="HIER VIDEO CODE EINGEBEN"> 
 
<!-- Play Button für den User -->
<div class="user-play-button"></div> 
 
</div> 

Schritt 2: CSS

Als nächstes werden die Styles hinzugefügt

.youtubevideo {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.youtubevideo img {
width: 100%;
top: -16.84%;
left: 0;
opacity: 0.7;
}
.youtubevideo .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.youtubevideo .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.youtubevideo img,
.youtube .play-button {
cursor: pointer;
}
.youtubevideo img,
.youtubevideo iframe,
.youtubevideo .play-button,
.youtubevideo .play-button:before {
position: absolute;
}
.youtubevideo .play-button,
.youtubevideo .play-button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}
.youtubevideo iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
} 

Schritt 3: JavaScript

Zum Schluss fügt man noch das JavaScript für die Funktionalität hinzu

var youtube = document.querySelectorAll( ".youtubevideo" );
    
    for (var i = 0; i < youtube.length; i++) {
        
        var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
        
        var image = new Image();
                image.src = source;
                image.addEventListener( "load", function() {
                    youtube[ i ].appendChild( image );
                }( i ) );
        
                youtube[i].addEventListener( "click", function() {

                    var iframe = document.createElement( "iframe" );

                            iframe.setAttribute( "frameborder", "0" );
                            iframe.setAttribute( "allowfullscreen", "" );
                            iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );

                            this.innerHTML = "";
                            this.appendChild( iframe );
                } );    
    };

Was passiert in diesem Script?

Zunächst werden die Youtube Videos anhand der Klasse .youtubevideo identifiziert, dies hilft gerade dann, wenn man mehrere Videos implementiert hat.

Als nächstes wird das Youtube Thumbnail Bild geholt. Hier gilt zu beachten, dass es mehrere Versionen des Thumbnails gibt, in diesem Fall ziehe ich das sddefault das mit einer Auflösung von 640x480px geladen wird. Unter anderem gibt es aber noch:

  • Medium Qualität: mqdefault.jpg
  • Hoche Qualität: hqdefault.jpg
  • Maximale Auflösung: maxresdefault.jpg

Ausserdem wird das Bild asynchron geladen um die Seite noch einen ticken schneller laden zu lassen.

Der letzte Part des Scriptes besteht darin, das Video abzurufen, in einem iFrame darzustellen und zu starten, sobald der User auf den Container drückt, in dem das Video eingebettet ist.

Was bringt das alles?

Könnt ihr euch noch an die Daten erinnern, die die Seite am Anfang hatte? Nun diese Werte konnten durch den Einsatz von Lazy Loading für Youtube Videos signifikant gebessert werden. Der Vorteil ist: Die Seite ist online und ich kann einen Screenshot der aktuellen Werte posten:

Lazy loading Ergebnisse nach der Optimierung
Die Werte sprechen für sich. Also finde ich!

Zum schnellen testen verwende ich die Pingdom Tools. Für eine Übersicht absolut empfehlenswert. GTMetrix eignet sich auch. Alternativ bleibt natürlich das Lighthouse Audit von Google.

Lazy Loading Ergebnisse im Lighthouse Audit
Noch einiges zu tun, aber die Performance rockt 😉

Schreibe einen Kommentar