あなたのブログを今よりもっとサクサク動くようにしたくないですか？
ブログが遅いと、記事を期待して読んでくれている読者に不要なストレスを与えてしまいます。
本記事はJavaScriptファイルの実行を遅延化させる方法と、なぜそれがブログの高速化になるのかを解説します。
方法だけ分かればいいという方は、「WordPressでJavaScriptの実行を遅延化させて高速化する方法」だけ読めばOKです。
WordPressでJavaScriptの実行を遅延化させて高速化する方法
JavaScriptファイルの解析を遅延化させるためには、HTMLのスクリプトタグにdefer属性を追加します。
どうやって追加するんだよッ！ってつっこまれそうなので、とりあえずやり方を説明しますね。
プラグインを使う
WordPressでJavaScriptの実行を遅延化させるには、「Async JavaScript」というプラグインを使います。
インストールして有効化したら、Enable Async JavaScriptで機能を有効にして、Async JavaScript Methodで「Defer」にチェックを入れます。
これでJavaScriptファイルの解析の遅延化は完了です。簡単でしたね。
JavaScriptの実行の遅延化がなぜ高速化につながるのか
一瞬で終わりましたが、理屈を知りたい方もいると思うので解説します。
少し専門的な内容になります。
この先の内容は前回の記事をもとにしているので、まずはご覧ください。
以下の図は、通常（何も処理していない）のJavaScriptの読み込みと、<script>タグにdefer属性を追加したJavaScriptの読み込みを比較したものです。
お分かりのとおり、通常よりもJavaScriptの解析時間分だけページ表示までの時間が短くなっています。
defer属性の特徴は次の2点です。
①JavaScriptの解析を待つことなく、HTMLの解析が進む
②JavaScriptの解析が終わりHTMLの解析の完了を待ってJavaScriptが実行される
HTMLの解析を待たずして、JavaScriptの解析が進むため高速化されるというわけです。
async属性との違い
読み込むJavaSciptが一つだけの場合、前記事で紹介したJavaScriptを非同期で読み込ませるasync属性との違いが分かりずらいと思います。
よって、async属性とdefer属性を比較してみます。
async属性とdefer属性の違いは、JavaScript実行のタイミングです。
async属性⇒JavaScriptの解析が完了すると実行される
defer属性⇒JavaScriptの解析が完了した後、HTMLの解析を待って実行される
async属性は、複数のJavaScritpを読み込む場合でそれらが互いに関連しあっているときに問題が生じることがあります。
例えば、片方のJavaScript（以下a.js）の実行完了が、もう片方のJavaScript（以下b.js）の実行要件といった場合です。
この場合、async属性はエラーとなり、b.jsが反映されていないWebページが表示されてしまいます。しかし、エラーとならない場合は、async属性の方がページの表示までの時間短いですよね。
よって、複数のJavaScriptを読み込む場合、async属性とdefer属性を次のとおりに使い分けるのが理想的です。
JavaScriptの実行順序が問題となる場合⇒defer属性
JavaScriptの実行順序が問題とならない場合⇒async属性
ここまで読んでいただきありがとうございました。また、今後もよろしくお願いします。
コメント