サイトに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になるので動画によって異なります。
【変更前】
|
1 2 |
<iframe width="560" height="315" src="https://www.youtube.com/embed/ogfYd705cRs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> |
【変更後】
|
1 2 |
<iframe width="560" height="315" src="https://www.youtube.com/embed/ogfYd705cRs?rel=0" frameborder="0" encrypted-media" allowfullscreen> </iframe> |
このようにしておくと動画が終わったときに他の動画が自動で表示されなくなります。
次に「iframe」のうしろへ「id=”videoDefer”」を追加して「src」を「data-src」に書き換えて下さい。
|
1 2 3 |
<iframe id="videoDefer" width="560" height="315" data-src="https://www.youtube.com/embed/ogfYd705cRs?rel=0" frameborder="0" encrypted-media" allowfullscreen> </iframe> |
ここからは、バックアップが必要です。「外観」から「テーマの編集」をクリックして「function.php」の最下部に↓のコードを貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function add_javascript() { echo <<<HTML <script> function youtube_defer() { var videoDefer = document.getElementById('videoDefer'); if(videoDefer.getAttribute('data-src')) { videoDefer.setAttribute('src',videoDefer.getAttribute('data-src')); } } window.onload = youtube_defer; </script> HTML; } add_action( 'wp_head', 'add_javascript', 999 ); |
動画を一つだけ設置した場合は、これで改善されると思います。
ページにYouTubeの動画が複数ある場合
YouTubeの埋め込みタグが複数ある場合は、すべてのタグの「iframe」の後に「class=”videoDefer”」を追加して下さい。「src」は動画が一つだけあるときと同じように「data-src」にします。
|
1 2 3 |
<iframe class="videoDefer" width="560" height="315" data-src="https://www.youtube.com/embed/ogfYd705cRs?rel=0" frameborder="0" encrypted-media" allowfullscreen> </iframe> |
次に下のコードを「function.php」に貼り付けて下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function add_javascript() { echo <<<HTML <script> jQuery(function() { vfs = jQuery('.videoDefer'); vfs.each( function( index, element) { var vimg = vfs[index]; if (vimg.getAttribute('data-src')) { vimg.setAttribute('src', vimg.getAttribute('data-src')); } }); }); </script> HTML; } add_action( 'wp_footer', 'add_javascript', 999 ); |
複数の動画を埋め込んでいる場合でも、これで対処できるかと思います。
スタイルとスクリプトの順序を最適化する
スタイルとスクリプトの順序を最適化するには、下のコードを「function.php」の最下部に貼り付けて下さい。
|
1 2 3 4 5 6 7 8 9 10 11 |
jQuery(function() { vfs = jQuery('.videoDefer'); vfs.each( function( index, element) { var vimg = vfs[index]; if (vimg.getAttribute('data-src')) { vimg.setAttribute('src', vimg.getAttribute('data-src')); } }); }); |
また、特定のページだけに適応したい場合は、賢威のエディタ画面の下の方にある「この記事だけの個別CSS/JS記述欄」のなかに同じコードを＜script＞＜/script＞で囲んで貼り付けてください。
スタイルとスクリプトの順序を最適化する作業はこれで完了です。
再度GTmetrixで測定してみると……
ページスピードスコアが2倍に改善しています。
また「Defer parsing of JavaScript」を見てみると……
改善しなければならないJavaScriptはたくさんありますが、YouTubeのリンクは消えています。
「Optimize the order of styles and scripts」の項目もスッキリしました。
賢威7.1のテンプレートでも、お使いのデザインによって使用するコードが違うこともあります。function.phpに編集を加えるときは、慎重におこなってみて下さい。