Webブラウザの仕組み

お疲れ様です。最近、社内のプロダクトで「なんかこのページ、スクロールがカクつくんだよね」って言われて、DevToolsのPerformanceタブを開いたら真っ赤なFlame Chartに絶望した……なんて経験、ありませんか？フロントエンド...

こんにちは。チームのパフォーマンスチューニングを任せたとき、誰もが最初は「JSのバンドルサイズを削ろう」「画像の遅延読み込みを入れよう」と頑張るよね。もちろんそれも大事なんだけど……ふと立ち止まって考えてみてほしい。「リロードした瞬間、なぜ...

やあ。今日も今日とて、プロダクトのパフォーマンスチューニングに頭を悩ませているところかい？「Lighthouseのスコアがどうしても上がらない」「なぜかファーストビューの表示がコンマ何秒か遅れる」――そんな壁にぶつかったとき、大抵のエンジニ...

やあ。最近、プロダクトのCore Web Vitals（特にLCP：Largest Contentful Paint）の数値改善に頭を悩ませていないかい？「画像やフォント、スクリプトを最適化したはずなのに、どうもLCPの数値が頭打ちになる…...

やあ、調子はどうだい？今日もどこかのコードレビューで「なんでこの画像、読み込みが遅いんだよ……」なんて頭を抱えていたところじゃないか？フロントエンドのパフォーマンスチューニングを語るとき、私たちはついつい「JavaScriptのバンドルサイ...

やあ。最近、プロダクトのパフォーマンス改善に頭を悩ませているようだね。よし、今日はフロントエンドエンジニアなら誰もが一度はハマる、そして避けて通れない「リフロー（再レイアウト）」の魔物について話をしよう。「なぜかスクロールがカクつく」「アニ...

フロントエンドの現場で頭を悩ませるパフォーマンス問題の一つに、「なぜかスクロールがカクつく」「メモリ消費量が跳ね上がり、最悪の場合はタブがクラッシュする」という現象があります。大体の原因をデベロッパーツールで追っていくと、決まって犯人はこい...

やあ。今日も今日とて、プロダクトのパフォーマンスチューニングに頭を悩ませているところかい？「Lighthouseのスコアがあと少し伸びない」「なんだかスマホでスクロールした時にカクつく（フレームドロップする）瞬間がある」……フロントエンドの...

こんにちは。フロントエンドの現場で日々、パフォーマンスチューニングや不可解な描画バグと格闘している君なら、一度は「なぜこのCSSを書いただけでブラウザが重くなるんだ？」と頭を抱えたことがあるはずだ。「CSSを書いたら画面が変わる」——それは...

フロントエンドの現場で、「なぜかUIがカクつく」「スクロールが重い」という相談を受けたとき、真っ先に疑うべきはメインスレッドの「過密スケジュール」です。ブラウザのレンダリングエンジンは、16.6ms（60fps）という過酷な締め切りの中で、...