Webブラウザの仕組み 【実務・中級編】 画像デコードとネイティブLazy Loading – Webブラウザの仕組み実践ガイド
やあ。今日も今日とて、プロダクトのパフォーマンスチューニングに頭を悩ませているところかい？「LCP（Largest Contentful Paint）の数値がどうしても改善しない」「スマホでスクロールすると、なぜか画面がカクつく」。こうした...
ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）
Webブラウザの仕組み Webブラウザの仕組み 【実務・中級編】 フォント読み込み戦略（font-display） – Webブラウザの仕組み実践ガイド
こんにちは。フロントエンドチームのシニアアーキテクトとして、日々ブラウザのパフォーマンスチューニングに明け暮れる君に、今日はWebフォントの読み込み戦略、特に`font-display`の深淵について話をしよう。「デザインカンプ通りにフォン...
Webブラウザの仕組み 【実務・中級編】 ペイントホールドとレイアウト安定性（CLS対策） – Webブラウザの仕組み実践ガイド
やあ。今日もレガシーとモダンが入り交じったコードベースの海で、CLS（Cumulative Layout Shift）の亡霊と戦っているところかい？「ページを開いた瞬間にボタンを押そうとしたら、急に画像が読み込まれて下のコンテンツがガクッと...
Webブラウザの仕組み 【実務・中級編】 メインスレッドのブロッキングとタスク分割 – Webブラウザの仕組み実践ガイド
やあ。今日も今日とてコードレビューに追われているかい？「なんだかこの画面、ボタンをクリックしてからモーダルが開くまで妙に引っかかるんだよね……」パフォーマンス計測ツールを開いてみたら、綺麗に赤いロングタスクのバーがそびえ立っている。……実務...
Webブラウザの仕組み 【実務・中級編】 リソースヒントの活用（preload, prefetch, preconnect） – Webブラウザの仕組み実践ガイド
やあ。今日も今日とてコードレビューに追われてお疲れさん。「Lighthouseのパフォーマンススコアが赤いままで、どうにかしてくれってマネージャーに詰められたんだよ……」なんて顔して席に戻ってきた後輩が、まさに君かい？まあ落ち着きなよ。We...
Webブラウザの仕組み 【実務・中級編】 Webフォントの読み込みとレンダリング挙動 – Webブラウザの仕組み実践ガイド
こんにちは。最近、社内の若手から「デザインカンプ通りに実装したはずなのに、ページを開いた瞬間にテキストがガタッと一瞬消えたり（あるいは変なフォントでチラついたり）、CLS（Cumulative Layout Shift）のスコアが怒られたり...
Webブラウザの仕組み 【実務・中級編】 画像デコードとレンダリング – Webブラウザの仕組み実践ガイド
おい、最近「なぜかスマホでスクロールするとカクつく」「Largest Contentful Paint (LCP) のスコアがどうしても改善しない」って悩んでないか？フロントエンドエンジニアとしてレイアウトやCSSの最適化をやり尽くした後に...
Webブラウザの仕組み 【実務・中級編】 content-visibilityプロパティによるレンダリング抑制 – Webブラウザの仕組み実践ガイド
フロントエンドのパフォーマンスチューニングにおいて、長年私たちは「DOMノードの数」と戦い続けてきました。「無限スクロールを実装したら、スクロールするたびにDOMが肥大化して、スマホのブラウザが盛大にフリーズした」「リッチなLP（ランディン...
Webブラウザの仕組み 【実務・中級編】 display:noneとvisibility:hiddenのレンダリング上の違い – Webブラウザの仕組み実践ガイド
やあ。今日も今日とてCSSとDOMの機嫌を取りながら、ブラウザの機密を暴く時間だな。フロントエンドをある程度やってくると、「要素を隠す」という要件に対して `display: none` を使うべきか、それとも `visibility: h...
Webブラウザの仕組み 【実務・中級編】 CSSOMツリーの構築とスタイル解決 – Webブラウザの仕組み実践ガイド
こんにちは。プロダクトのパフォーマンス改善や、「なぜかスタイルが意図通りに当たらない…」というデバッグ地獄に夜な夜なハマっていませんか？フロントエンド開発を長くやっていると、HTMLとCSSを書けばブラウザが勝手に画面を綺麗に描画してくれる...