Critical CSS予算計算機
インラインCritical CSSサイズ、未使用CSS比率、圧縮後サイズ、初期レスポンス予算を確認します。
このツールについて
Critical CSSをインライン化するとFirst Paintは改善できますが、多すぎるとHTMLレスポンス自体が重くなります。
最初の画面に必要なCSSだけを残し、それ以外のルールを初期レスポンス外へ分離すべきか判断できます。
Critical CSS
18.0 KB
未使用CSS
12%
状態
改善が必要
結果
使い方
- 1
必要な値を入力するか、テキストを貼り付けます。
- 2
オプションや単位を目的に合わせて調整します。
- 3
表示された結果を確認し、必要な場所へコピーして使います。
機能
即時結果
値を入力するとブラウザ内で結果がすぐに更新されます。
ブラウザ内処理
入力値はサーバーへアップロードせず、端末内で処理されます。
シンプルな入力
繰り返し使いやすい入力欄と見やすい結果を用意しています。
無料で利用
登録やインストールなしでそのまま使えます。
主な用途
- ›Critical CSSブロックがインライン化できるほど小さいか確認します。
- ›最初のHTMLレスポンスに追加される圧縮後サイズを推定します。
- ›最初の画面CSS内の未使用ルールが保守問題になっているページを見つけます。