「メイド・イン・ヘブン」スキン適用中

YouTube動画読み込みを高速化させる方法

投稿・固定ページ
この記事は約3分で読めます。
YouTube埋め込みの表示も高速化されたので、CocoonのYouTube高速化機能は現在無効にしてあります。

YouTube動画のiframe読み込みは、結構重たいです。

なので、YouTube動画を速く表示する仕組みをCocoonに取り入れました。

こんな感じでサムネイルを表示することで、iframeを読み込まず高速化表示させています。もちろんAMPにも対応。

上記はYouTube埋め込みではありません。疑似埋め込みCSSでYouTube動画表示に似せています。

高速化表示埋め込みの方法

埋め込み動画表示を高速化する方法は簡単です。

YouTubeの動画URLをエディターに挿入するだけです。

ビジュアルエディターでYouTube動画埋め込み

1行につき1つのURLを入力するようにしてください。

ビジュアルエディターで入力した場合、埋め込み動画スタイルで表示されるようになっています。

ビジュアルエディターでの動画埋め込み表示例

これは、WordPressの埋め込み機能を利用したものなので、このように置き換わるのが正常動作です。

YouTube動画の高速化表示は、特に設定は必要なく「エディターにURLを入力するだけ」の仕様にしました。

YouTubeが生成する「iframe埋め込み」では、高速化表示にあえて対応させていません。

というのも、動画を通常表示させたい場合に、「iframeで埋め込む」という選択肢を残しておきたいからです。

動作確認

他にもいくつか動画を貼り付けておくので、ページをリロードするなどして、読み込み状態を確認してみてください。

もちろんAMP・レスポンシブ表示にも対応しています。

通常表示と比較

以下は、同じ動画をCocoon高速化表示と、デフォルトのiframe表示での比較用です。

Cocoon高速化表示

通常のiframe表示

YouTubeプレイヤーをパラメーターで制御する

YouTubeプレイヤーの挙動をパラメーター指定することで変更することも可能です。

パラメーター指定方法はこちら。

YouTube高速化埋め込みをパラメータで制御する方法
YouTubeの埋め込み(iframe)プレイヤーの表示制御する方法。サンプルなど。

注意点

以下注意点。

  • Jetpackの埋め込み機能は自動的に無効にされます
  • YouTube URL記入をすると必ず高速化対応表示されます(iframeでは表示されない)
  • JavaScriptが動作しない環境では、動画は再生しなくなります

まとめ

YouTube動画を1ページあたりに多数掲載しているサイトなどは、かなり読み込みに時間がかかるのではないかと思います。

今回のYouTube高速化表示機能を利用することで、読み込み時間を結構短縮できるかと思います。

この機能は、WordPressプラグインの「Youtube SpeedLoad」のソースコードを参考に、不具合修正・機能追加を加えて作成させていただきました。

Youtube SpeedLoad
Improve rendering speed pages with YouTube players.

コメント

  1. ひよこ より:

    Cocoon使わせていただいております。

    「URL?t=1m5s」のように開始時間を指定した場合でも、動画の初めから再生されてしまうのですが、これはどうすることもできないのでしょうか。

    あまり需要のないことかもしれないのですが、私のブログではほとんどの記事に時間指定したURLを貼っていたので、もし修正できるのでしたら、余裕のある時で構いませんので修正していただければ幸いです。

    よろしくお願いいたします。

  2. ひよこ より:

    ありがとうございます!時間指定したとおりに再生されました。

    素早い対応にいつも驚かされています。今後もわいひらさんの作るものを使わせていただきます。本当にありがとうございます。

  3. TOMATO より:

    新たにYouTubeをメインにした紹介ブログを作ろうとコチラへたどり着きました。
    高速表示、アイキャッチなど最高です!
    そこで1つ質問です。
    1)表示させる動画サイズを任意のサイズへ変更したいですが、可能ですか?
    2)可能な場合、どこのコードを書き換えればいいでしょうか?またはCSSなどをいじる場合であればどこをいじればよろしいでしょうか?
    *記事内のトップにくるアイキャッチ画像に対して動画が小さいので投稿記事内限界まで大きくしたいです。

    • わいひら わいひら より:

      可能です。
      ただ、よろしければ、コメントの案内にもあるように、フォーラムの方に書き込んでいただいてよろしいでしょうか。
      https://wp-cocoon.com/community/
      上記コメントのコピペで良いので、お手数ですがトピックを立てて書き込んでいただければと思います。
      ※コメントだと同様のカスタマイズをしたい方が検索しても見つけづらいので。

  4. TOMATO より:

    ご返事ありがとうございます。
    先ほどトピックを立ててしまいましたが、フォーラムの過去記事にYouTubeサイズに関して回答がありました!今後はフォーラムを参考にさせていただきます。ありがとうございました。

タイトルとURLをコピーしました