Webブラウザの仕組み

画面が「チラつく」正体、教えます。Webフォントと `font-display` の深淵現場でフロントエンドをしていると、必ず一度は頭を抱える問題がある。そう、「Webフォントの読み込み待ち」だ。通信環境が悪い場所でページを開くと、一瞬テキ...

なぜその「GPU加速」は動かないのか？コンポジットレイヤーの深淵を覗くフロントエンドのパフォーマンスチューニングをしていると、必ずぶち当たる壁がある。「`will-change: transform` を書いたのに、なぜかカクつく」「なぜこ...

巨大なDOMの「爆発」を食い止める：`contain`プロパティがもたらすレンダリングの革命フロントエンドの現場で「レンダリングが重い」という課題に直面したとき、多くのエンジニアはまずReactの`memo`や`useMemo`といったJS...

レイアウトシフト（CLS）の正体：ブラウザはなぜ「ガタつき」を許してしまうのかフロントエンド開発の現場で、「CLS（Cumulative Layout Shift）が改善しない」と頭を抱えたことはないだろうか。ユーザーが記事を読もうとした瞬...

ブラウザの「呼吸」を整える：Critical CSSインライン化によるレンダリング最適化の真髄フロントエンドの現場で「表示が遅い」という課題に直面したとき、多くのエンジニアはまずJavaScriptのバンドルサイズを削ろうとします。もちろん...

ブラウザの「レンダリングブロック」を制する者は、UXを制す。現場で「なぜかページの表示が一瞬カクつく」「LCP（Largest Contentful Paint）が改善しない」といった悩みに直面したことはないだろうか？多くのエンジニアが「な...

ブラウザの「待ち時間」を極限まで削れ：HTTP 103 Early Hintsという劇薬フロントエンドエンジニア諸君、日々パフォーマンスチューニングに明け暮れていることだろう。「Lighthouseのスコアが上がらない」「FCP（First...

ブラウザの「先読み」をハックせよ：Linkヘッダーでレンダリングのボトルネックを物理的に破壊するやあ。フロントエンドの現場で、Lighthouseのスコアとにらめっこして「LCP（Largest Contentful Paint）が遅い…」...

ブラウザの「メインスレッド」を制する者が、Webパフォーマンスを制する。やあ。今日は少し腰を据えて、Chrome DevToolsの「Performance」タブの話をしよう。多くのエンジニアが「なんとなく重いから」といって適当にリファクタ...

ブラウザの「先読み」を極める：PreconnectとDNS-prefetchでLCPを削り出せフロントエンドのパフォーマンスチューニングにおいて、一番の敵は「待ち時間」だ。ネットワークの往復時間（RTT）は、光の速さという物理的な制約がある...