質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

817閲覧

HTML 外部のコード読込を指定する最適な記述方法を教えてください

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2023/02/28 13:32

編集2023/03/01 19:23

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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_takatsuk

2023/03/01 07:52

何を最適とするのでしょうか? ページビューパフォーマンスを上げたいということでしょうか?
退会済みユーザー

退会済みユーザー

2023/03/01 07:54

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

2023/03/01 07:59

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

2023/03/01 08:05 編集

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

回答3

0

ベストアンサー

まず、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_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2023/03/01 10:23

まさに求めていた内容でした。 ありがとうございます。
guest

0

ベストな方法がわりかねます。

本当に極限まで追求したい、もしくは測定ツールの裏をかきたいのであれば、直接HTMLに書かずJavaScript経由であとからロードさせる、という作戦も考えられます。

ただし、「裏をかく」と表現したように、ツールの点数をよくする一方で、(狙って作り込まない限り)UXに悪影響を及ぼすということも考えられます。

「ユーザーは無視していいから点数だけは上げたい」というのが本当にやりたいことなのか、まずは再考することをおすすめします。

投稿2023/03/01 08:10

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

前回も指摘しましたが、特段意図がないなら、なにも指定せず読み込んでください
起動時の処理も
window.addEventListener('DOMContentLoaded',()=>{・・・
で行えば、全てのスクリプトを読み込んでから実行されます

投稿2023/02/28 13:50

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2023/03/01 02:52

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問