Youtube Video einbinden ohne viel pagespeed zu opfern
2686
post-template-default,single,single-post,postid-2686,single-format-standard,ajax_fade,page_not_loaded,,qode-child-theme-ver-1.0.0,qode-theme-ver-11.0,qode-theme-bridge,wpb-js-composer js-comp-ver-5.1.1,vc_responsive

Youtube Video einbinden ohne viel pagespeed zu opfern

Youtube Video einbinden ohne viel pagespeed zu opfern

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 dem Blog 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 77/100 in der Desktop-Version. Damit bin ich ganz zufrieden.

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

  1. Bilder komprimmiert
  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:

Update dank Korrektur von Joe: In dein Theme muss Javascript eingebunden sein, sonst funktioniert diese Methode leider nicht!

Video einbinden in die Sidebar mit einem Codeschnipsel

Hierzu gehst du in deinem WordPress Dashboard auf: Design -> Widgets und ziehst dir ein „Text“-Widget an die gewünschte Stelle in der Sidebar.

Dort fügst du folgenden Code ein – ACHTUNG! Aus mir unerklärlichen Gründen werden die Gänsefüßchen im Artikel kursiv angezeigt… Dies musst du bitte in „normale“ Füßchen ändern (shift und 2 auf der Tastatur). Besten Dank!:

[grey_box]<div class=“youtube“ id=“der Code deines Videos“ style=“width:280px; height:200px;“></div>[/grey_box]

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).

Video einbinden in eine Seite oder einen Blogpost

Funktioniert fast genauso, aber wenn du den o.g. Code in den Texteditor einfügst, wird das Video links platziert. Wenn du es mittig haben möchtest, benutzt du folgende Codeschnipsel – ACHTUNG! Aus mir unerklärlichen Gründen werden die Gänsefüßchen im Artikel kursiv angezeigt… Dies musst du bitte in „normale“ Füßchen ändern (shift und 2 auf der Tastatur):

[grey_box]<div style=“text-align: center;“><div style=“display: inline-block;“>
<div id=“dein Code“ class=“youtube“ style=“width: 560px; height: 315px;“>
</div></div></div>[/grey_box]

Wieder wie gehabt den Code für dein Video entsprechend ändern und die Breite und Höhe festlegen.

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!

Tags:
,
Autor: Ines
inescordes@web.de

Kreatives Multitalent mit viel Wissen und Erfahrung aus über 20 Jahren Selbstständigkeit. Ich zeige dir wie du dein geliebtes Business nach vorne bringst & dabei glücklich bist. LET´S DO IT! Mehr über mich!

8 Comments
  • Andrea Giesler
    Posted at 08:26h, 28 Oktober Antworten

    Danke für den Tipp, Ines! LG, Andrea

    • Ines
      Posted at 08:37h, 29 Oktober Antworten

      Immer gern! Liebe Grüße, Ines

  • Johannes Nielsen
    Posted at 15:20h, 27 Mai Antworten

    Hey Ines.
    An und für sich ’ne super Idee. Du solltest aber vielleicht dazu sagen, dass das logischerweise nur funktioniert, wenn man entsprechendes JavaScript auf der Seite eingebunden hat. Ich hab es durch Zufall in Deinem Artikel über emotionales Marketing am Beispiel von Ikea gefunden.
    LG, Joe.

    • Ines
      Posted at 16:14h, 27 Mai Antworten

      Hey Joe, danke für deine Korrektur. War mir nicht klar gewesen dass es JavaScript braucht. Gottlob hat mein Theme das bereits. Schöne Grüße, Ines

  • Jan Ehlbeck
    Posted at 16:53h, 14 Oktober Antworten

    „Update dank Korrektur von Joe: In dein Theme muss Javascript eingebunden sein, sonst funktioniert diese Methode leider nicht!“ Immer noch nicht richtig :)

    Wenn überhaupt meinst du wohl, das die JQuery Library eingebunden sein muss.
    JavaScript wird durch JEDEN Browser interpretiert und muss nicht extra eingebunden werden.

    • Ines
      Posted at 08:19h, 15 Oktober Antworten

      Danke für die Ergänzung Jan!

  • Lisa
    Posted at 12:53h, 30 März Antworten

    Hallo zusammen, ich habe schon so viele Posts darüber gelesen und immer wieder wird gesagt, dass direkt das passende Video-Format beim einbetten, also beim kopieren des Links ausgewählt wird oder es manuell, wie auch hier vorgeben durch die „width“-Wert und „height“-Wert geändert werden kann. Kopiere ich den Link, füge diesen in mein SiteOrgine Editor Widget von WordPress ein und ändere meine Größe, dann wird es im Widget-Fenster zwar angepasst, aber sobald ich aktualisiere und mir meine Seite anschaue, ist das Video über die komplette Seite. Ich verstehe es nicht und bin auch schon am verzweifeln. Mit meinen hochgeladenen Videos funktioniert das wie beschrieben, aber nicht mit den Links von YouTube. Hat jmd einen Rat, Hinweis oder ähnliches?
    Ich wär für alles dankbar, endlich kleinere Videos und nicht über die gesamte Breite sehen zu können.!

    Liebe Grüße,
    Lisa

    • Ines
      Posted at 07:35h, 02 April Antworten

      Hallo Lisa,
      da bin ich überfragt, aber vielleicht findet sich hier ja jemand der mehr dazu weiß.
      Schöne Grüße,
      Ines

Post A Comment