前回はWordPressの高速化【CSS編】をご紹介しました。
今回は【Javascript編】ということで、Javascript周りの高速化・軽量化についてご紹介します。
1,レンダリングをブロックするJavaScriptを除去
前回、PageSpeed Insightsで管理しているサイトの状態を調べました。前回はここでCSSの遅延の原因について対策しましたが、今回はJavascript側の対策を行います。
CSSの時はsync JS and CSSというプラグインを使ってブロックの解消を行ないました。プラグイン名を見てわかるかと思いますが、Javascriptのブロック解消も出来ます。
[Load Javascript asynchronously]にチェックを入れるだけです。
ただこのプラグイン、どうもJavascriptの方はうまく動いてくれず、僕の方はけっこう不具合が出ました。
そこでJavascript側はAsynchronous Javascriptというプラグインを使って解消しました。
こちらはsettingとかはなく、プラグインをインストールして有効にするだけです。
【余談】
Head Cleanerという<head>内のCSSとJavascriptを整理してくれるプラグインがあります。
Head Cleaner
https://ja.wordpress.org/plugins/head-cleaner/
最初これ便利だなぁと思って使ってみたんですが、PageSpeed Insightsの点数がHead Cleanerをインストールする前より、インストール後の点数の方が下がってしまう事態に。よく見るとJavascriptのブロックはほとんど消えたんだけど、CSSのブロックが復活してて、結果的に点数が下がってしまいました。いろいろ試したけど、僕はインストールを諦めました。割とこれも効果がありそうなので参考までに。
2, インラインで記述
レンダリングを妨げる JavaScript を削除する
https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS
ここで紹介されているように「小さな JavaScript をインライン化する」とあります。
小さなJavascriptってどこまでが小さいねん！って一人突っ込みを入れてみても意味はないですが、jQueryプラグインの一部や、アナリティクスタグなどは外部参照などにしなくてもいいのではないかと（ソースをキレイにするのにmain.jsにまとめる人もいますが）
3, async属性を使ってJavascriptの読込を遅延させる
上のプラグインでJavascriptのブロックを解消出来ますが、中にはエラーとかが出て、プラグインを入れられないって人もいると思います。その時はasync属性を使ってみましょう。上のプラグインはJavascriptがDOM構成の後に実行されるようにするためのものです。async属性も同じで、外部参照のJavascriptを読込ませる時にこの属性を付与してあげることで、非同期でJavascriptを読込ませることができます。
|
1 |
<script src="<?php bloginfo('template_url'); ?>/js/jquery.meanmenu.js" async></script> |
ただJavascriptを非同期で読み込む際、読み込む順序を注意しないと適切なページの依存関係で無くてってしまうので注意が必要です。
次回は【画像】について高速化(軽量化)についてご紹介します。
