クリティカル CSS を設定する
このモジュールがすること — そしてしないこと
Kakapo はページテンプレートごとに、サイトの実在するサンプルページを HTTP で取得し（管理画面または Cron でのみ行い、訪問者のページ生成時には決して行いません）、そこからリンクされたローカルのスタイルシートをディスクから直接読み込み、一つひとつのルールを DOMXPath で文書に照らして調べます。そこから 2 つの結果が生まれます：head にインラインで差し込まれるクリティカル CSS と、このテンプレートでは 1 つの要素にも当たらなかったルールの一覧です。
その際、描画は一切行われません。ブラウザーもビューポートもスクロール位置もありません。「上部に見える」というのは、公開された規則に沿った近似です：body の下にあるすべての要素に通し番号が振られ、最初の 30 パーセント（既定値。5 から 90 の間で設定できます）が上部とみなされ、これに登録したランドマークの中身が加わります。html、body、:root、@font-face は常に取り込まれ、クリティカルなルールが animation で名前を挙げている @keyframes も同様です。状態によってのみ効くルール（:hover、:focus、:active）は対象外で、@media print も同じです。この方式が限界に達したところでは、大きい側に丸めます：そのルールは当たったものとして扱われます。数キロバイト多いことの代償は、ルールが欠けてちらつくことより小さいのです。
分析する前に前提条件を確認する
2 つのことが揃っていなければなりません。1 つめは PHP 拡張の dom/libxml です — このモジュールはそれを class_exists() では確かめず、ごく小さな文書を作って実際に問い合わせます。理由はこうです：一部のホスティング事業者は disable_classes=DOMDocument を設定しており、その場合 class_exists() は「はい」と答え続けますが、new は失敗します。拡張がない場合、「分析」と「毎日更新」はロックされ、その理由が隣に表示されます。
2 つめはループバックです：サイトが HTTP で自分自身に到達できなければなりません。そのために前提条件の領域に「ループバックを確認」ボタンがあります。このボタンは HTTP コード、応答サイズ、期間を記憶します。これが失敗すると、分析の実行はすべて失敗します — よくある原因は、サイトの前に置かれたファイアウォール、ステージング環境の Basic 認証による保護、あるいは内部で名前解決できないホスト名です。
分析が読み取れないものは、遅延もされません。外部ホスト、CDN、Google Fonts のスタイルシートは、そのまま描画をブロックし続けます。これは遅いけれども安全な道です。
テンプレートを 1 つずつ進める
テンプレートは 7 つあります：ホーム、ブログページ、個別投稿、固定ページ、アーカイブ、検索結果、404 エラーページです。それぞれ個別に分析し、個別に許可します。ホームが投稿一覧を表示している場合、「ブログページ」は当てはまりません — 効果がないため、スイッチはロックされたままです。公開済みの投稿や固定ページがない場合はサンプルページがなく、そのテンプレートも同じくロックされたままになります。
おすすめの進め方はこうです：まず「すべて分析」、または 1 つずつ分析します。その後、あるテンプレートについて「プレビュー」と「なし」を 2 つのタブで開きます — 同じ実在のページを、処理ありと処理なしで見比べるものです。見られるのはログイン中の管理者だけ、しかもアドレスに有効な使い捨てキーがある場合だけです。そのためにメインスイッチをオンにする必要はありません。表示途中のちらつきは、埋め込みのフレームの中よりも、通信を絞った専用のタブで見るのが最も確実です。
比べてみて問題がなさそうだと分かってから、テンプレートを許可し、メインスイッチをオンにします。最初はテスト運用から始まります：処理された結果を見られるのはログイン中の管理者だけで、それ以外の人にはページはそのまま表示されます。「本番」に切り替えるのは、いくつかのテンプレートを見終わってからにしてください。
4 つのブレーキと除外リスト
「分析済みのスタイルシートを遅延読み込み」が、本当の時間短縮になります。オフの場合：クリティカル CSS がインラインで加わるだけで、ほかはこれまでどおりです — 危険はありませんが、得るものもありません。オンの場合：評価済みのスタイルシートが media="print" と onload での差し戻しによって読み込まれ、JavaScript のない訪問者のために noscript の複製が付きます。遅延されるのは実際に読み取られたものだけで、しかもハンドルとファイルのアドレスが分析したときのものと一致している場合だけです。
「ソースファイルが変わったら中断」は、評価した各ファイルの更新時刻とサイズ、そして有効なテーマを記憶します。何かが変わった場合は、誤っているかもしれないクリティカル CSS を使うのではなく、まったく処理をしません — そのときはソースに理由を記したメモが入ります。
3 つのテキスト欄が非常口です。除外 URL：経路ごとに 1 行、ワイルドカードは「*」、これらのページは決して処理されません（典型的には /checkout*、/mein-konto*）。決して遅延しないスタイルシート：1 行に WordPress のハンドルを 1 つ、既定は admin-bar と dashicons です。ランドマーク：1 行にセレクター 1 つ、その中にあるものはすべて上部とみなされます — 既定は header、[role="banner"]、.site-header、#masthead、nav、.main-navigation、.site-branding、.hero、h1 です。解釈できない行は、黙って保存されるのではなく拒否されます。
「上部」の割合やランドマークを変えても、効くのは新しく分析を実行した後です。それ以外の変更はページキャッシュをただちに破棄します。そこには古い状態のまま出来上がった HTML が置かれているからです。
うまくいかないとき
「時間枠を使い切りました」：実行が 25 秒、または PHP の時間制限に達しました。レポートは保存されますが、クリティカル CSS は意図的に保存されません — 不完全なクリティカル CSS はちらつきを招くからです。メッセージには、どのファイルで打ち切られたかが示されます。もう一度分析するか、非常に大きなスタイルシートを除外リストで外してください。
「HTTP … で応答」：サンプルページが期待どおりのコード（200、エラーページでは 404）を返しませんでした。何も保存されません。そのページがブラウザーから見られるか、その前に何らかの保護がかかっていないかを確かめてください。
テンプレートが「古い」になっている：評価した CSS ファイルが変わったか、テーマが切り替えられました。分析し直してください。「割合が異なる」と出ている場合、そのテンプレートは現在の設定とは違うパーセント値で作られています — こちらも分析し直してください。
これが手作業のままにならないよう、「毎日チェックして更新」があります。Cron の実行が分析するのは、すでに許可済みで古くなっているテンプレートだけです。何かを有効にすることは決してなく、許可していないテンプレートの分析を作ることもありません。その最後の結果は、シートベルトの領域にメモとして表示されます。
それでもページが落ち着かない場合は、ソースを見ると分かります：そこには、処理されたテンプレートと状態（プレビュー、テスト運用、本番）を記したコメント、あるいは意図的に処理しなかった理由が書かれています。