Post navigation

Für mehr Performance: Lasse Videos zuletzt (defer) laden

WordPress Snippets · · Keine Kommentare · Andreas Hecht

Ohne Videos kommt heute kein Blog mehr aus. Das Problem mit ihnen ist, dass das Laden der Website unterbrochen wird, bis die Videos vollständig geladen sind. Das kann unter Umständen dauern und verlangsamt den Seitenaufbau unnötig.

Daher wäre es schön, wenn Du alle Videos defer – also zuletzt – laden lassen könntest. Hier ist der Code dafür:

Videos zuletzt (defer) laden lassen

  • WordPress Version: inkl. 4.5.3
  • PHP-Version: inkl. PHP 7

Der folgende Code muss in die functions.php Deines Themes:

<?php

//Defer loading Videos
function tb_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}><noscript><iframe${1}src="${2}"${3}></noscript>', $placeholder_image ), $content ); return $content; } 

add_filter( 'the_content', 'tb_add_video_load' );

/**
 * Defer Loading for Videos - the JavaScript for the Action
 * @param  [[Type]] $content [[Description]]
 * @return [[Type]] [[Description]]
 */  
function tb_defer_video_load() {
    if ( is_single() ) {
?>
<!-- Defer Videos for Performance -->          
<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>
<!-- END Defer Videos -->
<?php  
    }
}
add_action( 'wp_footer', 'tb_defer_video_load');

Abonniere meinen Newsletter

Melde Dich für meinen Newsletter "WordPress & Bloggen" an und verpasse keinen Artikel. Als Dankeschön bekommst Du Gratis meine nützliche Checkliste:
»12 Dinge, die Du vor einem Theme-Wechsel beachten solltest«.

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er ist ebenfalls Autor von drei richtig guten WordPress E-Books.