今回は、サイトに埋め込んだYouTube動画のせいでWEBサイト（ホームページ）の表示スピードが極端に低くなってしまっている方に向けて、最も最適なスピード改善の方法を紹介しまします。（プラグイン無し）
この改善方法で動画のあるページでもGoogleのスピードテストのPageSpeed InsightsGoogleで99点台を突破する事が出来ました。
また、今回の施策の他に下記のテーマを使って色々と対策した結果100点に到達する事が出来ました。
YouTubeの動画の埋め込みって非常に便利ですよね。ただ動画を埋め込むとサイトのスピードがめちゃくちゃ遅くなってSEO的に残念……って誰もが感じていると思います。ただ最近は、WEBサイトでも動画の重要性が上がってきているようで中々切っても切れない要素になってきてるのも事実。
どうにかして、動画を埋め込みながらサイトのスピードも早く出来ないか？そんな方は、是非今回の記事を参考にして下さい。
前置きはなんでこうなったかを語ってるだけです。さっさとやり方を知りたい方は目次の「実際の作業」までジャンプして下さい。
考え方から変える
YouTube動画を埋め込むとサイトの表示速度が遅くなるのって当たり前なんです。
YouTube自体がとてつもない情報量を持っていて、それを呼び出しているのですから。とは言ってもjsなどを使って読み込みを制限したり、lazy loadと言われる遅延呼び込みをしたりと色々と方法はあります。
ただこの場合は体感速度はめちゃくちゃ上がるが、クローラーがページが開いたと判断されるまではほとんど変わりません。なのでどうしても邪魔なリソースがあると判断されスピードテストの点数は低いままです。
この辺の処理は私も全部片っ端から調べて全て試してみました。中にはテーマの作り的に採用出来ない処理方法や完全に嘘付きな記事もありました。結果どのやり方もボツって事で諦めようとしましたが…
私は根本的に考え方を変えました。
実際に全て試してみた結果この方法が最も最強だったので、同じ境遇な人は今すぐ私と同じ考えに切り替えていいと思います。
それは、動画を無くす。
これだけです。
は？笑。本末転倒やないか！！と思った貴方。実際にこれが1番最強な方法だったので最後までお付き合い下さい。
サイトスピード爆速化
上記の考え方をもう少し詳細に説明すると、動画があるように見せて動画を無くすのです。
YouTube動画のサムネイルのみを取得する方法で、見た目はほとんど変わらず動画があるように見せます。
その画像に実際の動画のリンクを貼りつければ、ユーザーはいつも通りサイトにあるYouTubeのサムネイル画像をクリックする事でYouTubeの動画を見ているってアクションを起こせます。
実はこれって昔から良くやられてる方法で、しっかり検索をかけて探せばいくらでも出てくる情報です。ただSEO信者がスクリプト、スクリプトってうるさくてそれで埋まっちゃってる状態です。
この方法なら、ただ画像のあるページなので余裕でGoogleのスピードテストで90点台に到達できます。しかもYouTubeへのリンクがしっかり貼られているのでユーザーからしたら何も変わりません。
しかもやり方は超簡単です。
実際の方法は以下をコピペでOKです。
実際の作業
①まず以下のHTMLをコピペして下さい。
<p class="youtubesm">
<a href="//www.youtube.com/watch?v=ここにIDが入る" class="youtube_pn">
<img src="//i.ytimg.com/vi/ここにIDが入る/mqdefault.jpg" alt="" width="100%">
</a>
</p>②表示させたいYouTube動画のページへ行きIDをコピーします。IDの場所はURLの下記の赤字部分です。
https://www.youtube.com/watch?v=xT8nVGtyGZo&t=3s
③先ほどコピペしたHTMLの「ここにIDが入る」の部分にIDを入れる。
④こちらのリンクへ行き、YouTubeのアイコンをダウンロードしとく。もしくは以下のようなiconサイトなどで似たアイコンをDLする。
⑤下記のCSSをhead（スタイルシート）に記述。（丸々コピペでOK）
<style>
.youtubesm{
background:#fff
}
.youtubesm a{
border:2px
solid #fff;
display:block;
position:relative
}
.youtubesm a:hover{
opacity:.6
}
.youtubesm a::before{
background:url(ここにアイコンのURLを入れる) center center / 80px 80px no-repeat;content:"";
display:block;
width:100%; /*アイコンの幅調整*/
height:60px; /*アイコンの高さ調整*/
margin:-32px auto 0;
position:absolute;
top:50%;
left:0;
right:0;
z-index:1
}
.youtubesm a img{
width:100%
}
</style>⑥15行目の「ここにアイコンのURLを入れる」に使用するアイコンのURLを入れる。
これだけでOKです。先ほどのようなサムネイルを取得した画像とYouTubeリンクが簡単に表示されます。
以上が「YouTubeの埋め込みが原因で重いページを高速表示させる方法」でした。
中にはこの方法だと離脱率が〜とか、SEO的に〜とか言う人もいますけど、スクリプトで外部サービスを多用するのもデメリットがあるので安心して下さい。逆にスクリプトが原因でリンクエラーやコンソールエラーなどが起きるとSEO的に評価が下がりますし、対処が非常に難しいので、個人的には今回紹介したこのやり方が一番おすすめです。
またTwitter、Facebook、YouTube、WordPressとこんだけの外部サービスがあると中々しんどいサイトになりますよ。
動画を埋め込んだままページ表示速度を上げたい場合は以下のプラグインを試してみて下さい（体感速度が上がります。）
