WordPressのサイトスピード対策として、JavascriptやCSSなどのリソースの読み込みを遅らせる方法があります。
そこで便利なプラグインが「Scripts-To-Footer」。JavaScriptをフッターで読み込ませることで、サイトの表示速度を改善できます。
今回はScripts-To-Footerの使い方や注意点などを解説していくので、WordPressのサイトスピード改善を検討している方はチェックしてみてください。
Contents
Scripts-To-Footerは名前の通り、Javascriptを一括でサイトフッター（bodyタグの直前）で読み込ませることができるWordPressプラグイン。レンダリングで重要度の高いソースコードを先に表示し、クリティカルでないJSを後で読み込むことでサイトの表示速度を改善できます。
レンダリングをブロックしているリソースの記述箇所を、プラグインを導入するだけでコードを修正せずにまとめて簡単に移動できます。
最近のワードプレステーマはデフォルトで上記対策をしていることも多いですが、プラグインや計測ツールなど色々導入していると、知らず知らずのうちにレンダリングの妨げになっていることも多いです。
利用するプラグインが多くなればそれだけサイトが重くなるので、できればScripts-To-Footerを利用せずに自分でソースコードを調整した方が良い感じではあります。ですが自分でソースコードをいじれない方や、プラグインを入れ変えるたびに管理するのが手間な方にとってはとても便利なプラグインでしょう。
実際にPageSpeed Insightで確認してみると
Googleが提供するサイトスピード計測ができる「PageSpeed Insight」で確認してみると、下記の改善アドバイスを確認できました。
「レンダリングを妨げるリソースの除外」
ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。
PageSpeed Insight
指摘されたのは上記のようなファイルですね。JSを使っているプラグインや計測ツールの他に、子テーマのCSS、font-awesomeなど。
Googleさんから重要度の低いリソースは後で読み込め、と言われればそれに従うまでです……！
Scripts-To-Footerの導入方法を見ていきましょう！基本的に他のWordPressプラグインと同じです。
インストールと有効化
管理画面のメニュー「プラグイン」>「新規追加」から、「Scripts-To-Footer」で検索。「いますぐインストール」をクリックし、有効化します。
設定欄からインストールされてるか確認
インストールを完了すると、管理画面の設定欄に「Scripts-To-Footer」が追加されていればOKです。クリックして詳細を確認しましょう。
Scripts-To-Footerの使い方はかなりシンプルです。基本的にプラグインを導入したら、すぐにスクリプトをフッターに移動してくれます。
「Select which templates should not have scripts moved to the footer:」とあるので、JSをフッターに移動したくないページの場合はチェックを入れる感じですね。
- Blog Page（記事ページ）
- Search Results（検索結果ページ）
- 404 pages（404ページ）
- Post Type Archives（記事アーカイブページ）
- Taxonomy Archives（分類ページ ex タグ、カテゴリ）
- Author Archives（投稿者アーカイブページ）
- Other Archive Pages（その他アーカイブ）
ただし基本的にチェックをつけず、全てのページを対象にして良いかと思います。
ちなみに記事投稿・編集ページから、個別の記事ごとにプラグインのオン・オフも指定することが可能です。あまり利用機会はなさそうですが、固定ページをゴリゴリJSでいじる場合などでは使えるかも。
Scripts-To-Footerの注意事項
Scripts-To-FooterでJSを全てフッターに移動すると、予期しないエラーが起こるケースがあります。Javascriptをゴリゴリ使っているページで、JSの読み込みを遅らせるとサイトの挙動に影響でそうなページがあれば、上記した除外項目に個別にチェックをつけましょう！
またWordPressはjQueryが使われているプラグインやテーマが多いので、全てのスクリプトを後回しで読み込むとプログラムが動作しなくなることもあります。アニメーションが動かなくなったり、スクロールができなくなったり、ボタンが機能しなくなったり。
そうしたエラーが発生した場合は「Keep jQuery in the Header」にチェックをすれば、jQueryのみを移動対象から除外することができます。
実際に現在僕が使っているWordPressテーマ「stork」と相性が悪いようで、調べたところデザインが崩れたり、コンテンツが非表示になるブロガーさんもいたようです。
僕もプラグインを起動したら、TOPページの記事スライダーが消失しました（汗）。ですが「Keep jQuery in the Header」にチェックをつけたら正常に動作しましたよ！
Scripts-To-Footerを導入した後は、サイトのどこかでエラーが発生していないか、動作に問題ないかを必ずチェックしておくことをおすすめします。
サイトスピード対策で、さくっとJSをフッターに移動してレンダリング速度を上げたいのであれば、Scripts-To-Footerは簡単に導入できておすすめなプラグインです。
ただし導入後はサイト上でエラーが起きていないか、必ず確認しましょう。できればデータのバックアップも取っておくとより安心です。
バックアップについては下記のプラグイン「UpdraftPlus」がおすすめです↓
またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。
下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓
