Wenn du gerne ein Video (und vor allem mehrere!) in deinen WordPress Blog oder Webseite einbinden möchtest, gibt es verschiedene Varianten. Hier zeige ich dir eine, die dir hilft jede Menge pagespeed zu sparen. Normalerweise brauchen Videos, die z.B. von YouTube auf der Website eingebunden werden, viel Ladezeit, denn deine Seite lädt quasi jedes Video beim Aufbau der Seite schon hoch, obwohl noch niemand auf „play“ gedrückt hat.

Dies kostet dich wertvollen pagespeed (die Geschwindigkeit, mit der deine Website/dein Blog lädt). Den aktuellen pagespeed deiner Webseite kannst du z.B. bei google pagespeed testen.

Ein Wert ab 70/100 Punkten ist schon nicht schlecht. Je schneller deine Seite lädt, desto besser. Das ist gut für dein Ranking und du verlierst weniger Besucher, die vorschnell wegklicken, weil sie genervt sind, lange auf den Aufbau der Seite zu warten.

Der pagespeed meiner Seite lag vor ein paar Wochen noch einiges darunter, jetzt aktuell bei 92/100 in der Desktop-Version. Damit bin ich ganz zufrieden.

Website Pagespeed

Um die Ladezeit zu verbessern, habe ich vor allem mit diesen drei Dingen den meisten Erfolg gehabt:

  1. Bilder komprimiert
  2. unnütze Plugins entfernt
  3. Videos auf die folgende Weise eingebunden

So bindest du normalerweise Videos von YouTube in deinen Blog ein (lange Ladezeit)

Üblicherweise gehst du bei YouTube auf „teilen“ und „einbetten“, kopierst dann den Code (<iframe…) und fügst diesen an die gewünschte Stelle deiner Webseite ein.

video einbinden youtube

Video einbinden Youtube

Kann man machen, aber je mehr Videos du einbindest, desto langsamer lädt deine Website.

Eine tolle Variante, die kaum pagespeed kostet, ist diese hier:

 

Video einbinden in eine Seite oder Blogpost mit einem Codeschnipsel

  1. Dazu brauchst du zuerst den Code des Videos:

Den Code deines Videos findest du sowohl in der URL von YouTube:

youtube.com/watch?v=G5yAbV_8IZQ

als auch im iframe-Einbett-Code:

Code Video einbinden

Code Video einbinden

Es ist diese Abfolge von Buchstaben, Zahlen und Zeichen die oben pink markiert ist.

Weiterhin kannst du bei style=“width“ (Breite) und „height“ (Höhe) des angezeigten Videos festlegen. In der Sidebar müssen die Werte kleiner sein, als wenn du das Video auf einer Seite oder in einem Blogpost einbindest. Probier gern ein bisschen rum.

Logischerweise muss der „width-Wert“ höher sein als der „height-Wert“ (schließlich soll das Video waagerecht angezeigt werden).

2. Jetzt den Codeschnipsel, den du im Text-Editor!!! an die gewünschte Stelle einfügst:

<iframe width=“560″ height=“315″ src=““ data-src=“//www.youtube.com/embed/OMOVFvcNfvE“ frameborder=“0″ allowfullscreen></iframe>

Den Code für dein Video musst du entsprechend ändern und die Breite und Höhe festlegen.

3. Zuletzt braucht es ein wenig Javascript, dass in die header.php eingefügt wird.

Wenn dir das Einfügen Kopfschmerzen macht, kannst du das Plugin „Header und Footer“ nutzen.

Javascript:

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

Dann noch speichern und fertig! Das Video wird folgendermaßen angezeigt:

youtube video einbinden wordpressSieht doch ganz gut aus, oder?

Nun lädt das Video erst, sobald jemand auf den „Play-Knopf“ drückt.

Eine immense Zeitersparnis für das Laden deiner Webseite und zur Verbesserung vom pagespeed!

Update: YouTube Video einbinden mit dem „Fast Embedder“

Noch einfacher geht das Einbinden mit diesem kostenlosen Tool: https://tube.rvere.com/

Auf dieser Website trägst du einfach die Youtube-URL ein und bekommst einen Code, den du (beim klassischen Editor) in den Text-Editor einfügen kannst.

Beim Gutenberg-Editor suchst du nach „html“ und fügst in das Feld den Code ein.

FEDDICH! :-)