HTMLソースコード（head内）で
外部コードの読込を行う際に
async、defer属性またはResource Hintsはどのように記述するとベストでしょうか。

※前回「jquery.min.js読込」と紛らわしい質問をしてしまったので、訂正して再掲載します。

例えば
googleアナリティクスのコード
https://www.googletagmanager.com/gtag/js?id=0000

googleフォント
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" 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など測定ツールに対して最適な記述方法が知りたいです。

詳しい方のご意見をいただければ幸いです。
よろしくお願いいたします。

退会済みユーザー

2023/02/28 13:35

一番下のコード部分4行目誤） <link rel="preload" as="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"> 正） <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"> でした。

javahack

2023/02/28 19:00

質問は編集できるので、コメント欄に修正箇所を載せるのではなく質問を修正しましょう。

maisumakun

2023/02/28 23:26

プリロード・プリフェッチについては、前回回答したとおりです。

退会済みユーザー

2023/03/01 02:52

ご指摘ありがとうございます。直接修正しました。スクリプトに関して何も指定しないが良いと理解しました。 CSSの外部読込についてご意見ございましたら教えてください。

m.ts10806

2023/03/01 05:04 編集

前回の回答通り「最適というのは要件次第」前回ついた回答以上のものが出てくることはないです。ずっと何をもって最適とするかの基準が提示されていません。基準が提示できない場合、そもそも外部仕様部分や非機能要件が曖昧の状態とも言えます。なので、公式のCDNの記述コピペで考えることなく間違いの起こりにくいやり方を提案したのですが、何にこだわっているのかずっと分からない。

miyabi_pudding

2023/03/01 07:52

何を最適とするのでしょうか？ページビューパフォーマンスを上げたいということでしょうか？

退会済みユーザー

2023/03/01 07:54

おっしゃる通りページビューパフォーマンスを上げるための最適な記述を教えていただきたいです。

miyabi_pudding

2023/03/01 07:59

であれば、質問本文を修正し、そのように記載してください。また、PageSpeed Insightsで高得点を目指すなどの指標もあれば、具体的に、 PageSpeed Insightsの検査時に、どの点を指摘されたのか、指摘された部分のどの部分を改善したいのか、も明記してください。みなさんがおっしゃる通り、”最適”の一言では、回答は得られません。なぜなら、要件によって、"最適"なものは変わるからです。（表示速度を優先しない場合も多く存在する、ということです）

m.ts10806

2023/03/01 08:05 編集

個人的な意見ですが、 HTML描画に最もパフォーマンスの比重が割かれるので、何とか尽くしてきてそれでも更なるパフォーマンスを求めるときに検討すべきとも思います（前提や背景も記載されてないので分からないから、更に応えようがなくなります）そういった意味でもstyleだからscriptだからと違いはないですし「要件が変わった」印象がないため、そのような修正依頼がついているわけです。既存回答の「何も指定せず読み込んで」で必要十分です。（同じ回答を繰り返されている時点で色々と気づいてほしい）

行動規範の内容に同意します

回答3件

ベストアンサー

まず、PageSpeed Insights（以下"PSI"）を使った上でのパフォーマンス向上（ようは高得点をとりたい）という観点でのみの回答となることをご了承ください。
（現実的なUXはあまり考えないということです）

googleアナリティクスのコードに関して

残念ながら、defaer属性などを使って読み込もうとも、ほとんどの場合、指摘が入ります。
（レンダリングブロッキングリソースとして）
なので、JSにて、後読み込みなどをしますが、
それでは、Analyticsの使用用途上、意味をなさないものになる可能性があります。
なので、究極、バックエンドなどで、
ユーザーエージェントにLight houseが含まれている場合、Analyticsコードの読み込みを入れない、
という方法をとるしかなくなります。
ただし、PSIで高得点を取るだけの処理なので、やっても意味を成さなと思います。
（結局一般ユーザーは、Analyticsを読み込むので、UXは変わらないので）

googleフォントについて

これは、二点の処理で、パフォーマンスの向上を見込めます。

読み込むフォントは必ずサブセットとする

フルで日本語フォントを読み込んでいる限り、どのような読み込み方でもPSIでは指摘が入ります。
よって、サブセット、ようは、使用されている文字のフォントのみを読み込む手法です。

JSなどで、使用されている文字を検知し、サブセットに適用する

上記とほぼ同義ですが、流し文字などは、サブセットを予め用意は難しいと思われるので、
JSによる動的処理が望ましいでしょう。
Googleフォントは、URLパラメータによって、サブセットとしてフォントを読み込むことが可能ですので。

ようは、ページ内で使用されていないリソースは読み込むなというのが、PSIの採点方針ということです。

CSSの読み込みに関して

これは、ファーストビューとセカンドビューによって、処理を変えるのが常套手段となります。
ファーストビューにおいてのレンダリングにおいては、レンダリングブロッキングリソースの指摘がとかく入りますので、
HTMLに直接style要素として配置するのが、一番指摘を回避できます。
ただし、となると、CSSの修正などが入った場合、全てのHTMLを修正する必要があるので、
バックエンドで、動的に読み込んで、style要素として出力するか、
Webpackなどを使って、ビルドするようにして、HTMLをアップロードするなどの手法がいいでしょう。

セカンドビューのCSSに関しては、スクロールされた段で、JSによって、動的にCSSを読み込み、反映させる、といった手法が、指摘を受けにくくなる方法となります。

JavaScriptファイルに関して

CSSと考え方は似ていますが、
とかく、レンダリングブロックをしなければ、読み込みなどを工夫すれば、指摘を回避できます。
（バックエンドで、HTMLに直接埋め込み、や、処理を使用する段で初めて動的にスクリプトを読み込む、など）
ただし、前述した通り、Webページ内で使用されていないソースコードを入れている限りはほぼ確実に指摘されるので、とかく、そのWebページで使用されているかどうかを意識して、読み込むのを意識することが大事です。

jQueryに関して

究極をいうと、jQueryは使用している限り、PSIから指摘を受けます。
なぜなら、そのWebページで使用していないソースコードが大量にあるからです。
クリーンに、全く指摘を受けないようにしたいのならば、脱jQueryをしましょう。

ご覧になったら、分かる通り、PSIで高得点を取ることが、UXの最適となるとは限らないことがお分かりになったと思います。
ただ、PSIはかなり厳しく採点をしていますので、クリアするための努力が、技術の向上につながることもしばしばですので、
挑戦されることは、とてもよいことだと思います。

以上になります。

投稿2023/03/01 08:45

miyabi_pudding

総合スコア9555