WordPress Snippets

Videos defer laden für mehr Performance

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

Andreas Hecht

Andreas hat 2010 die SEO Agentur Hamburg gegründet und bringt kleine und mittlere Unternehmen mit laufender SEO Betreuung in die Top-10 Platzierungen bei Google. Er ist zudem Experte in WordPress Entwicklung und Performance.

Das könnte auch interessant sein...

Seobility SEO Tool

Schreibe einen Kommentar

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

Teilen
Teilen
Teilen