【Cocoon 】超簡単!Youtubeの動画埋め込みを高速化させる

Youtubeの高速化Word press

・ブログにYoutubeを貼り付けたいけど、記事が重くなるのは困るな〜
「Cocoon」Youtubeを高速化するのはどうしたらいいんだろ〜

ブログで記事を書く時に、Youtubeの動画を使って紹介したい時ってありますよね。

「動画を見てもらった方がわかりやすい」っていうときです。

しかし、動画をたくさん記事内に埋め込むとめちゃくちゃサイトが重くなります。

これが悩みどころですよね。

私も最初は、Youtubeで生成できる共有コードでブログに埋め込んでいましたが、これだとものすごくデータが重いので記事の表示が遅くなってしまいました。

そこで、Youtubeを高速化させる方法を探したところ、なんと!

「Cocoon」は超優秀なので、ただURLを貼り付ければOKという神機能が付いていました!

 

「Cocoon」の作成者であるわいひらさんの記事を参考にさせていただき、実際に記事内のYoutubeを高速化させてみました。

コクーン以外のテーマをお使いの方はまた別の方法が必要なので、ここでは無料テーマ「コクーン」をお使いの場合のYoutube動画の高速化の仕方を具体的に説明していきます。

スポンサーリンク

Youtubeを高速化させないとこうなる

悪い点のテスト

ずばり、Youtubeの高速化をしておかないとページの表示速度がエライことになります。

ちなみに、自分のサイトのページが表示されるスピードは「PageSpeed Insights」というサイトで確認できます。

このサイトに自分の記事URLを入れて確認することで表示スピードが改善されているかどうかのビフォアフターがひと目でわかります。

便利なサイトなので、まだ自分のサイトを計測したことがない方は一度やってみることをおすすめします。

 

ハイ、今回問題になった記事はこちら

→【名作】何度でも観たい!面白いおすすめ映画16選(洋画)

映画ファンの私が、本当に面白いおすすめの映画を紹介した記事。

予告編も見て欲しかったのでおすすめ映画16コ全ての映画の予告編を一つの記事に入れました。

 

その動画の多さに、なんとなーくイヤな予感はしていたのですが、いざ「PageSpeed Insights」でページの表示速度を計測してみると・・・

まさかのモバイル 34点!PC 41点!(基準=モバイルは60点以上、PCは100点近くほしいところ)

やばいぐらい超おそいです。

このままにしておいたら、このページだけでなくサイト全体の評価がガタ落ちです。

(グーグル様は、「パッと表示される、スマホユーザーにも優しいサイトを優遇するよ〜」と言うておられるので、ページの表示スピードは死活問題なのです。)

ある方法で、YouTubeの高速化をした結果

<PC>

ページの表示スピード99点

99点って、ほぼほぼ最高点じゃないですか?完ぺきです。

 

<モバイル>

ページの表示スピード77点

スマホで見る場合も、これだけ動画載せていて77点なら、かなり良いでしょう。素晴らしいです。

 

YouTubeを高速化する方法

ずばり、YouTubeのURLをコピーして、テキストエディターに貼り付けるだけです。超かんたんですよね。

こうすることで、動画がクリックされるまでサムネイル(ただの画像)的な感じで待機してくれるため記事が重くならないんだそうです。

むしろ、普通にYouTubeの共有から記事に埋め込みをするよりも簡単ではありませんか。

「Cocoon」神すぎじゃないですか?

なんで今まで知らなかったんだろ・・・?

Youtubeを高速化する手順

①YouTubeでお目当ての動画のベージを開いて、URLをコピーする

 

 

 

②テキストエディターにコピーしたURLを貼り付ける

このとき、コピーしたURLにはそれ以外の文字がくっつかないようにします。

URLの前後、URLの上下の行を開けないと動画のサムネイルが表示されません。

(最初にやってみたときに、コピーしたURLにほかの文字がくっついていることに気がつかず、「出来ない〜できない〜」と悩みました。凡ミスです。)

 

 

③ビジュアルエディターに切り替えるとこのように動画のサムネイルが表示されます

映画「ハンニバル」日本版劇場予告

ビジュアルエディターに切り替えてすぐに動画のサムネイルがでない場合は、プレビュー画面で確認をしたり、記事を1回保存したりするとちゃんと動作します。

(ビジュアルエディターに切り替えてもURLだけが表示されることがあり、「あえ〜?」と少し悩みましたが、プレビューで確認してみるとちゃんと動画のサムネになっていました。)

Youtubeが高速化しているかどうかの確認方法

<通常のYoutube埋め込みの画面>

・Youtubeが通常の埋め込みの場合→画面右上に「後で見る・共有」の表示あり
・Youtubeの高速化が成功している場合→「後で見る・共有」の表示がなくなる

記事が完成したら仕上げに、先ほど紹介し「PageSpeed Insights」でページの表示速度を確認してみましょう。

↓16コの動画を詰め込んだ当サイトの記事で高速化の威力を体感してください。

【名作】何度でも観たい!面白いおすすめ映画16選(洋画)
本当に面白いおすすめ映画(洋画)を16個まとめてみました。1度だけではなく、何度でも観たくなる奥が深い名作を厳選。90年代から2019年までの名作映画をご紹介します。

スマホで見てもサクッと表示されます。

コクーンでYoutubeを高速化する方法:まとめ

記事の中にYouTubeの動画を設置できると、読む人にとってもわかりやすくなりますよね。

この方法を知るまでは、1つの記事に1つの動画を挿入しただけでページの表示速度が遅くなるのでヒヤヒヤしましたが、もう安心です。(笑)

「Cocoon」は無料のワードプレステーマであるのにも関わらず、こんな機能がついているなんて本当にすごいです。

動画をうまく使えば、より楽しくわかりやすい記事を書くことができ、ブログの幅も広がりそうですね!

 

< 初心者さんにおすすめ>
ブログで手軽にアフィリを始める方法
① A8.net   →アフィリといえばココ!すぐ使えて人気No. 1
もしもアフィリエイト →Amazonと楽天商品を紹介して手軽に始められる!

 

Word press
スポンサーリンク
CUTIEをフォローする
CUTIE

ライフハックや雑学、動物が好きな雑記ブロガー。
犬を撫でながらブログを書いてます(´∀`)
特技は、徹底的に調べ上げて買うネットショッピング。

CUTIEをフォローする
いまをシンプルに生きるには

コメント

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