Scripts-To-Footerの使い方・設定方法まとめ!JSをフッターに一括移動できるプラグイン

Yasu
こんにちは!「Tekito+Style.me」を運営しているYasu(@98nasi_nori)です。普段は都内でWebディレクターなどをしています。

WordPressのサイトスピード対策として、JavascriptやCSSなどのリソースの読み込みを遅らせる方法があります。

そこで便利なプラグインが「Scripts-To-Footer」。JavaScriptをフッターで読み込ませることで、サイトの表示速度を改善できます

今回はScripts-To-Footerの使い方や注意点などを解説していくので、WordPressのサイトスピード改善を検討している方はチェックしてみてください。

Scripts-To-Footerってどんなプラグイン?

Scripts-To-Footerは名前の通り、Javascriptを一括でサイトフッター(bodyタグの直前)で読み込ませることができるWordPressプラグイン。レンダリングで重要度の高いソースコードを先に表示し、クリティカルでないJSを後で読み込むことでサイトの表示速度を改善できます。

レンダリングをブロックしているリソースの記述箇所を、プラグインを導入するだけでコードを修正せずにまとめて簡単に移動できます

最近のワードプレステーマはデフォルトで上記対策をしていることも多いですが、プラグインや計測ツールなど色々導入していると、知らず知らずのうちにレンダリングの妨げになっていることも多いです。

利用するプラグインが多くなればそれだけサイトが重くなるので、できればScripts-To-Footerを利用せずに自分でソースコードを調整した方が良い感じではあります。ですが自分でソースコードをいじれない方や、プラグインを入れ変えるたびに管理するのが手間な方にとってはとても便利なプラグインでしょう。

Scripts To Footer

実際にPageSpeed Insightで確認してみると

Googleが提供するサイトスピード計測ができる「PageSpeed Insight」で確認してみると、下記の改善アドバイスを確認できました。

PageSpeed Insight

「レンダリングを妨げるリソースの除外」
ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。
PageSpeed Insight

PageSpeed Insight

指摘されたのは上記のようなファイルですね。JSを使っているプラグインや計測ツールの他に、子テーマのCSS、font-awesomeなど。

Googleさんから重要度の低いリソースは後で読み込め、と言われればそれに従うまでです……!

Scripts-To-Footerの導入方法

Scripts-To-Footerの導入方法を見ていきましょう!基本的に他のWordPressプラグインと同じです。

インストールと有効化

Scripts-To-Footer

管理画面のメニュー「プラグイン」>「新規追加」から、「Scripts-To-Footer」で検索。「いますぐインストール」をクリックし、有効化します。

設定欄からインストールされてるか確認

Scripts-To-Footer

インストールを完了すると、管理画面の設定欄に「Scripts-To-Footer」が追加されていればOKです。クリックして詳細を確認しましょう。

Scripts-To-Footerの使い方

Scripts-To-Footerの使い方はかなりシンプルです。基本的にプラグインを導入したら、すぐにスクリプトをフッターに移動してくれます

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(その他アーカイブ)

ただし基本的にチェックをつけず、全てのページを対象にして良いかと思います。

Scripts-To-Footer

ちなみに記事投稿・編集ページから、個別の記事ごとにプラグインのオン・オフも指定することが可能です。あまり利用機会はなさそうですが、固定ページをゴリゴリJSでいじる場合などでは使えるかも。

Scripts-To-Footerの注意事項

Scripts-To-FooterでJSを全てフッターに移動すると、予期しないエラーが起こるケースがあります。Javascriptをゴリゴリ使っているページで、JSの読み込みを遅らせるとサイトの挙動に影響でそうなページがあれば、上記した除外項目に個別にチェックをつけましょう!

またWordPressはjQueryが使われているプラグインやテーマが多いので、全てのスクリプトを後回しで読み込むとプログラムが動作しなくなることもあります。アニメーションが動かなくなったり、スクロールができなくなったり、ボタンが機能しなくなったり。

Scripts-To-Footer

そうしたエラーが発生した場合は「Keep jQuery in the Header」にチェックをすれば、jQueryのみを移動対象から除外することができます。

実際に現在僕が使っているWordPressテーマ「stork」と相性が悪いようで、調べたところデザインが崩れたり、コンテンツが非表示になるブロガーさんもいたようです。

Tekito Style

僕もプラグインを起動したら、TOPページの記事スライダーが消失しました(汗)。ですが「Keep jQuery in the Header」にチェックをつけたら正常に動作しましたよ!

Scripts-To-Footerを導入した後は、サイトのどこかでエラーが発生していないか、動作に問題ないかを必ずチェックしておくことをおすすめします

Scripts-To-Footerを有効活用しよう!

サイトスピード対策で、さくっとJSをフッターに移動してレンダリング速度を上げたいのであれば、Scripts-To-Footerは簡単に導入できておすすめなプラグインです。

ただし導入後はサイト上でエラーが起きていないか、必ず確認しましょう。できればデータのバックアップも取っておくとより安心です。

バックアップについては下記のプラグイン「UpdraftPlus」がおすすめです↓

バックアップ専用プラグインUpdraftPlusの使い方・設定方法まとめ

2019-09-11

またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。

WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ

2019-11-30








Aboutこの記事を書いた人

「Tekito+Style.me」の中の人。都内で働くWebディレクター/マーケター。早稲田大学卒。時々旅人な27歳です。主にサービスの企画・ディレクション、グロースハック、SEO対策、UX設計などしてます。開発やデザインも細々と挑戦してます… 学生時代は世界一周してました(過去約40ヶ国訪問)。お気に入りの国はベトナム、モロッコ、台湾など。南国のビーチでまったり余生を過ごしたい派。好物はビールと生ハム、あとカニカマ。