
HTMLソースコード(head内)で
外部コードの読込を行う際に
async、defer属性またはResource Hintsはどのように記述するとベストでしょうか。
※前回「jquery.min.js読込」と紛らわしい質問をしてしまったので、訂正して再掲載します。
例えば
googleアナリティクスのコード
https://www.googletagmanager.com/gtag/js?id=0000
など
シンプルな記述
<script type="text/javascript" src="https://www.googletagmanager.com/gtag/js?id=0000"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone">
asyncまたはdefer属性を追加する
async,deferどちらが最適か、もしくは必要ないか
<script type="text/javascript" async src="https://www.googletagmanager.com/gtag/js?id=0000"> <link rel="stylesheet" async href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone">
Resource Hintsの記述は必要か
Preconnect,DNS-Prefetch,Prefetch,Preload,Prerenderの指定がいまいち理解できません
<link rel="DNS-Prefetch Preconnect" as="script" href="https://www.googletagmanager.com"> <link rel="DNS-Prefetch Preconnect" as="stylesheet" href="https://fonts.googleapis.com"> <link rel="preload" as="script" href="https://www.googletagmanager.com/gtag/js?id=0000"> <link rel="preload" as="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"> <script type="text/javascript" async src="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"> <link rel="stylesheet" async href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone">
自分なりに調べた結果が上記内容ですが、
理解が足りない部分もあり、ベストな方法がわりかねます。
PageSpeed Insightsなど測定ツールに対して最適な記述方法が知りたいです。
詳しい方のご意見をいただければ幸いです。
よろしくお願いいたします。
こちらの質問が複数のユーザーから「過去に投稿した質問と同じ内容の質問」という指摘を受けました。



回答3件
あなたの回答
tips
プレビュー