ブラウザのレンダリングパス最適化：Critical Rendering Pathとは

Sat, 20 Dec 2025 00:00:00 +0900

はじめに

Critical Rendering Path（CRP） とは、ブラウザが HTML・CSS・JavaScript を画面上のピクセルに変換する一連の処理手順です。このパイプラインを最適化することで First Contentful Paint（FCP） や Largest Contentful Paint（LCP） を大幅に改善できます。本記事では DOM / CSSOM 構築からレイアウト、ペイント、コンポジットまでの各段階を解説し、実践的な最適化手法を紹介します。

CSS Popover API：JavaScript不要のネイティブオーバーレイ

Tue, 20 Aug 2024 00:00:00 +0900

はじめに

ツールチップやドロップダウンメニュー、モーダルといったオーバーレイUIを構築するには、これまで多くのJavaScriptが必要でした。CSSの position: absolute による手動座標計算、ARIA属性を使ったアクセシビリティ対応、ReactポータルやFloating UIなどのフレームワーク依存の解決策——これらすべてに学習コストとメンテナンスの負荷が伴います。

Html on たかおの解説

ブラウザのレンダリングパス最適化：Critical Rendering Pathとは

はじめに

CSS Popover API：JavaScript不要のネイティブオーバーレイ

はじめに