サイト表示に重要な高速化。WordPressではサイトの表示時間が重くなりがちですよね。
なかなかサイトが表示されないとユーザはページから離脱してしまい、機会ロスにも繋がります。
一番の原因はWordPress自体の動作が遅かったりしますが、
ブラウザ側での1つの原因として、外部JavaScriptファイルの読み込みによる、レンダリングブロックが挙げられます。
JavaScriptファイルを読み込んでいる最中は、ブラウザのページ表示が一時的に止まるため、その分表示に時間がかかってしまいます。
ページの表示は、早ければ早いほど良いものです。
今回はブラウザのレンダリングブロック回避に有効な、スクリプトの配置方法をご紹介します。
body閉じタグ直前でJavaScriptファイルを読み込む
JavaScriptファイルのレンダリングブロック問題で、一般的な対処方法は
headタグ内でファイルを読み込むのではなく、bodyの閉じタグ直前でファイルを読み込むのが効果的です。
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</body>
</html>
headタグ内で読み込んでしまうと、ページ内容を読み込む前にレンダリングブロックが発生してしまうので、
サイトに訪れたユーザは画面が真っ白な状態で待たされることになります。
scriptタグはheadタグ以外にも、bodyタグ内であればどこでも配置できるので、
ページの最後で読み込むことで、ページの読み込みが速く感じさせることができるのです。
WordPressでも同じことをすることで、ブラウザのレンダリングブロックを回避します。
テーマのbody閉じタグの直前にscriptタグを配置しましょう。
<?php wp_footer(); ?>
<script src="path/to/jquery.js"></script>
<script src="path/to/script.js"></script>
</body>
</html>
と言いたいところですが、
これだとクソですね。 全然イケてないです。
もし、</body> が複数のファイルで記述されているとしましょう。
しかし、jQueryはサイト全体で読み込みたい。
個別のファイル一つ一つに記述していたのでは、とても管理が面倒です。
また、ケアレスミスも起きやすい。
できれば wp_footer の中で出力できれば、きれいなコードを保てます。
となれば、次に wp_footer でscriptタグを出力する方法をご紹介します。
wp_footer でscriptタグを出力するには、functions.phpに出力させる処理を追加する必要があります。
おおまかな流れは2つで、JSファイルの追加処理の定義と、wp_footerへの登録です。
functions.php
<?php
// JSファイル追加の関数
function my_load_widget_scripts() {
// Twitterウィジェット用のJSの読み込み
wp_enqueue_script('widgets_js', '//platform.twitter.com/widgets.js', array());
// はてブボタン用のJSを読み込み
wp_enqueue_script('hatebu', 'http://b.st-hatena.com/js/bookmark_button.js', array());
}
// wp_footerに処理を登録
add_action('wp_footer', 'my_load_widget_scripts');
add_action('wp_footer', 関数名) で、wp_footerへの出力登録をします。
注目すべきは、my_load_widget_scripts 内で使用している、 wp_enque_scripts という関数です。
wp_enqueue_script でscriptタグを出力する
wp_enqueue_script は、scriptタグを出力します。
WordPressで推奨されているscriptタグの出力方法です。
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
$handle
スクリプトを識別するための名称。初期値はなし。
$src
スクリプトのURLを指定。初期値は false 。
jQueryやjQuery UIなどの WordPress に含まれ登録されているデフォルトスクリプトを指定することも可能。
$deps
このスクリプトより前に読み込まれる必要があるスクリプトを指定。初期値は array() 。
$ver
scriptタグのクエリストリングとしてファイルパスの最後に連結される、スクリプトのバージョン番号を指定。初期値は false 。
$in_footer
スクリプトは通常 HTMLの headタグ内に置かれるが、もしこのパラメータが true の場合 body終了タグの前に配置される。 初期値は false 。
※ add_action('wp_footer', 関数名) で wp_footer に出力設定する場合は、$in_footer のフラグは必要ありません。
実際の出力結果を見てみましょう。
<script type='text/javascript' src='//platform.twitter.com/widgets.js?ver=4.5.3'></script>
<script type='text/javascript' src='http://b.st-hatena.com/js/bookmark_button.js?ver=4.5.3'></script>
</body>
</html>
やりました、出力できました。
ん。
いや、ちょっと待ってください。
はてブボタンのscriptタグにasync属性が無いじゃないですか。
実は wp_enqueue_script には属性を追加するAPIがありません。
最後の仕上げに async属性を追加する方法を紹介しましょう。
script_tag_loaderでタグの属性を追加する
async属性の説明は省きますが、HTMLに属性を追加できないと、柔軟性に欠けます。
WordPressでは wp_enqueue_script を実行するタイミングで、処理を実行する仕組みがあります。
それが、script_loader_tag です。
<?php
// ハンドル名 hatebu の wp_enqueue_script に async 属性を追加する。
function my_addasync_hatebu_enqueue_script( $tag, $handle ) {
if ( 'hatebu' !== $handle ) { return $tag; }
return str_replace( ' src', ' async="async" src', $tag );
}
// スクリプト出力時に処理
add_filter( 'script_loader_tag', 'my_addasync_hatebu_enqueue_script', 10, 2 );
この script_loader_tag は、scriptタグを文字列として扱うことができます。
そのため、str_replace でasync属性を追加することが出来ます。
<?php
str_replace( ' src', ' async="async" src', $tag );
ここにきて文字列置換というのが、なんとも低レイヤーな対応なんですが、これが一番スマートなやり方だと思います。
では出力結果を見てみましょう。
<script type='text/javascript' src='//platform.twitter.com/widgets.js?ver=4.5.3'></script>
<script type='text/javascript' async="async" src='http://b.st-hatena.com/js/bookmark_button.js?ver=4.5.3'></script>
</body>
</html>
よーし、満足だ！
いかがでしたでしょうか。
wp_footerを使いこなすことで高速化を手助けすることが出来ます。
特に、SNSボタンの外部JSの読み込みをwp_footerで行うことで、
高速化&使いまわしができるコードになります。
テーマを作成するときにも重宝すると思いますよ！
SNSボタン設置は次の記事が参考になるので、あわせて読むことをおすすめします。