【ブログの最初の表示が遅い！】WordPressでJavaScriptを非同期で読み込ませて高速化させる方法

ぺージの読み込みが1秒から3秒になると、ページからすぐに離脱してしまう人はなんと32%も増えると言われています。

本記事はJavaScriptファイルを非同期に読み込ませる方法となぜそれがブログの高速化になるのかを解説します。

方法だけ分かればいいという方は、「WordPressでJavaScriptを非同期で読み込ませて高速化させる方法」だけ読めばOKです。

WordPressでJavaScriptを非同期で読み込ませて高速化させる方法

JavaScriptファイルを非同期に読み込ませる方法とは、HTMLのスクリプトタグに「async属性」を追加します。

たむ

まあ、何を言っているのか分からない方も多いと思うので、とりあえずやり方を解説しますね。

プラグインを使う

WordPressでJavaScriptを非同期に読み込むには、「Async JavaScript」というプラグインを使います。

インストールして有効化したら、Enable Async JavaScriptで機能を有効にして、Async JavaScript Methodで「Async」にチェックを入れます。

これで、JavaScriptファイルの非同期は完了です。簡単でしたね。

JavaScriptを非同期で読み込むことがなぜ高速化につながるのか

一瞬で設定は終わりましたが、何をしているか知りたい方もいると思うので、詳しく説明しますね。

たむ

ただし、専門的な内容になるので、少し前置きをします。

何をやっているのかを理解するための前知識

JavaScriptの非同期の読み込みを理解するためには、以下の内容をおさえる必要があります。

上記の3項目をすでに分かっている方は、次項の「JavaScriptを非同期で読み込むことがなぜ高速化につながるのか」に進んでください。

①Webページの表示に使われるファイル

Webページはテキストファイル、画像ファイルという大きく分けて２種類のファイルで構成されます。

今回関係するのは、テキストファイルの1つである「HTML」と「JavaScript」です。

HTMLとはページの骨格となるコードが書かれたファイルで、JavaScriptはページに動きを与えるためのファイルです

たむ

ちなみにJavaScriptはページ表示のために必須ではありません。

②Webブラウザが読み込むHTMLコードの順序

WebブラウザはHTMLのコードを上から下に向かって読み込みます。

③WebブラウザはどのようにしてJavaScriptを読み込むのか

WebページにJavaScriptファイルを使う場合、HTMLファイルの中に<script  src=”（JavaScriptファイル名）”>と書くことでJavaScriptファイルを読み込むことができます。

WebブラウザがJavaScriptを見つければ、サーバーにリクエストを送り、サーバーから送り返されたJavaScriptを解析・実行します。

参考までにWebページ表示のフロー図を以下に載せておきます。

上記のフロー図をもっと詳しく理解したい方は以下の記事で説明しているのでこちらを参考にしてください。

【PV数を上げるために必要】Webページ表示の仕組みを理解してWordPressブログを高速化をしよう

ブログの高速化を何となくプラグインを入れて済ませていませんか？プラグインはやみくもに入れるとかえってデータ量が多くなったります。本記事を読めば、実際に高速化する処理が分かり、必要最小限のプラグインによるサイトの高速化ができるようになりので、是非参考にしてください！

tamsite.net

2021.03.06

JavaScriptを非同期で読み込むことがなぜ高速化につながるのか

たむ

それでは本題に入りましょう。

まず、JavaScriptを非同期で読み込むとは、「HTMLとJavaScriptの解析を互いに影響を与えあうことなく行う」ということだと考えてください。

先ほども、説明したとおり、WebブラウザはHTMLファイルを上から下に読み込みます。

途中で<script>タグを見つけると、JavaScriptの解析・実行が始まります。そして、JavaScriptの解析・実行の間はHTMLの解析がストップします。

つまり、HTMLの上の方に記述されているJavaScriptファイルがある場合、JavaScriptの解析・実行の時間だけサイトの表示が遅れるというわけです。

一方で、async属性を記述する、すなわちJavaScriptを非同期で読み込むことで、JavaScriptの解析を待つことなく、HTMLの解析を進めることができます。

お分かりのとおり、通常よりもJavaScriptの解析の時間分だけ、ページ表示までの時間が短くなっています。

async属性の特徴は次の2点です。

async属性を追加することのデメリットについて

ただし、async属性にはデメリットもあります。

上の図では、一つのJavaScriptしか読み込んでいませんが、例えば二つ読み込む場合は、片方がもう片方の基盤となるケースがあります（基盤となる方を「a.js」、もう片方を「b.js」とします）。

もし、a.jsよりも先にb.jsが実行されてしまうとエラーになり、b.jsはページに反映されなくなってしまいます。よって、複数のJavaScriptファイルを使う際にエラーになる場合は、JavaScriptのasync属性は使わない方が良いでしょう。

このデメリットが発生させずにHTMLの解析をとめずにJavaScriptを解析させる「defer属性」というものがありますが、これについてはまた次回の記事でご紹介します。

ここまで読んでいただきありがとうございました。また、今後もよろしくお願いします。