Webブラウザの仕組み

やあ。今日もレガシーなコードと最新のビルドツールに挟まれて、華麗にブラウザをハックしているかい？今回は、フロントエンドエンジニアなら絶対に知っておくべき、そして日々のパフォーマンスチューニングで強力な武器になる「投機的パース（Specula...

やあ。今日も今日とてパフォーマンスチューニングの沼にハマっているかい？フロントエンドの現場にいると、「なんか最近、モーダルを開くたびに微小なカクつきがあるんだよな……」「無限スクロールの下の方でスクロールが重い……」なんて相談を、デザイナー...

こんにちは。チームのコードレビューをしていて、未だに「アニメーションやっちゃう？ じゃあ取り敢えず `setInterval` か `setTimeout` で16ミリ秒ごとにゴリゴリ動かそうか」なんてコードを見かけると、思わずコーヒーカッ...

おい、最近のWebアプリ、DOMが数万個に膨れ上がってメインスレッドがカクカクになる現象に悩まされてないか？ 「リッチなUIにしたい」「無限スクロールを実装したい」のは分かるが、ブラウザの身になってくれよ。画面の端っこで見えてすらいない孫要...

おい、調子はどうだい？今日も元気に `position: fixed;` のレイアウト崩れや、重いモーダルのカクつきと格闘していることだろう。フロントエンドのパフォーマンスチューニングを語るとき、私たちはついつい「JavaScriptをいか...

やあ。今日も今日とて、プロダクトのパフォーマンスチューニングに頭を悩ませているところかい？「LCP（Largest Contentful Paint）の数値がどうしても改善しない」「スマホでスクロールすると、なぜか画面がカクつく」。こうした...

こんにちは。フロントエンドチームのシニアアーキテクトとして、日々ブラウザのパフォーマンスチューニングに明け暮れる君に、今日はWebフォントの読み込み戦略、特に`font-display`の深淵について話をしよう。「デザインカンプ通りにフォン...

やあ。今日もレガシーとモダンが入り交じったコードベースの海で、CLS（Cumulative Layout Shift）の亡霊と戦っているところかい？「ページを開いた瞬間にボタンを押そうとしたら、急に画像が読み込まれて下のコンテンツがガクッと...

やあ。今日も今日とてコードレビューに追われているかい？「なんだかこの画面、ボタンをクリックしてからモーダルが開くまで妙に引っかかるんだよね……」パフォーマンス計測ツールを開いてみたら、綺麗に赤いロングタスクのバーがそびえ立っている。……実務...

やあ。今日も今日とてコードレビューに追われてお疲れさん。「Lighthouseのパフォーマンススコアが赤いままで、どうにかしてくれってマネージャーに詰められたんだよ……」なんて顔して席に戻ってきた後輩が、まさに君かい？まあ落ち着きなよ。We...