WEBサイトにアクセスした際に、なかなか表示されない重いーサイトにあたった経験があるとは思います(´・ω・｀)

特にWordPressサイトでよく感じるのですがが(´・ω・｀)

そのおかげでWordPressで運用するときは、WEBサーバのアクセス速度が高いレンタルサーバがオススメ！的な流れも…

話逸れましたね(；・∀・)

えっと、要するに「WEBサーバへのアクセス速度アップのためにJavaScriptの読み込みを見直してみよう」が今回の記事の内容になります。

HTML4時代からあったのですけど、script要素に「defer」や「async」属性を付与することで、HTMLソースの読み込みの妨害を任意に防ぐことができ、サイトのアクセス速度アップにつなげることができます(´・ω・｀)

当時は対応できるブラウザが少なかったのですが、現在新しいブラウザはほぼ対応していますので、日の目を見るようになったっていう感じでしょうか。

script要素内であればどこに明記しても良いです。
自分は、わかりやすい様に「script」の横に書いてます。

記入するときに注意点があって、defer要素は、src属性があって外部のファイルを読み込むときにだけ効果があります。 scriptタグ内にJavaScriptコードを書いている場合は、代わりに「async=”false”」を使うと同様の効果になるみたいです。

それで「デフォルト（指定なし）」と「defer属性」と「async属性」の３種類あるのですが、詳しい事はこちらのサイトさまでみてみてください(´・ω・｀)つ比較図もあるのでわかりやすいと思います。

「async属性」はアクセス速度が爆速にはなるのですけど、プログラム処理の順番がズレて、スクリプトエラーが発生しやすいのでスルー。
WordPressテーマフォルダ内にある「functions.php」用の「デフォルト（指定なし）」にしてあるものをすべて「async属性」にしてスピードアップするプログラムを紹介してる方がいましたが、ものすごく大きい落とし穴なので(ﾉД`)踏み落ちないように…

基本は「defer属性」をつけていって、CDNなどの外部サイトへリンクして読み込むもの（jquery.js）は、「デフォルト（指定なし）」にしています。これが無難でオススメ(´・ω・｀)

ただ「defer属性」もJavaScriptの並び順や処理方法でスクリプトエラーになることがあるので、そのときは「デフォルト（指定なし）」に変更しましょう。

この方法、ただコピペしただけではスクリプトエラーになりやすいので…
しっかり検証出来る状況であれば試してみてほしいーと思いました(´・ω・｀)中級者向けかな？

アクセス速度で困ってるときは是非！( ゜д゜)ノ

※20190313加筆
　 「async属性」はグーグルアナリティクスのコードにデフォで付いてますよね。プログラムエラーには注意しないといけませんが、外部のリンクで独立しているJavaScriptには良い指定なのかもしれません。とりまアマゾンアフェリエイト用のプログラムにも仕込んでみました(´・ω・｀)