Lazy Load for Videos - Videos erst bei Bedarf laden

- Plugin -

Mit dem Plugin Lazy Load for Videos lädst du eingebettete Videos von YouTube oder Vimeo erst dann, wenn der User sich das Video wirklich anschauen möchte.

Jetzt lesen

Wenn du in deinen Beiträgen viele Videos einbindest, wirst du vielleicht festgestellt haben, dass das Laden der Videos die Performance der Seite durchaus beeinträchtigen kann. Doch wie stark fallen Videos von z.B. YouTube wirklich ins Gewicht?

Vergleich mit und ohne Lazy Load for Videos

Werfen wir einen kurzen Blick auf ein anderes Projekt von uns, nämlich hiphop-releases.de – konkret auf den Artikel zum Kollegah Album „King“. Wir binden auf der Webseite bei jedem Album sowohl die Videoauskopplungen als auch das Snippet (sofern vorhanden) im entsprechenden Artikel ein. Dadurch kann es durchaus vorkommen, dass sich 9 bis 10 YouTube-Einbettungen in einem einzigen Artikel befinden.

Nachfolgend einmal der Vergleich aus den Chrome DevTools mit und ohne aktiviertem Lazy Load for Videos Plugin.

Ladezeit ohne aktiviertem Lazy Load Plugin

Ladezeit mit aktiviertem Lazy Load Plugin

Einzig das Plugin Lazy Load for Videos wurde auf dem ersten Bild deaktiviert, sonst wurden keinerlei Veränderungen durchgeführt. Das Ergebnis ist erstaunlich.

Ohne Lazy Load ergeben sich:

  • 47 zusätzliche Aufrufe
  • über 800KB zusätzliche Seitengröße
  • 0,6s mehr bis zum Laden des DOMs
  • über 8s (!) mehr Ladezeit, bis die Seite vollständig geladen ist

Sicherlich ließe sich die Seite generell noch etwas beschleunigen, doch allein durch die Aktivierung dieses einzigen Plugins konnten wir so knapp 1MB an Größe einsparen und eine Auslieferungszeit von 2 – 3 Sekunden verwirklichen. Unsere mobilen User werden es uns danken.

Download: Lazy Load for Videos

Thumbnails statt Videoplayer

Lazy Load for Video verhindert das Laden des gesamten Players und zeigt stattdessen ein Thumbnail samt Play-Button an. Erst wenn der User das Bild anklickt und sich aktiv das Video ansehen möchte, wird der Player nachgeladen. Somit werden Besuchern, die sich nur den Text durchlesen oder die Tracklist anschauen möchten, nicht alle Videos aufgezwungen. Eine Demo findest du auf der Entwicklerseite von Kevin Weber.

Lazy Load for Videos Beispiel

Das Plugin funktioniert dabei mit Videos von YouTube und Vimeo und Bedarf keiner großen Konfiguration. Es erkennt die Videolinks in deinem Content und vollbringt automatisch sein Hexenwerk.

Wer dennoch kleine Einstellungen vornehmen möchte, kann einige Dinge anpassen. So zum Beispiel das Design des Play-Buttons, die Qualität der Thumbnails und einige anbieterabhängige Einstellungen wie z.B. die Controlfarbe des Vimeo-Players oder die Unterdrückung von Related Videos bei YouTube.

Untenstehend findest du Screenshots von den Einstellungsmöglichkeiten.

Fazit: Ein Muss für Seiten mit vielen Videos

Lazy Load for Videos sollte zu den Standardplugins bei Webseiten mit vielen Videoeinbettungen gehören. Es funktioniert problemlos, bringt einen großen Geschwindigkeitsboost und die generierten Thumbnails machen auch optisch eine gute Figur.

Von unserer Seite aus also eine klare Empfehlung!

Autor: Denis Brediceanu
Autor: Denis Brediceanu
Online Marketing Berater, WordPress Webentwickler und Gründer von WPcorner.de aus Leidenschaft. Ich helfe gerne Menschen, im Internet mit ihrer Idee Fuß zu fassen. Die Technik sollte niemandem im Weg stehen, seine Träume zu verwirklichen!