サイト全体に「COLORS(ブルー)」スキン適用中。
シンプルなWordPressテーマ

Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように
便利な機能を織り込んで作りました。
100%GPLテーマなので自由にご利用いただけます。

ダウンロードページはこちら。

ダウンロード

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.
投稿・固定ページ
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
〇アダルト・出会い系サイト可
△安定性にやや欠ける

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
○http/2(高速化プロトコル)に対応
〇アダルト・出会い系サイト可
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

Cocoon

コメント

  1. ひよこ より:

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

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

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

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

  2. ひよこ より:

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

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

  3. TOMATO より:

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

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

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

  4. TOMATO より:

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

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