Post navigation

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

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');

ist WordPress-Entwickler und bietet dir WordPress Sicherheit Service und WordPress Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.