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に使えるか確認しながらの修正になります。
終わりに
エラー出ているからって何でもかんでも非同期させると色々止まるので、
デザイン重視型のテーマ&テンプレート使っている人は無視しても良いですよ。