12/21

2025/12/21

パフォーマンス

大前提、今の開発環境ではバンドラーが裏側で全部やってくれているから意識する必要はなくなっているが、知識として。
そして以下には、自分の知らなかった知識だけ載せていく。

通常のscript要素によるJSファイル読み込みは、ドキュメントのパースをブロックする。
script要素の中にインラインで書いても、外部ファイルを読み込む場合でも。
これはdocument.write()メソッドがあるから。（現在非推奨）

defer属性、async属性、「type=module」を用いて回避できる。（現在のフロントエンド開発ではmodule一択）

	defer属性	async属性	module
実行タイミング	HTML解析と並列でダウンロードドキュメントのパース後（HTML解析完了後）に実行 DOMContentLoadedの前	HTML解析と並列でダウンロードスクリプトが取得され次第実行	HTML解析と並列でダウンロードドキュメントのパース後（HTML解析完了後）に実行
実行順	宣言順	宣言順関係なく

パフォーマンス上では、async属性が最も効果的に見えるが、HTML解析途中でもJS実行されるとLCP(Largest Contentful Paint)、TBT(Total Blocking Time)が悪化する可能性もある。
asyncは計測・広告に使う。

moduleはほぼdeferと同じだが、

上のように、JSでLoadingをブロックしない方法はわかった。ではCSSは？

ない。なぜならCSSを読み込まずにコンテンツをレンダリングすると、スタイルのついていないコンテンツが一瞬表示され、CSSが読み込まれて本来のコンテンツが表示される、FOUC(Flash of Unstyled Content)が起こるから。

これを回避するために、クリティカルCSSという方法がある。
コリスさんが2025/6に投稿しているところを見ると、現在でも有効な手段のようだ。

クリティカルCSS
ファーストビューをレンダリングするのに最低限のCSSをインラインで書き、他の部分のCSSをJS等でページがロードしてから読み込む手法

DNSプリフェッチ
<link rel="dns-prefetch" href="...com">
ドメインの名前解決をバックグラウンドで処理。
リソース事前読み込み
<link rel="prefetch" href="" >
次のページの画像等を「暇だったら取っといて」。という感じに
プリレンダリング
<link rel="prerender" href="...html" >
次のページを裏で完成させておく。
hrefのHTML内のいろんなリソースを読み込むので注意。
通信レイヤ最適化
<link rel="preconnect" href="...com" >
DNS解決、TCP接続、TLSハンドシェイクまでを先に完了させる。
外部ドメインで効果大
ファイル圧縮
vercelは自動でBrotli(br),gzipで最適な方を自動選択する。
CDN
こちらもvercelは自動...おんぶに抱っこ。
自分でやる場合選択肢はcloudflare