WordPress Snippets

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

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

Er entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen 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.

Das könnte auch interessant sein...

Das Perfmatters WordPress Performance Plugin macht dein WordPress raketenschnell

Auch Laien machen Ihre Website damit raketenschnell! Lies den Artikel dazu...

Schreibe einen Kommentar

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

Do NOT follow this link or you will be banned from the site!
Teilen
Teilen