・ブログにYoutubeを貼り付けたいけど、記事が重くなるのは困るな〜
・「Cocoon」でYoutubeを高速化するのはどうしたらいいんだろ〜
ブログで記事を書く時に、Youtubeの動画を使って紹介したい時ってありますよね。
「動画を見てもらった方がわかりやすい」っていうときです。
しかし、動画をたくさん記事内に埋め込むとめちゃくちゃサイトが重くなります。
これが悩みどころですよね。
私も最初は、Youtubeで生成できる共有コードでブログに埋め込んでいましたが、これだとものすごくデータが重いので記事の表示が遅くなってしまいました。
そこで、Youtubeを高速化させる方法を探したところ、なんと！
「Cocoon」は超優秀なので、ただURLを貼り付ければOKという神機能が付いていました！
「Cocoon」の作成者であるわいひらさんの記事を参考にさせていただき、実際に記事内のYoutubeを高速化させてみました。
コクーン以外のテーマをお使いの方はまた別の方法が必要なので、ここでは無料テーマ「コクーン」をお使いの場合のYoutube動画の高速化の仕方を具体的に説明していきます。
Youtubeを高速化させないとこうなる
ずばり、Youtubeの高速化をしておかないとページの表示速度がエライことになります。
ちなみに、自分のサイトのページが表示されるスピードは「PageSpeed Insights」というサイトで確認できます。
このサイトに自分の記事URLを入れて確認することで表示スピードが改善されているかどうかのビフォアフターがひと目でわかります。
便利なサイトなので、まだ自分のサイトを計測したことがない方は一度やってみることをおすすめします。
ハイ、今回問題になった記事はこちら
映画ファンの私が、本当に面白いおすすめの映画を紹介した記事。
予告編も見て欲しかったのでおすすめ映画16コ全ての映画の予告編を一つの記事に入れました。
その動画の多さに、なんとなーくイヤな予感はしていたのですが、いざ「PageSpeed Insights」でページの表示速度を計測してみると・・・
まさかのモバイル ３４点！PC ４１点！（基準＝モバイルは６０点以上、PCは100点近くほしいところ）
やばいぐらい超おそいです。
このままにしておいたら、このページだけでなくサイト全体の評価がガタ落ちです。
（グーグル様は、「パッと表示される、スマホユーザーにも優しいサイトを優遇するよ〜」と言うておられるので、ページの表示スピードは死活問題なのです。）
ある方法で、YouTubeの高速化をした結果
＜PC＞
９９点って、ほぼほぼ最高点じゃないですか？完ぺきです。
＜モバイル＞
スマホで見る場合も、これだけ動画載せていて７７点なら、かなり良いでしょう。素晴らしいです。
YouTubeを高速化する方法
ずばり、YouTubeのURLをコピーして、テキストエディターに貼り付けるだけです。超かんたんですよね。
こうすることで、動画がクリックされるまでサムネイル（ただの画像）的な感じで待機してくれるため記事が重くならないんだそうです。
むしろ、普通にYouTubeの共有から記事に埋め込みをするよりも簡単ではありませんか。
「Cocoon」神すぎじゃないですか？
なんで今まで知らなかったんだろ・・・？
Youtubeを高速化する手順
①YouTubeでお目当ての動画のベージを開いて、URLをコピーする
②テキストエディターにコピーしたURLを貼り付ける
このとき、コピーしたURLにはそれ以外の文字がくっつかないようにします。
（最初にやってみたときに、コピーしたURLにほかの文字がくっついていることに気がつかず、「出来ない〜できない〜」と悩みました。凡ミスです。）
③ビジュアルエディターに切り替えるとこのように動画のサムネイルが表示されます
ビジュアルエディターに切り替えてすぐに動画のサムネイルがでない場合は、プレビュー画面で確認をしたり、記事を１回保存したりするとちゃんと動作します。
（ビジュアルエディターに切り替えてもURLだけが表示されることがあり、「あえ〜？」と少し悩みましたが、プレビューで確認してみるとちゃんと動画のサムネになっていました。）
Youtubeが高速化しているかどうかの確認方法
＜通常のYoutube埋め込みの画面＞
・Youtubeの高速化が成功している場合→「後で見る・共有」の表示がなくなる
記事が完成したら仕上げに、先ほど紹介し「PageSpeed Insights」でページの表示速度を確認してみましょう。
↓16コの動画を詰め込んだ当サイトの記事で高速化の威力を体感してください。
スマホで見てもサクッと表示されます。
コクーンでYoutubeを高速化する方法：まとめ
記事の中にYouTubeの動画を設置できると、読む人にとってもわかりやすくなりますよね。
この方法を知るまでは、１つの記事に１つの動画を挿入しただけでページの表示速度が遅くなるのでヒヤヒヤしましたが、もう安心です。(笑)
「Cocoon」は無料のワードプレステーマであるのにも関わらず、こんな機能がついているなんて本当にすごいです。
動画をうまく使えば、より楽しくわかりやすい記事を書くことができ、ブログの幅も広がりそうですね！
ブログで手軽にアフィリを始める方法
① A8.net →アフィリといえばココ！すぐ使えて人気No. 1
②もしもアフィリエイト
コメント