【WEBサイト】”async” と “defer” と “preconnect” と
Google様純正のWEBページ表示測定ツール
「PageSpeed Insights」
ページがすぐに表示される = SEO検索結果に有効
といわれています。
※実際には、どんなに速く表示されるWEBページでも簡単には1位、2位にならないです…
それでもユーザー様に快適に閲覧していただくためには、より速くWEBページが表示されるほうが絶対に良いです。
WEBデザイナー、システム開発者はいかに速くページを表示できるか、
試行錯誤をして最適な方法を模索しております。
私も時間があれば、勉強と情報収集を行っているのですが
いまいち理解ができなかったものに
（1）async
（2）defer
（3）preconnect
があります。
どれもページ速度を改善するための手法です。
以下、理解をするために調べてみたメモ記事です。
（1）async
（2）defer
どちらもJavaScriptを非同期で読みこませることができる属性です。
↓詳しい記事はこちら
https://sologaku.com/make-website/javascript-async-defer/
注意点として
・asyncのdeferどちらが最適か、理解が必要
・内部からの読込には指定する必要はない
・ソースコード内にscriptを記載する場所と、async,deferの指定を誤るとスクリプトが動作しなくなる
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>これが↓こう
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>（3）preconnect
Resource Hintsの種類で
「Preconnect」「DNS-Prefetch」「Prefetch」「Preload」「Prerender」
がある。
ページの表示と同時に外部サイトの情報を事前に取得しておくので速くなる。
↓詳しい記事はこちら
https://qwerty.work/blog/2019/02/dns-prefetch-preconnect-prefetch-prerender-preload.php
（1）（2）（3）をまとめると
https://ajax.googleapis.com
を名前解決と事前接続をしておき
https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js
を先読みして取得しておき
https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js
を非同期で実行する
って事であってる？
<link rel="DNS-Prefetch Preconnect" as="script" href="https://ajax.googleapis.com">
<link rel="preload" as="script" href="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js">
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>ちょっと自信がないので、もう少し調べて
後から記事を更新しておきます。
↓追記
色々とご意見をいただきましたが、
・よっぽどの事がない限り、そんな事をしても体感速度は速くならない
・むしろ動作不良の原因になるので、よけいな記述はしないほうがよい
・PageSpeed Insightsだけに対応するのであれば、他のハック的な手法を用いた方が良いだろう
つまり、何もしなくていいんじゃない？
という意見が多数でした。
勉強になりました。
ご意見ありがとうございました。
