カテゴリメニュー
サイトのカテゴリー

sponsored link

SWELLテーマのガチレビューはこちら記事を読む

【WordPress】マナブログのやり方でYouTube埋め込みを高速化する

悩む人

WordPressでブログ書いてて、YouTube動画埋め込みすぎたのか、読み込みが遅くなってる。。

テキストエディタで書いてますが、おすすめの埋め込み方法ありますか?

今日は、上記のお悩みを解決します。

あいうえおLIFE

サイトスピードを測ったりして、YouTubeの埋め込み方が低評価測定の原因になっていることありますよね。

本記事でわかること
  • Youtubeの読み込みを高速化するコード(遅延読み込み)
  • YouTube動画から取得した埋め込みコードを編集する箇所

どうぞ最後まで、お読みくださいね。

もくじ
運営者:あいうえおLIFE
こんにちは

Youtubeの読み込みを高速化するコード(遅延読み込み)

Background vector created by pikisuperstar - www.freepik.com
あいうえおLIFE

下記のJavaScriptコードを記事のテキストエディタの1番上に、貼り付けます。

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

理屈は、DeferというHTMLを読み込む際の遅延処理をしています。

上記の処理で、「体感速度」やページスピードインサイトの個別測定で高速化。

YouTube埋め込みコードの編集のやり方

People vector created by rawpixel.com - www.freepik.com

テキストエディタに切り替えて、記事の1番上に「JavaScript」コードを貼ってる前提で進めていきます。

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

<iframe width="420" height="315" src="//www.youtube.com/●●●>と長いコードがコピー。

STEP
src=の部分を空っぽにして、data-src=URLと書き換える

<iframe width="420" height="315" src="" data-src="//www.youtube.com/●●●>という具合。

STEP
YouTube動画を貼りつけたい箇所に貼る
  • テキストエディタ:編集した埋め込みコードをコピペ。
  • ブロックエディタ:カスタムHTMLに編集した埋め込みコードをコピペ。

参考記事(manablog)

SWELLテーマなら動画も遅延読み込みできます

Marketing vector created by stories - www.freepik.com
あいうえおLIFE

当サイトも2021年7月〜SWELLで運営していますが、動画遅延読み込みによるSEO対策は、ばっちり。

SWELL設定

管理画面のSWELL設定から、下記を設定可能。

  • 遅延読み込み機能
  • 画像等のLazyload

下記記事にて、SWELLの高速化設定についても触れています。

遅延読み込みできる箇所

  • 記事下のコンテンツ
  • フッター
  • 投稿内の画像や動画

今回、ご紹介したコードは「使用テーマ」で「YouTube動画の遅延読み込み」ができないという方向けになります。

最後までお読みいただき、ありがとうございます。

もくじ
トップへ
もくじ
閉じる