アフィリエイト戦略ガイドAll rights reserved.

YouTubeの動画でサイトのスピードが遅くなったときの対処法(賢威7編)

サイトにYouTubeの動画を埋め込んている方は、注意して下さい。サイトの表示速度がかなり遅くなっている可能性が高いです。当記事では、賢威7.1テンプレートに動画を埋め込んだ場合で、サイトの表示速度が低下したときの対処法をご紹介します。









GTmetrixでサイトのスピードを確認する

まずはGTmetrixでサイトのスピードを測定して下さい。このツールの評価が、必ずしも正しいというわけではないかもしれません。しかし、どういった所に問題があるのか細かく知ることができるので便利です。


このブログを測定してみると……



かなり遅いことが分かります。問題はYouTubeの動画の埋め込みです。「Defer parsing of JavaScript」と「Optimize the order of styles and scripts」の項目にYouTubeの動画が表示されています。


「Defer parsing of JavaScript」を見てみると……



「Optimize the order of styles and scripts」では……



そこで、これを改善したいと思います。


「Defer parsing of JavaScript(JavaScriptの解析を延期する)」にYouTubeの動画が表示されている場合、次の方法で解決できるかもしれません。ただし「function.php」にコードを追加することになるので、バックアップを取って下さい。


また、親テーマがアップデートされた場合でもカスタマイズした部分を残すためには、子テーマを設置していきましょう。賢威テンプレートに子テーマを設置するには「ワードプレス初心者向け|賢威に子テーマを設置する方法(エックスサーバー編)」を参考にしてみて下さい。


「Defer parsing of JavaScript」の改善

ページにYouTubuの動画が一つだけある場合と複数ある場合では、使うコードが違います。まずは、YouTubeの動画が一つだけあるときの対処法を説明します。

ページにYouTubuの動画が一つだけある場合

YouTubeのコードは↓のようになっていると思います。



まずは、このコードから「allow=”autoplay;」を削除して、ogfYd705cRsの後に「?rel=0」を追加します。「ogfYd705cRs」はIDになるので動画によって異なります。

【変更前】


【変更後】


このようにしておくと動画が終わったときに他の動画が自動で表示されなくなります。


次に「iframe」のうしろへ「id=”videoDefer”」を追加して「src」を「data-src」に書き換えて下さい。


ここからは、バックアップが必要です。「外観」から「テーマの編集」をクリックして「function.php」の最下部に↓のコードを貼り付けます。


動画を一つだけ設置した場合は、これで改善されると思います。

ページにYouTubeの動画が複数ある場合

YouTubeの埋め込みタグが複数ある場合は、すべてのタグの「iframe」の後に「class=”videoDefer”」を追加して下さい。「src」は動画が一つだけあるときと同じように「data-src」にします。


次に下のコードを「function.php」に貼り付けて下さい。


複数の動画を埋め込んでいる場合でも、これで対処できるかと思います。


スタイルとスクリプトの順序を最適化する

スタイルとスクリプトの順序を最適化するには、下のコードを「function.php」の最下部に貼り付けて下さい。


また、特定のページだけに適応したい場合は、賢威のエディタ画面の下の方にある「この記事だけの個別CSS/JS記述欄」のなかに同じコードを<script></script>で囲んで貼り付けてください。


スタイルとスクリプトの順序を最適化する作業はこれで完了です。


再度GTmetrixで測定してみると……


ページスピードスコアが2倍に改善しています。



また「Defer parsing of JavaScript」を見てみると……



改善しなければならないJavaScriptはたくさんありますが、YouTubeのリンクは消えています。


「Optimize the order of styles and scripts」の項目もスッキリしました。



賢威7.1のテンプレートでも、お使いのデザインによって使用するコードが違うこともあります。function.phpに編集を加えるときは、慎重におこなってみて下さい。