KakapoWP KakapoWP
ログイン 無料で試す
Kakapo Performance

クリティカル CSS

ページ上部に必要なものは head に置きます。残りは後から読み込まれます。

カカポはテンプレートごとにサイトの実際のサンプルページを取得し、そこにリンクされたローカルのスタイルシートをディスクから読み込んで、各ルールをドキュメントと突き合わせます。上部で必要なものは head にインラインで入り、解析済みのスタイルシートはその後、描画を妨げずに読み込まれます。ブラウザは関与しません。「上部に表示される」は要素の並び順に基づく明示された近似で、判断に迷う場合はルールを残します。そのためプレビュー、テスト運用、テンプレートごとのスイッチがあります。

クリティカル CSS

7 種類のテンプレート · テンプレートごとに実行・スイッチ・プレビューを個別に用意

テストモードプレビュー

クリティカル CSS でできること

7 種類のテンプレートを個別に分析し、個別に反映
クリティカル CSS は head にインライン、解析済みのスタイルシートは遅延読み込み
レポート:どの要素にも一致しなかったルール
同じページを処理あり・なしでプレビュー
テストモード: 変更が見えるのはログイン中の管理者だけです
URL の除外リストとスタイルシートの例外リスト

仕組みはこうだ

1

テンプレートを解析 — サンプルページを取得し、ルールを確認

2

処理あり・なしのプレビューを比較

3

テンプレートを承認し、テストモードから本番に切り替え

クリティカル CSS のよくある質問

画面上部で実際に見える範囲を測っていますか?
いいえ。ブラウザもビューポートもありません。body 配下のすべての要素に通し番号が振られ、「上部」とは最初の 30 %(5 から 90 の間で調整可能)に、登録されたランドマーク内のすべて(ヘッダー領域、ナビゲーション、最初の h1、および自分で追加したもの)を加えた範囲を指します。この方式が限界に突き当たる箇所では、ルールは該当扱いになります。数キロバイト多いほうが、ルールが欠けるより無害だからです。
使われていないルールをここから削除させることはできますか?
この一覧はレポートであり、ツールではありません。集計はテンプレートごとに 1 つのサンプルページに対して行われます。JavaScript がクリック時にはじめて付与するクラスや、別ページのフォームはそこには現れません。削除はテーマのソースコード側で行うのが安全で、履歴も追えます。
分析の実行には何が必要で、その後どうなりますか?
PHP 拡張の dom/libxml と、機能するループバックです。サイトが HTTP で自分自身に到達できる必要があります。どちらかが欠けていると分析は開始すらできず、その理由はその場に表示されます。のちに解析済みの CSS ファイルやテーマが変わった場合は、誤ったクリティカル CSS を配信せずに処理を停止します。

その他のパフォーマンス機能

準備はいいですか?

Performance を 24 時間無料でお試しいただけます。

クレジットカード不要、リスクなし。2分で準備完了だ。

今すぐ無料でお試しください