HTMLソースコードで「jquery.min.js」読込を指定する最適な記述方法を教えてください

Question

HTMLソースコード（head内）で
jquery.min.jsを読込ための最適な記述はどのような物でしょうか。

もっともシンプルな記述はこちらになると思います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js">

asyncまたはdefer属性を追加する

async,deferどちらが最適か、もしくは必要ないか

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

Resource Hintsの記述は必要か

Preconnect,DNS-Prefetch,Prefetch,Preload,Prerenderの指定がいまいち理解できません

自分なりに調べた結果

以下の記述ですが、理解が足りない部分もあり、最適なのかわかりません。

<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>

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

Answer 1

何をもって最適とするかは要件次第ですが、閉じたネットワーク内でなく、ライブラリ本体をいじる用途がないのなら、CDNのページから得られるコードをそのままコピペするのが最も問題が起きにくいと思います。（何も考えなくて良いという意味）
https://releases.jquery.com/

機能を全て使わないならslimで充分。
要件次第なので「常にこうすべき」というのはないです。

※採用の候補としてCDNがなかったため、1つの候補としてご参考まで。

Comments

[m.ts10806]

「ご意見を」ということで意見を言ったわけだが、理由のコメントなく「質問に対する回答になってない」と指摘されてもどうしたらいいんでしょうね。

[退会済みユーザー]

「質問に対する回答になってない」
↑私はそのようなコメントを投稿しておりませんが、何か気に障るような事がありましたでしょうか。

[m.ts10806]

いえ、回答についた「修正依頼」に対するコメントです。
誰がこの修正依頼をしたかは公開されてないため、「どういう理由だろうか」と気に病んでいる状態です。
私としては1歩踏み込んで考えた結果「適切なやり方」としての提案を書いたつもりなのですが。
中には何かの勘違いや思い込みで個人攻撃を続ける人もいますから、そういう不純なユーザの迷惑行為が困るなと。運営には定期的に相談してて、対応もされているみたいですがね。そういう人たちの本質は変わらないので、一時おさまったとしても結局繰り返される。

[退会済みユーザー]

私ですよ。理由の説明が必要なほどとは思いませんでした。
最適な記述というのは、使い方によるだけかと思いますが、質問者さんが気にしている範囲をあまりに無視した回答になっているため、回答になっていないと思いました。
回答とするには、少なくともasync、defer、Resource Hintsの使い分けに対する言及が必須かと思います。

[m.ts10806]

ご指摘ありがとうございます。
主題はあくまで「jQueryの読み込み記述はどうするのが良いか」なので、既存回答である程度言及されている事項まではなくて良いと判断し、別の視点での回答にしました。
つまり、最適＝間違いの起こりにくい　と解釈しています。
要件が具体的でないため、そのような自己解釈も可との認識。

async、defer、Resource Hintsについてはあくまで「質問者が調べた中で出てきた機能」と思いますし、その中でCDN利用が出てきていなかったので提案の1つとして参考にしてもらえればと思います。

[退会済みユーザー]

残念ですが、その範囲に言及がない回答を「質問に対する回答」になっているとは思いません。

そもそもCDNにするかどうかなんて入れ方次第で変わりますし(まとめてminifyするのかESモジュールにするのかなど)、CDN自体の信頼性に依存することにもなり一長一短で、提案もおこがましいと思います。何よりもそこは「聞かれていない」のですよ。

必須な内容を省き、不要な内容を加えただけで「提案」とするだけだとそういう結論になります。別に回答のつもりがないのなら、無視してください。

[m.ts10806]

どうもうまくお互い伝わってない部分があるように思うのですが、必須かどうかは投稿の解釈によるのではないでしょうか。
少なくとも「jquery.min.jsを読込ための最適な記述」の1つとして「CDN公式からコピペする」は間違ってないと思うのですが、
質問内容に不明点等あるのでしたら、そのあたりも質問者にヒアリングして確定させたうえでご自身が回答されると良いのではと。解決済みになっているからと、既存回答のどれも評価がされてないですし、より良い回答なのであれば幾らでも意見としてあった方が後から見る人の参考になります。（dameoさんの思い込みも多少あるように思いますし）

[退会済みユーザー]

私の質問の内容が至らない点があり、申し訳ございませんでした。

jquery.min.js
はあくまで一例として挙げた物となります。

質問の意図としては
ページ読込を最適（特にPageSpeed Insightsなど測定ツールに対して）にする場合
async、defer属性またはResource Hintsはどのように記述すると良いかという点でした。

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

googleフォント
https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone

など、外部のソースコードの読込を行う場合の例を知りたいという内容でした。
説明が足りず申し訳ございません。

[m.ts10806]

yamada0316さん
了解です。
前提条件として必要と思いますし、今後この投稿が何かしらで参考にされることも考慮して、
質問本文に追記しておいてもらえると助かります。

[退会済みユーザー]

承知しました。
ありがとうございます。

[m.ts10806]

「新しい質問をたてて」ではなく「質問本文に追記して」と依頼したのですが・・
質問は編集できます。

Answer 2

最適な記述はどのような物でしょうか。

端的に言えば、使い方によります。

jQueryを使うコードを何も意識せずに書いた場合、asyncやdeferがあると順番前後で正しく動かなくなるので、これらは付けてはいけないということもありえます。

---

あと、prefetchは先にやるから意味があることなので、同一ページに書いてもほぼ意味を持ちません。

Comments

[maisumakun]

jQueryをどこでどのように使うのか、そしてページ全体の構成はどのようになっているのかなども必要な情報です。

[退会済みユーザー]

回答ありがとうございます。

Answer 3

• How jQuery Works | jQuery Learning Center

公式には利用サイト上にダウンロードして

<script src="jquery.js"></script>

で呼び出すのがよいようです。
またasyncやdeferは特に意図がないなら不要です

Comments

[退会済みユーザー]

回答ありがとうございます。