WordPress

【WordPress】マナブログさんのメソッドでYouTube埋め込みを高速化する

ライオンメディア テーマでWordPressやり始めましたが

ブロックエディタにも慣れて(というよりは、今までブログをしていなかったので、クラシックエディタが使いやすいとかも実感ないのです笑)

2020/02/27〜WordPressのテーマをcocoonに乗り換えました!

追記 2020/03/15〜WordPressのテーマをJINに乗り換えました!

ブロックエディタでぽちぽちYouTube動画埋め込みまくると重くなるらしい

便利なので、

そのままブロックエディタの機能でURLを貼る

という感じでやっていました。

調子よくできているかなと思っていましたが、

サイトスピードテストの情報を知り、GTmetrixで測定しました!

YouTubeの埋め込み方が低評価測定の原因とも気付きました

原因は、

他にもCanvaで作成していた画像をPNG形式で全て使っていたこともありました。

そのあたりは、https://tofutech.xyz/さんのYouTube動画のhttps://www.youtube.com/watch?v=KiuWewHS4lA&list=PLsENrmf7uHmb1GevBgYyHHxTuHHP4IqUe&index=19

で見て気付き、試行錯誤しました。

マナブログさんの記事を見て、埋め込み法を変更

YouTube埋め込みのとこだけは、

コードエディタに切替て、

記事の冒頭に

「Youtubeを高速読み込みするJSコード」を貼り付け、

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

(コードはマナブログさんのブログより引用)

YouTube埋め込み時には、

YouTubeの動画画面の「共有」から「ソースをコピー」して

<iframe  width="420" height="315" src="//www.youtube.com/●●●

この部分を

<iframe width=”420″ height=”315″ src=”” data-src=”//www.youtube.com/●●●

書き換えて

コピーし貼り付けるというルーティンを実践していきました。

測定結果が、F(47%)→B(83%)にアップ

  1. PNG→JPGに画像を変更
  2. プラグインをいくつか入れるなど
  3. 上記のYouTube動画で解説していただいた内容実践
  4. マナブログさんのYouTube動画埋め込み法を変更

以上をやってみた結果です。

ぽちぽち動画埋め込めて楽だけど、重たくなる。。

便利の向こうには、デメリットもあるなと学ばされました。

しかし、このメソッドはYouTube動画の読み込みを軽くしてくれます。

マナブログさんありがとうございます。

2020/03/10 追記

Google アドセンス審査に1回落ちたときは、YouTube動画につなげる導線としての記事でした。

中身が薄すぎて不合格でした

(そりゃそうだ)

今はアドセンス審査合格しましたが

初期の頃に、YouTube動画の埋め込みの適切なメソッドをキャッチしたのでシェアします

こちらも読まれてます