GTmetrixで満点を取ろう。「Prefer asynchronous resources」重要度:中

Prefer asynchronous resourcesってなんだ?
解決できる?って話。

Prefer asynchronous resourcesとは

この意味は非同期リソースを使いましょう。
なんのこと?と思うかもしれませんが、これはJavascriptの問題です。

Javascript知ってますよね?
Wordpressは勿論、普通のHTMLでも使います。
このJavascriptさん。実は読み込みが開始されると、他の読み込み作業を中断させて
Javascriptを優先します。
これにより読み込みが体感的に遅くなります。

解決しよう

この対策方法でよく書かれているのが、Javascriptはヘッダーに全て書け。

ですが、これだけでは解決しません。
分かりますよね。最初に全てのJavascriptを処理させているだけだということが・・・。
なので読み込み速度は通常時と変わりません。

この解決策で大事なのは、最初の訳でも出た
「非同期リソースを使え」
です。

Javascriptを非同期化させるのがこれの解決策です。
解決策は、該当するJavascriptにちょっと手を加えます。

<script src="//example.com/js/abc.js"></script>

<script <span style="color: #ff0000;">async</span> src="//example.com/js/abc.js"></script>

非同期化させるJavascriptにasyncを付与するだけです。

注意したいのが、Jqueryなどに使うと動作がおかしくなります。
なので、どのJavascriptに使えるか確認しながらの修正になります。

終わりに

エラー出ているからって何でもかんでも非同期させると色々止まるので、
デザイン重視型のテーマ&テンプレート使っている人は無視しても良いですよ。