JavaScriptの読み込みをフッターで行うWordPressプラグイン、JavaScript to FooterとHead Cleaner

更新

2013-10-09_1709
Googleさんから「てめーのサイトおせーよ」と警告された@web_shufuです。ひとまず、外部JavaScriptファイルへのリンクをフッターに移動すべく、プラグインを使ってみました。

wp_headにある外部cssや外部JavaScriptファイルへのリンクは高速化の障害

WordPressのheader.phpに書かれている<?php wp_head(); ?>は、ページの表示に必要なcssやJavaScriptへのリンクをいっぱい吐き出します。

例えば、当サイトのGoogleさんからの警告に関する記事のソース(記事作成当時)を覗くと以下のようになっています。

<!-- ここからwp_head() -->
<link rel='stylesheet' id='crayon-css'  href='http://webshufu.com/top/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css?ver=2.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='toc-screen-css'  href='http://webshufu.com/top/wp-content/plugins/table-of-contents-plus/screen.css?ver=1308' type='text/css' media='all' />
<link rel='stylesheet' id='tablepress-default-css'  href='http://webshufu.com/top/wp-content/plugins/tablepress/css/default.min.css?ver=1.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='wp-pagenavi-css'  href='http://webshufu.com/top/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<script type='text/javascript' src='http://webshufu.com/top/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://webshufu.com/top/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"2.4.1","is_admin":"0","ajaxurl":"http:\/\/webshufu.com\/top\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"\u8cbc\u308a\u4ed8\u3051\u306b\u30b3\u30d4\u30fc\u3001%s\u306b%s\u3092\u62bc\u3057\u3066\u3001","minimize":"Click To Expand Code"};
/* ]]> */
</script>
<script type='text/javascript' src='http://webshufu.com/top/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js?ver=2.4.1'></script>
<script type='text/javascript' src='http://webshufu.com/top/wp-includes/js/comment-reply.min.js?ver=3.6.1'></script>
<link rel='shortlink' href='http://webshufu.com/?p=2377' />
<!-- wp_head()ここまで -->

cssやJavaScriptへのリンクが結構な数あることがわかりますよね。

これがサイト高速化の障害になっています。

でも除去はできない

と言っても、<?php wp_head(); ?>を除去してしまうと、自分が期待する見た目・デザインを実現できません。

cssやJavaScriptへのリンクは残さないといけません。

しかしフッターに移動させることで高速化が可能

でも、JavaScriptへのリンクはフッターに移動させてもページの表示上問題ないのです。

そういう訳で、外部JavaScriptへのリンクをフッター(</body?>の直前)に移動させます。

外部JavaScriptへのリンクをフッター(</body?>の直前)に移動させる最も簡単な方法が、JavaScript to Footerプラグインの利用です。

WordPresss管理画面左サイドバーで「プラグイン」⇒「新規追加」と進み、検索窓に「JavaScript to Footer」と打ち込んで、インストール・そして有効化。

もう、たったこれだけで、<?php wp_head(); ?>が吐き出していたファイルがフッターに移動します。

正確には<?php wp_footer(); ?>が吐き出すようになります。

JavaScript to Footerプラグイン導入後、Googleさんからの警告に関する記事で、<?php wp_head(); ?>が吐き出すリンクは以下のように激減します。

<!-- ここからwp_head() -->
<link rel='stylesheet' id='crayon-css'  href='http://webshufu.com/top/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css?ver=2.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='wp-pagenavi-css'  href='http://webshufu.com/top/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<link rel='shortlink' href='http://webshufu.com/?p=2377' />
<!-- wp_head()ここまで -->

外部JavaScriptへのリンクだけでなく、フッターに移動しても問題ないcssへのリンクも移動させてくれるようです。

一方、<?php wp_footer(); ?>で吐き出されるリンクは激増です。

<!-- ここからwp_footer() -->
<script type='text/javascript' src='http://webshufu.com/top/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://webshufu.com/top/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"2.4.1","is_admin":"0","ajaxurl":"http:\/\/webshufu.com\/top\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"\u8cbc\u308a\u4ed8\u3051\u306b\u30b3\u30d4\u30fc\u3001%s\u306b%s\u3092\u62bc\u3057\u3066\u3001","minimize":"Click To Expand Code"};
/* ]]> */
</script>
<script type='text/javascript' src='http://webshufu.com/top/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js?ver=2.4.1'></script>
<script type='text/javascript' src='http://webshufu.com/top/wp-includes/js/comment-reply.min.js?ver=3.6.1'></script>
<link rel='stylesheet' id='toc-screen-css'  href='http://webshufu.com/top/wp-content/plugins/table-of-contents-plus/screen.css?ver=1308' type='text/css' media='all' />
<link rel='stylesheet' id='tablepress-default-css'  href='http://webshufu.com/top/wp-content/plugins/tablepress/css/default.min.css?ver=1.1.1' type='text/css' media='all' />
<script type='text/javascript' src='http://webshufu.com/top/wp-content/plugins/table-of-contents-plus/front.js?ver=1308'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.0'></script>
<script type='text/javascript' src='http://webshufu.com/js/jquery.smoothScroll.js?ver=1.0'></script>
<script type='text/javascript' src='http://webshufu.com/js/jquery.scrollUp.min.js?ver=1.0'></script>
<script type='text/javascript' src='http://webshufu.com/js/jquery.menuSlideUpDown.js?ver=1.0'></script>
<script type='text/javascript' src='http://webshufu.com/js/jquery.mobilemenuToggle.js?ver=1.0'></script>
<script type='text/javascript' src='http://webshufu.com/top/wp-content/themes/twentytwelve/js/navigation.js?ver=1.0'></script>
<script type='text/javascript' src='http://webshufu.com/top/wp-content/plugins/bj-lazy-load/js/combined.min.js?ver=0.6.10'></script>
<!-- Generated in 0.369 seconds. Made 19 queries to database and 22 cached queries. Memory used - 35.26MB -->
<!-- Cached by DB Cache Reloaded Fix -->
<!-- ここまでwp_footer() -->

もともと、<?php wp_head(); ?>が吐き出していたリンクが、<?php wp_footer(); ?>で吐き出されるようになったのがわかります。

これで多少とも高速化されていくはず?

Head Cleanerプラグインで移動

外部JavaScriptファイルへのリンクをフッターに移動してくれるプラグインにはもう1つあります。

それはHead Cleanerです。

高速化に役立ちそうな機能が満載です。

設定項目の中に「 内の JavaScript を、フッタ領域に移動」というのがあり、ここにチェックを入れると、外部JavaScriptファイルへのリンクをフッターに移動してくれます。

ただ、私の場合は、高速化に関する知識がなさ過ぎて、他の機能は今のところ使えないので、採用を見送っています。

しかし、高速化のためのいろんな工夫をあれこれと試したい人にとっては便利なプラグインではないでしょうか。

多分プラグインなしでも対応できる

ところで、Wordpressには<?php wp_head(); ?>や<?php wp_footer(); ?>におけるcssやJavaScriptへのリンクの吐き出しをコントロールする関数があります。

それは、wp enqueue stylewp_enqueue_scriptwp_enqueue_scripts等です。

私ももともと、自作のjsファイルへのリンクについては、wp_enqueue_script関数を使って、ヘッダーではなくフッターで読み込むようにしていました。

もう少し勉強すれば、wp_enqueue_script関数を使って、自作のJavaScriptファイルだけでなく、プラグイン絡みの外部JavaScriptファイルをフッターで読み込ませることも出来そうです。

しかし時間がかかりそうなのでひとまず後回し。

まずはプラグインを使うことにしました。

最後に

JavaScriptをフッターに移動させるならJavaScript to Footerプラグインがお勧めです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です