Lazy Load für Videos (ohne Plugin)

Videos nachladen (ohne Plugin)

Wer gerne viele Videos in seine Artikel einbindet (und wer macht das heutzutage nicht?), der steht schnell vor dem Problem mit den Ladezeiten. Auch Google mag keine Inhalte, die den restlichen Content blockieren, wie das bei Bildern und Videos eben oft der Fall ist. Kurz gesagt: Inhalte einer Website werden nacheinander heruntergeladen und beim Besucher angezeigt, Videos und Bilder blockieren diesen Ablauf. Dauert es bei einem Inhaltstyp also länger, stoppt dieser alle anderen Vorgänge bzw. hält sie auf, die Darstellung braucht Zeit, Elemente fehlen oder werden falsch dargestellt. Um das zu verhindern können Bilder und Videos nachgeladen werden.

Im Grunde eine Art Lazy Load, wobei hier nicht das klassische Laden im sichtbaren Bereich gemeint ist. Bei Lazy Load für Videos (ohne Plugin) werden Videos erst dann abgerufen, wenn die Website vollständig geladen wurde. Bis der Blog also nicht korrekt dargestellt ist, werden auch Videos nicht geladen. Das hat den Vorteil, dass selbige den Ladevorgang nicht mehr blockieren. Wie das mit Bildern geht, hatte ich euch in einem separaten Artikel bereits gezeigt. Heute sind die Videos an der Reihe und das System ist im Grunde dasselbe, nur dass es diesmal um iframes geht, nicht mehr um einfache img-Tags.

Lazy Load für Videos ganz simpel

Genau wie beim Nachladen der Bilder, wird auch hier mit dem Data-Src-Attribut gearbeitet. Im Klartext bedeutet dies, dass der korrekte Link im Data-Src-Attribut ausgegeben wird, während das Src-Attribut, welches vom Browser standardmäßig genutzt wird, erst einmal mit einem leeren Platzhalter ersetzt wird. Hier kommt die kleinste und reinste Form von Base64 zum Einsatz, das Bild bzw. der Platzhalter ist also extrem winzig und kann schnell geladen, weshalb es nicht zur Blockierung der Inhalte kommt, wie das oft bei den normalen Grafiken der Fall ist. Wurde die Website korrekt geladen, aktiviert sich das Script und ruft die korrekte Verlinkung ab.

Das Src-Attribut wird also automatisch ausgetauscht und der Platzhalter wird mit dem korrekten Video ersetzt. Sehr minimalistisch aber äußerst wirkungsvoll, weil dabei kein Framework wie jQuery zum Einsatz kommt. Nur Javascript und ein kleiner Eintrag in der functions.php von Wordpress. Lazy Load für Videos ganz simpel und effizient.

Folgendes in die functions.php eures Themes einfügen:

function add_video_load( $content ) { if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) ) return $content; if ( false !== strpos( $content, 'data-src' ) ) return $content; $placeholder_image = ('data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='); $content = preg_replace( '#<iframe([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf( '<iframe${1}src="%s" data-src="${2}"${3}>', $placeholder_image ), $content ); return $content; } add_filter( 'the_content', 'add_video_load' );

Am Ende der Seite, vor dem schließenden </body> einfügen:

<script>function init(){var videoDefer=document.getElementsByTagName('iframe');for(var i=0;i<videoDefer.length;i++){if(videoDefer[i].getAttribute('data-src')){videoDefer[i].setAttribute('src',videoDefer[i].getAttribute('data-src'));}}}window.onload=init;</script>

Mehr Performance durch Lazy Load

Natürlich macht Lazy Load für Videos (ohne Plugin) nur dann Sinn, wenn ihr wirklich viele Videos einbindet. Wenn sich in jedem Post ein Video befindet, dann sorgt dies nämlich durchaus für spürbare Verzögerungen. Denkt nur daran was hier alles geladen werden muss. Gerade Youtube lädt weit mehr als “nur” das Video. Da kommen Tracker und Analyse-Tools hinzu, sowieso verschiedene andere Verbindungen und Anfragen, die erst einmal aufgeschlüsselt werden wollen.

Das alles braucht Zeit, doch was aber viel schlimmer ist – es blockiert den restlichen Inhalt. Da Videos allgemein aber eher unwichtig sind und nicht als erstes geladen werden müssen, können sie so nach hinten geschoben werden und sind dann erst später an der Reihe. Das macht Sinn und bringt Performance, je nachdem wie intensiv ihr Videos in euren Beiträgen nutzt. Ein Versuch ist es ganz sicher wert.

Wie das Ganze mit Bildern geht, erkläre ich in diesem Artikel.