Googleさんから「てめーのサイトおせーよ」と警告された@web_shufuです。ひとまず、外部JavaScriptファイルへのリンクをフッターに移動すべく、プラグインを使ってみました。
wp_headにある外部cssや外部JavaScriptファイルへのリンクは高速化の障害
WordPressのheader.phpに書かれている<?php wp_head(); ?>は、ページの表示に必要なcssやJavaScriptへのリンクをいっぱい吐き出します。
例えば、当サイトのある記事のソース(記事作成当時)を覗くと以下のようになっています。
<!-- ここからwp_head() -->
<link rel='stylesheet' id='crayon-css' href='https://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='https://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='https://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='https://webshufu.com/top/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<script type='text/javascript' src='https://webshufu.com/top/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='https://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='https://webshufu.com/top/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js?ver=2.4.1'></script>
<script type='text/javascript' src='https://webshufu.com/top/wp-includes/js/comment-reply.min.js?ver=3.6.1'></script>
<link rel='shortlink' href='https://webshufu.com/?p=2377' />
<!-- wp_head()ここまで -->
cssやJavaScriptへのリンクが結構な数あることがわかりますよね。
これがサイト高速化の障害になっています。
でも除去はできない
と言っても、<?php wp_head(); ?>を除去してしまうと、自分が期待する見た目・デザインを実現できません。
cssやJavaScriptへのリンクは残さないといけません。
しかしフッターに移動させることで高速化が可能
でも、JavaScriptへのリンクはフッターに移動させてもページの表示上問題ないのです。
[img-link url=”http://liginc.co.jp/programmer/archives/4423″ title=”リピート率に直結！ブラウザのレンダリング速度を高速化する５つのこと | 株式会社LIG”]
そういう訳で、外部JavaScriptへのリンクをフッター（</body?>の直前）に移動させます。
JavaScript to Footerプラグインで移動
外部JavaScriptへのリンクをフッター（</body?>の直前）に移動させる最も簡単な方法が、JavaScript to Footerプラグインの利用です。
WordPresss管理画面左サイドバーで「プラグイン」⇒「新規追加」と進み、検索窓に「JavaScript to Footer」と打ち込んで、インストール・そして有効化。
もう、たったこれだけで、<?php wp_head(); ?>が吐き出していたファイルがフッターに移動します。
正確には<?php wp_footer(); ?>が吐き出すようになります。
JavaScript to Footerプラグイン導入後、<?php wp_head(); ?>が吐き出すリンクは以下のように激減します。
<!-- ここからwp_head() -->
<link rel='stylesheet' id='crayon-css' href='https://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='https://webshufu.com/top/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<link rel='shortlink' href='https://webshufu.com/?p=2377' />
<!-- wp_head()ここまで -->
外部JavaScriptへのリンクだけでなく、フッターに移動しても問題ないcssへのリンクも移動させてくれるようです。
一方、<?php wp_footer(); ?>で吐き出されるリンクは激増です。
<!-- ここからwp_footer() -->
<script type='text/javascript' src='https://webshufu.com/top/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='https://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='https://webshufu.com/top/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js?ver=2.4.1'></script>
<script type='text/javascript' src='https://webshufu.com/top/wp-includes/js/comment-reply.min.js?ver=3.6.1'></script>
<link rel='stylesheet' id='toc-screen-css' href='https://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='https://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='https://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='https://webshufu.com/js/jquery.smoothScroll.js?ver=1.0'></script>
<script type='text/javascript' src='https://webshufu.com/js/jquery.scrollUp.min.js?ver=1.0'></script>
<script type='text/javascript' src='https://webshufu.com/js/jquery.menuSlideUpDown.js?ver=1.0'></script>
<script type='text/javascript' src='https://webshufu.com/js/jquery.mobilemenuToggle.js?ver=1.0'></script>
<script type='text/javascript' src='https://webshufu.com/top/wp-content/themes/twentytwelve/js/navigation.js?ver=1.0'></script>
<script type='text/javascript' src='https://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です。
高速化に役立ちそうな機能が満載です。
[img-link url=”http://blog.anekipedia.com/topics/wordpress%E3%81%8C%E6%97%A9%E3%81%8F%E3%81%AA%E3%82%8B%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3-head-cleaner.html” title=”WordPressが早くなるプラグイン Head Cleaner | たなブログ WordPress入門講座”]
設定項目の中に「 内の JavaScript を、フッタ領域に移動」というのがあり、ここにチェックを入れると、外部JavaScriptファイルへのリンクをフッターに移動してくれます。
ただ、私の場合は、高速化に関する知識がなさ過ぎて、他の機能は今のところ使えないので、採用を見送っています。
しかし、高速化のためのいろんな工夫をあれこれと試したい人にとっては便利なプラグインではないでしょうか。
多分プラグインなしでも対応できる
ところで、Wordpressには<?php wp_head(); ?>や<?php wp_footer(); ?>におけるcssやJavaScriptへのリンクの吐き出しをコントロールする関数があります。
それは、wp enqueue style、wp_enqueue_script、wp_enqueue_scripts等です。
私ももともと、自作のjsファイルへのリンクについては、wp_enqueue_script関数を使って、ヘッダーではなくフッターで読み込むようにしていました。
[img-link url=”https://webshufu.com/wordpress-wp_enqueue_script/” title=””]
もう少し勉強すれば、wp_enqueue_script関数を使って、自作のJavaScriptファイルだけでなく、プラグイン絡みの外部JavaScriptファイルをフッターで読み込ませることも出来そうです。
しかし時間がかかりそうなのでひとまず後回し。
まずはプラグインを使うことにしました。
最後に
JavaScriptをフッターに移動させるならJavaScript to Footerプラグインがお勧めです。