https://calendar.perfplanet.com/2025/ を読みます
あとで
あとで
https://calendar.perfplanet.com/2025/improve-ttfb-and-ux-with-http-streaming/
あまり使われていないHTTPのストリーミング機能を使えばTTFBを短くできる。
Mastraフレームワークではawait db.execute()みたいなものの代わりにdb.stream()というAsyncIterableを返す実装でHTTTPストリーミングを活用している。
https://calendar.perfplanet.com/2025/exploring-large-html-documents-on-the-web/
HTML文書は基本的には小さいが、中にはとてつもなくでかいのがある。どんな理由でHTMLがでかくなってしまったのかを探る。
インラインの画像。大きなファイルサイズの画像が埋め込まれていたり、小さな埋め込みアイコンが数百もあるもの、レスポンシブイメージが埋め込まれているもの、SVGがPNGを埋め込んでいるもの、などなど。
インラインのCSS。基本的には埋め込み画像によるものが多いが、長すぎるセレクタによってファイルサイズが膨れてしまうことも（ただしgzipがきくので転送量は小さくなったりする）
インラインフォント。1つや2つならいいが、複数個あると大変。
JavaScriptフレームワークのintiial renderに使うコードがばかでかい。ローカルの開発環境ではinitialのデータは小さいが、プロダクションのDBなどからだとハイドレーションステートが膨らむ。
JSONの中に画像がインラインで埋め込まれていても大きくなるし、JSONのツリーを辿っていくとHTML→JSON→...HTML→JSONなんてパターンもあった。
HTMLがでかくなることの何が問題か？HTMLはブラウザでプライオリティが高く設定されるので、ハイドレーション用のJSがあると、レンダーブロッキングなCSSやフォントよりも先に読み込まれ、レンダーブロッキングなリソースの読み込みに悪影響が出る。
HTMLがでかくなることの何が問題か？HTMLはブラウザでプライオリティが高く設定されるので、ハイドレーション用のJSがあると、レンダーブロッキングなCSSやフォントよりも先に読み込まれ、レンダーブロッキングなリソースの読み込みに悪影響が出る。 HTMLがでかくなることの何が問題か？HTMLはブラウザでプライオリティが高く設定されるので、ハイドレーション用のJSがあると、レンダーブロッキングなCSSやフォントよりも先に読み込まれ、レンダーブロッキングなリソースの読み込みに悪影響が出る。
CPUの処理速度によっても影響が出る。MacBookだとそこまで問題ないかもしれないが、ローエンドのスマホだと影響が出る。
パフォーマンスを低下させる要因はHTMLよりも他のものがでかいかもしれないが、それでもHTMLの大きさはパフォーマンスに影響する。LCPなど。HTMLのサイズが増えていかないようにCIとかでチェックしようね。
https://calendar.perfplanet.com/2025/non-blocking-image-canvas/
CanvasのdrawImage()でメインスレッドを止めない方法を探る。どのブラウザでもいい感じに動く方法を探すのが大変という話。
image.decoding = "async"だけ→Chrome, Firefox, Safariでブロックimage.decode()→FirefoxのみOKimage.decode()とOffscreenCanvas→FirefoxのみOKimage.decode()からcreateImageBitmap()→FirefoxとSafariでOKimage.blob()からcreateImageBitmap()→ChromeのみOKimage.blob()からcreateImageBitmap()をWorkerで→ChromeとSafariでOK- 結局UA判別でdecodeからcIBとblobからcIBを振り分けて対応
仕様ではdecode()のみでうまくいくはずだが、ChromiumとWebKitではそうなってない。
https://calendar.perfplanet.com/2025/nolojs-reducing-js-workload-html-css/
JSで実装してたUIパターンも今だとHTML/CSSでできたりするという紹介。