bblog

Today I Learned

日々の仕事と学びの振り返りです。何をして、何を学んだかを記録します。

Alla11yanimationarchitecturebabelbrowserbrowser-compatbrowser-extensionbundlebundlingcachingcanvasci-cdclscollaborationcompound-componentcssdebuggingdrag-and-dropeditoreslintetaghydrationimagesimeimmutabilityindexeddbinfinite-scrollisrlanding-pagelcpmeasurementmessage-passingmigrationmobilemodalmonorepomotionmutation-testingnavigationnetworknextjsobject-urlofflinepage-transitionpaginationperformanceplaywrightpointer-eventspolyfillproxyreactreact-hooksreact-queryredirectreliabilityrpcscrollsearchsecurityselectionseoserverlessservice-workershellssrstorytellingstructured-datatanstack-querytddtelemetrytest-oracletestingtext-anchoringthemingtype-safetytypescriptundousesyncexternalstorevariancevirtualizationwebpackwebsocketworkflow
入力を止めてから350ms後に自動で検索します。

7件の記録 · #performance

2026년 7월

2026-07-24

LCP のボトルネックが画像ではなく hydration のとき、そして節度あるスクロールモーション

ランディング性能を改善して学んだこと — LCP が遅いのに画像が小さいなら render delay（hydration）を疑いクライアント JS を外す、派手なスクロールモーションより進入スタッガーリビール、構造化データは画面と 1:1

  • LCP が遅いのに TBT が 0 で画像が小さければ element render delay（=クライアント境界の hydration）を疑い、そのサーフェスのクライアント JS を外す
  • 派手なスクロール従属モーション（scroll-jacking）より短いビューポート進入スタッガーリビールが汎用的な正解であることが多い
2026-07-08

モバイルのポインタジェスチャとサーバ画像プロキシ

タッチのドラッグ・リサイズの安定化と、unoptimized 環境で画像プロキシにより転送バイトを減らした一日

  • タッチで引いてもページが一緒にスクロールしないようドラッグ動作を直した
  • 画像は原本まるごとではなく必要なサイズだけ送るようプロキシを付けた
2026-07-07

ネストされたUIの再レンダーをO(1)へ — read-model・external store・レンダー回数テスト

イミュータブルなツリーエディタで一行直しただけで全体が再描画される問題を、まずテストで固定してから、正規化projectionとid別購読で行・コンテナの再レンダーを減らした過程

  • イミュータブルなツリーpatchは祖先も新しいrefを受け取り、propsで下ろすとO(depth)の再レンダーになる — 正規化entry + id別購読でO(1)に減らせる
  • entryキャッシュは入力refではなく出力の値-等価で安定化すべきで、外部storeのsyncはsetState直前のchoke pointで同期実行する
2026-07-06

バンドルの shared vendor、クロスブロック選択、フローティング UI 座標

webpack splitChunks の罠、ハイブリッドエディタのクロスブロック範囲演算、selectionchange·scroll anchor パターン、Context 購読の分離

  • catch-all vendor に chunks:all と固定 name を一緒に使うと、dynamic import が shared チャンクへ引き上げられる
  • クロスブロックのテキスト演算は範囲 state の代わりに getSelection からの無状態派生 + 境界 split の単一化が安全だ
2026-07-03

perf は 3× median、prefetch は skeleton とセット

Lab trace の outlier 区別、SSR prefetch の query key 整合、CLS skeleton 予約、JSON-LD サーバー注入を一日で整理

  • 開発サーバーの単一 Performance trace は outlier が多いので、N回 reload の median で before/after を比較すべきだ
  • SSR prefetch は query key がクライアントと1文字でも違えば cache miss であり、skeleton の高さ予約とセットで見ないと CLS が出る
2026-07-01

長いリストは flatten → SSR 初回 slice → virtualizer

無限スクロールとリスト仮想化を分離し、SSR 静的 gate で初回HTMLを保証してから virtual list に切り替えるパターン

  • 無限スクロールはデータ露出の上限、仮想化はDOMの上限をそれぞれ制御する
  • ネストしたグループUIは header/item row に flatten してから virtualizer に入れる

2026년 6월

2026-06-28

WebSocket ストリーミングと LCP 改善

エージェントの部分応答ストリーミングと、ランディングの LCP 改善を並行しながら学んだ計測・UI・リソース優先度

  • WebSocket でも部分結果をストリーミングできる。
  • LCP リソースの優先度が実際の指標に大きな影響を与える。