【JavaScript】async、defer属性を使ってアクセス速度の向上化

  • CATEGORY : WEB関連

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

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

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

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

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

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

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

async、defer属性の記入例

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

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

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

結論として、
「defer属性」「デフォルト(指定なし)」を使うとだけ覚えてくれたらOKです!(;・∀・)

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

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

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

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

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

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

参照サイト:

記事TAG : ,


Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PROFILE

MeteorDrive ネコノ

戦略的な提案型デザイナーとして日夜奮闘しています( ゜д゜)ノ

詳細情報はこちら

Amazon SEARCH

ENTRY RANKING