レンダリングをブロックしている JavaScriptをフッターに移動させる

今回は「PageSpeed Insights」で指摘されていた「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」に対策する事にしました。

その前にちょっと基本的な部分を解説しておきます。

レンダリングブロックしているJavaScript
レンダリングブロックしているjQuery本体を移動させる
「head」に追加されているJavaScriptファイルをフッターに移動する
1. JavaScriptをコピーする準備
2. 「head」内で出力されているjsファイルを探す

レンダリングブロックしているJavaScript

そもそもレンダリングブロックしているJavaScriptってなんやねん！という方もいるかと思いますのでちょっとだけ説明しておきます。WordPressではプラグインを利用して簡単に色々な機能を装備する事ができます。

例えば「トップに戻るボタン」とか「ヘッダー画像をスライド表示させる」とか「SNSボタンを表示させる」とかプラグインで何でもできますよね。

これらの機能を実装するためにプラグインを有効化した時点でブログにJavaScriptや、jQuery、CSSファイルが追加されます。

特にjQueryと呼ばれているのがJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリで良く使われています。

簡単に言うとJavaScriptコードを簡単に記述できるのがjQueryで多くのプラグインでこのjQueryやJavaScriptが使われています。

さて、このjQueryを利用するにはjQuery本体が必要なんです。まあ、ゲームのソフトを利用するにはゲームの本体が必要という感じです。WordPressには元々jQuery本体が組み込まれていて、jQueryの記述を加えると自動的にjQuery本体が出現します。

ちょっと分かりにくいと思うので実際に見てみましょう。自分のブログを表示させて何も無いところで「右クリック」して「ページのソースを表示」をクリックします。

すると自分のブログのソースを確認できます。

ソースの中から「script type=’text/javascript’」という部分を探してみて下さい。「Ctrl」+「F」を押すと検索窓が出ますのでそれで探すと早いです。jQueryを利用している場合には次のような記述が見つかります。

<script type='text/javascript' src='http://dokidome.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://dokidome.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

バージョンが違う場合もあるかも知れませんが上記のような２つの記述があると思います。「jquery.js」と「jquery-migrate.min.js」という２つの記述です。これがjQuery本体で通常はソースの「head」部分に出力されます。

なんで２つも記述があるのか？というとjQuery本体のバージョンアップに伴って、以前のバージョンで作成されたプラグインとの互換性を保つため、jquery-migrate.min.jsが追加されています。そう、古いバージョンで作成されたプラグインも不具合なく作動させるため、２つの記述がある訳です。

さて、記事の冒頭でも書いたように「PageSpeed Insights」ではスクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScriptを排除しなさいと指摘されます。つまりブログの「head」部分にあるこのjQuery本体も読み込みの邪魔をしている訳です。

しかしながらこれを削除するとjQueryを利用しているプラグインが動きません。ゲームソフトはあるけどゲームの本体が無いという事になりますので、このjQuery本体を「head」部分ではなく邪魔にならない場所（フッター）で出力する事にすれば解決できるという訳です。

実はこのような「head」のJavaScriptをフッターに移動させるプラグインというのもあります。「Head Cleaner」とか「JavaScript to Footer」で簡単にできますが、仕組みが分からないものを利用するのはちょっと怖いですし、不具合が出た時に対応ができません。

という事で自分でできる事はプラグイン無しでやってみる事にしました。結構勉強になりました。

レンダリングブロックしているjQuery本体を移動させる

jQuery本体をフッターで出力するには幾つか方法があるのですが、functions.phpに記述を加えるのが一般的です。

今回はWordPressに元々入っているjQuery本体をフッターに移動する方法を書きますが、WordPressに入っているjQuery本体を利用せずにCDNを利用する方がほとんどだと思いますので、CDNについてちょっと説明しておきます。

CDNとは？そのメリット

CDNというのはコンテンツデリバリネットワークの略です。説明すると難しくなるので、サーバーの負担を軽くする物と思っていたらいいかも知れません。サイト内で使用する画像や動画、CSS、JavaScriptといった静的なファイルなどをCDNに置いて配信できる仕組みです。

つまり負荷のかかる物は自分のサーバーではなく、別のサーバーに設置して配信してもらう事で自分のサーバーの負荷を減らして高速なページ表示が可能になるわけです。アクセスが集中するようなサイトでは非常に有効という事です。

今回の記事で書きたいのはCSSとか画像とかではなく、jQuery本体の配信をCDNにやってもらおうというお話です。

上記でも書いたようにWordPressには元々jQuery本体が組み込まれていて、jQueryの記述を加えると自動的にjQuery本体が出現します。でもCDNを利用する事で自分の利用しているサーバーの負荷を減らしてjQuery本体を配信してもらう事ができます。

今回はWordPressに元々入っているjQuery本体を出力しないようにして代わりにCDNにやってもらうという作戦です、それもフッターでね。

CDNを利用するメリットとしては先ほども書いたようにサーバーの負担を減らす事ができるという事と、自サイトに置いてあるファイルを読み込むよりも通信速度が早い、それとキャッシュの効果を期待できるという事です。

GoogleのCDNを利用する

Googleさんの超ハイスペックなサーバーからjQuery本体を利用させてもらいます。まずはバージョンを確認しておきましょう。
⇒Google Hosted Libraries

ここに2種類表示されています。

1.X系2.X系の違い
1.x 系は IE8 以前をサポートするレガシーブラウザ向けのバージョン、
2.x 系は IE8 以前のサポートは捨てて、高速に安定して動作させることを目指したバージョン、という認識で良いのではないでしょうか。
制作環境に合ったバージョンをダウンロードして下さい。

という事なのですが、無難にIE8 以前もサポートする「1.x 系」の最新版を利用する事にしましょう。私が確認した時点で「1.x 系」の最新バージョンは「1.11.1」でしたのでこれを利用する事にします。

GoogleのCDNをWordPressで利用する

手順としてはWordPressに元々入っているjQuery本体を出力しないようにしてGoogleのCDNを新たに登録します。さらにレンダリングブロック（読み込みの邪魔）にならない場所（フッター）に出力する事にします。

それから作業の前に必ずバックアップはしておきましょう。functions.phpを編集しますが、記述ミスがあるとブログが真っ白になります。真っ白になったらFTP（ロリポップFTP）等でfuncitons.phpの記述を元に戻してもう一度ミスがないか確認して下さい。

「functions.php」を追加する場合には他の子テーマのように親テーマの記述をコピーするのではなく、白紙で作成しておきます。つまり、子テーマにファイル名だけ書いて保存すればOKです。

親テーマと同じ記述をするとブログが表示されない状態になります。まあ、記述をミスってもFTPからこのファイルを元に戻せばOKですので心配は無用です。

ここまでできたらWordPressに戻り、「外観」⇒「テーマの編集（エディタ）」と進み、先ほど作成した「functions.php」を開きます。

子テーマに初めてfunctions.phpを追加した方は最初と最後に次の記述をしておき、この中に全ての処理を書いていきます。

<?php

//ここに処理を記述していきます

?>

functions.phpに記述です。私は子テーマのfunctions.phpに記述しています。

if (!is_admin()) {
    function deregister_script(){  //　登録の解除
        wp_deregister_script('jquery');
    }
    function register_script(){  // CDNに変更して登録
        wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1', true );
    }
    function add_script() {  // 登録したjqueryを出力
        deregister_script();
        register_script();
        wp_enqueue_script('jquery');    
            }
    add_action('wp_enqueue_scripts', 'add_script');
}

wp_deregister_scriptで登録を解除
wp_register_scriptでCDNを登録し、フッターで出力するように設定
wp_enqueue_scriptで登録したCDNを装備する

という感じの3段階です。なぜ一度解除して登録しなおすかというと登録する時にwp_register_script( $handle, $src, $deps, $ver, $in_footer )という情報を記述できます。この最後の項目$in_footerを「true」にするとフッターで出力されます。

そのため、一度既存の登録を解除して再登録、その登録の段階でフッターで出力するように指定しなおした訳です。これでCDNのjQuery本体はフッターに移動するはずですが、もしこれでページのソースを確認して依然として「head」部分に出力されているのであれば原因はプラグインかも知れません。

後はこれで「プラグインが正常に機能しているか」という部分と「ページの表示スピード」を確認しておきましょう。

私の場合はプラグインが邪魔してjQuery本体がフッターに移動しませんでした。私が利用していたプラグイン「Scroll To Top」というプラグインが原因だったと思われます。このプラグインを停止するとjQuery本体はきちんとフッターに移動しました。

という訳で私の場合は「Scroll To Top」の機能（ページの先頭に戻るボタン）はプラグインは利用せずに自作してフッターに追加する事にしました。

自作した「Scroll To Top」の作り方は別記事で解説します。
⇒ページの先頭に戻るボタンを自作してみた

以上がレンダリングをブロックしている「jQuery」の対策です。

「head」に追加されているJavaScriptファイルをフッターに移動する

ここからは説明が結構難しくて私も苦戦しております。色々なプラグインを追加していたりすると「head」部分でJavaScriptやjQueryのファイルが追加されている場合があります。フッターで出力されていれば問題はないです。

「jQuery」に関しては先程フッターに移動しましたので、次は「JavaScript」ですが、結構難易度高いかもしれません。

作戦としてはこのような方針で行う事にしました。一応私のやり方です。

まずは「head」内に追加されたJavaScriptファイルを自分のファイルにコピー
「head」内に追加されたJavaScriptファイルを出力しないようにする
自分のファイルにコピーしたJavaScriptファイルをフッターで出力

プラグイン等で追加されたJavaScriptを自分のファイルにコピーするので準備をしておきました。

JavaScriptをコピーする準備

ロリポップで説明しておくと「ロリポップのユーザー専用ページ」⇒「webツール」⇒「自分のドメイン」⇒「wp-content」⇒「themes」⇒「child（子テーマ）」に「js」という「フォルダ」を作成しました。ファイルではなくフォルダね。

それで今度は作成した「js」というフォルダの中にjsの「ファイル」を追加します。

ファイル名は自分の分かりやすい名前で「〇〇.js」としておけば問題ないでしょう。

それでこの「〇〇.js」のファイルにこれからコピーするJavaScript(jQuery)等を記述いくことになります。とりあえず準備は完了。

「head」内で出力されているjsファイルを探す

ページのソースを見て「script type=’text/javascript’」という記述部分を探してみます。「Ctrl」+「F」を押すと検索窓が出ますのでそれで探すと早いです。あくまでプラグインで追加されたものを探すのが目的です。

プラグインで追加された物かどうかはURL部分で判断できると思います。

あまりいい例が無かったのでプラグインで追加された物ではないですが「twentytwelve-navigation.js」を例にやってみる事にしました。

これはTwentyTwelveでスマートフォン表示したときに表示される「メニューボタン機能」のJavaScript。実際はこの「twentytwelve-navigation.js」は元々フッターで出力されるようになっているのでこのままでもいいのですが、「head」部分で出力されていたと仮定してフッターで出力する実験台になってもらいます。

TwentyTwelveの場合ページのソースをみるとフッターでこのような記述があります。

<script type='text/javascript' src='http://domain550.com/wp-content/themes/twentytwelve/js/navigation.js?ver=20140711'></script>

これはフッターで出力されているので、特に変更は必要ではありませんが、一応サンプルとして、ヘッダーで出力されていたと仮定して説明していきます。

この「href=’http://～」という部分をクリックするとそのJavaScriptの中身を見る事ができます。この中身を先ほど作成したファイルにコピペして「保存」。これで準備はOKです。ファイル名は「navi.js」としておきました。

ここから先ほど追加したfunctions.phpに記述をしていきますが、functions.phpでは同じ記述を2回書くとブログが真っ白状態になります。そのため、先ほどjQuery本体を移動したコードと一緒に記述しておきます。必要な分だけ追加する形です。

真っ白になったらFTP（ロリポップFTP）等でfunctions.phpを元に戻してください。

if (!is_admin()) {
    function deregister_script(){  // 登録解除する項目
         wp_deregister_script('jquery');
         wp_deregister_script('twentytwelve-navigation');  // ここに解除するjsを追加
    }
    function register_script(){  // 登録する項目
        wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1', true );
    }
        wp_register_script( 'navi', get_stylesheet_directory_uri() . '/js/navi.js', array( 'jquery' ), '', true);  // 作成したnavi.jsを登録
    }
    function add_script() {  // 装備（出力）する項目
        deregister_script();
        register_script();
        wp_enqueue_script('jquery');
        wp_enqueue_script('navi');  // 作成したnavi.jsを出力
        
            }
    add_action('wp_enqueue_scripts', 'add_script');
}

wp_deregister_script(‘twentytwelve-navigation’);で登録解除
wp_register_scriptで名前を適当に付けて登録（今回はnavi）
wp_enqueue_script(‘登録した名前’);で出力

wp_register_script( $handle, $src, $deps, $ver, $in_footer )という情報を記述します。最後の項目をtrueにしてフッターで呼び出しです。

$handle : 登録する名前何にする？
$src : スクリプトファイルの場所はどこ？
$deps : スクリプトより前に読み込む必要がある物を記述。単体で動くならarray()。jQueryを使うならarray(jquery)
$ver : バージョン（特に必要ないなら「’’」のように空欄でOK。
$in_footer : フッターに入れるならtrue。head部分で出力するならfalse。

なのでハンドル名は自分で名づけて変更してもらえばOKです。それからパスURL（$src）ですが、今回は「子テーマ」に追加したフォルダ「js」を作りました、その中に「〇〇.js」というファイルを作りましたね。「get_stylesheet_directory_uri()」で子テーマのURLを出力できますので、get_stylesheet_directory_uri() . ‘/js/〇〇.js’となります。以上が基本的な流れです。

えっとここで問題が2点あります。

１つ目は「$handle」の部分。登録を解除する時にwp_deregister_script(‘ハンドル名’);という書き方をします。つまりハンドル名が分からないと登録を解除する事ができません。

2つ目は「$deps」の部分。元々のスクリプトが単体で動くのか、それともjQuery本体が必要なのかを知っておく必要があります。

この2点については長くなったので別記事で紹介する事にします。

しげぞうより:
2017年11月11日 3:07 PM
乃風様
高速化に関しては自分の理解できる範囲での施策が良いと思います。何かあったときに対処できないと結構困りますので。バックアップも必須です。
まず、PHPのバージョンを確認してPHPのバージョンを上げます。ロリポップのユーザー専用ページから「サーバーの管理」・「設定」と進み「PHP」設定⇒7.1を選択して「変更」でOKです。バージョンの変更で動かなくなるプラグインなどもある場合がありますのでこれは確認が必要です。
以下プラグイン。
・Autoptimize
複数の読み込みファイルをまとめる（有効化して設定が必要）
Autoptimizeの設定はHTMLオプション（HTMLコードを最適化）とCSSオプション（CSS コードを最適化）だけチェック。
・Unveil Lazy Load
画像の遅延読み込みをして負担を減らす（特に設定は必要なし）
・EWWW Image Optimizer
画像の圧縮。すでに有効化されているならOK。
それから.htaccessというファイルでブラウザのキャッシュに対応。
ブラウザのキャッシュに対応する
⇒https://affiliate150.com/browser-cache
とりあえず以上で結構上がるかなと思います。
乃風より:
2017年11月10日 12:13 PM
～しげぞう博士様～
いつもお世話になっております。
ちょっと気になり、本当に久しぶりに「PageSpeed Insights」で、今調べてみたところ、
パソコンが「Ｎｅｅｄｓ　Ｗｏｒｋ」で「７３/１００」でした。モバイルの方が「Ｐｏｏｒ」で「６１/１００」でした。
表示をもっとスピードアップさせるには、何をどうしたらいいのでしょうか？
どうぞよろしくお願いいたします。
しげぞうより:
2015年9月28日 9:27 AM
乃風様
コメントありがとうございます。WordPressの場合は「jquery.js」と「jquery-migrate.min.js」が標準で装備されていて、これが「head」部分で出力されます。なので、これらをフッターで出力するようにすれば表示速度の改善ができます。やり方としては中身をコピーする必要はありませんし、後程この２つの「jquery.js」と「jquery-migrate.min.js」は別の物で代用します。functions.phpで全て解決できますので、この記事は飛ばしてこちらの記事を参考にしてください。
⇒http://dokidome.com/pege-speed/1174/
乃風より:
2015年9月27日 7:24 PM
いつもお世話になっております。
｛「head」内で出力されているjsファイルを探す｝というしげぞうさんの記事の中で、｛ページのソースを見て「script type=’text/javascript’」という記述部分を探してみます。｝と書いてありましたが、これは、「jquery.js」と「jquery-migrate.min.js」の２つのことでしょうか？
それと、、「jquery.js」と「jquery-migrate.min.js」という部分の「’http://～」という部分をクリックして、その中身を各１つずつ合計２個を、１つのファイル（ロリポップのscroll-top.js）にコピペして「保存」すればいい・・・ということなのでしょうか？