高速化のプリセットをボタン1つで適用したあと、どこを確認すればいいのでしょうか。
結論を先に書くと、点数は上がって、公開ページの一部は動かなくなる可能性があります。壊れるのは決まった場所です。メニュー、スライダー、フォーム、そしてログイン後にしか出ない画面。
自分のサイトでスコアを82点から96点まで上げたときの確認手順を残します。プリセットの中身は、未使用CSSの削除、JavaScriptの遅延、クリティカルCSS、LCP最適化、投機的ロード。プラグインは何でも構いません。同じ施策を入れるものなら、確認する場所は同じです。
検証環境:WordPress 7.0.4・Cocoon 2.9.4.3・PHP 8.3.30 2026/8/16
JavaScriptの遅延で、何が起きるか
いちばん壊れるのがここです。
遅延の実装は、だいたい2種類あります。スクリプトタグの type を書き換えて、ユーザーの操作があるまで実行を止めるもの。もう1つが、defer や async を後付けするもの。
どちらも、実行の順番が変わります。
問題になるのは、jQuery に依存しているコードです。テーマやプラグインが jQuery(function($){ ... }) で書いている処理は、jQuery 本体より先に走ると死にます。遅延の対象に jQuery 本体が入っていて、依存する側のインラインスクリプトが入っていない、という組み合わせが起きうる。
インラインスクリプトも同じです。wp_add_inline_script() で足したものや、テーマが直接 <script> で書いているもの。これらが遅延の対象から外れていると、順番が入れ替わります。
自分が使っているプラグインは、危ないスクリプトを初期状態で除外リストに入れたうえで、この設定を入れると警告を出します。警告が出ること自体が正しい挙動で、消すものではありません。
確認する場所
未ログインのシークレットウィンドウで、公開ページを開いて触ってください。ログイン中だと、管理バーのぶんだけ読み込まれるスクリプトが変わります。
見るのはこのあたりです。ハンバーガーメニューが開くか。ドロップダウンが2階層目まで出るか。スライダーが自動再生されて、矢印で送れるか。お問い合わせフォームの送信ボタンが反応して、確認画面まで行くか。検索のサジェストが出るか。
そして開発者ツールのコンソール。$ is not defined や Cannot read properties of undefined が出ていれば、順番の問題です。
未使用CSSの削除は、条件つきの要素を消す
この施策は、ページを読み込んだ時点で使われていないセレクタを落とします。
落ちて困るのは、その時点では存在しない要素のスタイルです。
具体的には、JavaScript であとから差し込まれる要素。モーダルの中身、トーストの通知、アコーディオンの開いた状態、ドロップダウンの子メニュー、カートに追加したときのバッジ。読み込み時点のHTMLに無いので、使われていないと判定されます。
疑似クラスも同じです。:hover は残ることが多いのですが、:checked や [aria-expanded="true"] のような状態依存のセレクタは、初期状態で当てはまらないと落ちうる。
確認する場所
要素が出た瞬間にスタイルが当たっているかを見ます。モーダルを開く、アコーディオンを開く、フォームでエラーを出す。開いたけれど枠線も背景も無い、という見え方になっていれば、そのセレクタが落ちています。
対処は、削除の除外リストにクラス名を足すことです。全部を戻す必要はありません。
クリティカルCSSは、テンプレートごとに要ります
ファーストビューぶんのCSSをHTMLに直接埋める施策です。
見落としやすいのは、トップページで生成したクリティカルCSSを、全ページで使い回している場合です。投稿ページ、固定ページ、アーカイブ、404、検索結果。レイアウトが違えば、ファーストビューに必要なCSSも違います。
トップだけ確認して終わりにすると、投稿ページの上半分が一瞬崩れて表示されます。読み込みが終われば直るので、自分では気づきにくい。
確認する場所
テンプレートの種類ごとに1ページずつ、低速回線をエミュレートして開いてください。開発者ツールのネットワークタブで 4G のスロットリングをかけると、崩れている瞬間が見えます。
投機的ロードは、遷移先を先に取ります
リンク先を先読みしておく仕組みです。
注意が要るのは、GETで副作用があるURLです。ログアウトのリンク、カートから削除するリンク、管理系の操作リンク。先読みしただけで実行されうる。
WordPress の標準的なログアウトURLは nonce 付きなので通常は問題になりませんが、プラグインが独自に作っているリンクは確認したほうがいいです。
もう1つ、アクセス解析の数字がずれます。先読みで発生したリクエストがページビューとして数えられると、実際より多く出ます。
確認する場所
先読みの除外設定に、?action= や /cart/ のようなパターンを入れられるか見てください。入れられるなら、副作用のあるURLを先に除外します。
AVIF変換は、サーバー側の条件で入ります
画像をAVIFに変換する施策は、サーバーが対応している場合にだけ有効になります。非対応なら入りません。
確認は、これで足ります。
php -r 'var_dump(function_exists("imageavif"), extension_loaded("imagick"));'
imageavif が true なら GD で変換できます。Imagick 側は、ビルドに AVIF のデリゲートが入っているかで変わるので、convert -list format | grep -i avif も見てください。
環境によって入る施策が変わるので、同じプリセットを別のサーバーで適用しても、同じ結果にはなりません。
ファイル結合は、いまは入れないほうがいい
プリセットの下にCSSとJavaScriptの結合オプションが並んでいることがありますが、HTTP/2 のサーバーでは基本的にオフのままで構いません。
多重化されるので、ファイルを束ねても往復回数は減らないためです。むしろ、1ファイルにまとめるとキャッシュの効きが悪くなります。1箇所直しただけで、束ね直した全体を配り直すことになる。
自分のサーバーが HTTP/2 で応答しているかは、これで分かります。
curl -sI --http2 https://example.com/ | head -1
確認する順番
上から順に見るなら、こうなります。
未ログインのシークレットウィンドウで公開ページを開いて、メニュー・スライダー・フォームを触る。コンソールにエラーが出ていないか見る。それからモーダルやアコーディオンを開いて、スタイルが当たっているか確認する。次に、テンプレートの種類ごとに1ページずつ、低速回線で開いて崩れを見る。最後に、副作用のあるURLが先読みの除外に入っているか確かめる。
ここまで通れば、点数を測りにいって構いません。逆に言うと、測る前にこれをやらないと、速いけれど壊れているサイトの点数を測ることになります。
実際に適用しているところは、動画にしました。警告が出る場面もそのまま入れてあります。
点数の内訳、つまりどの施策がどの指標を動かしたかは、Zenn に分けて書きました。
数字が上がったかどうかより先に、ページが動いているかどうかです。
ふだんはraplsworks.comで、WordPressプラグイン開発やClaude Codeまわりのことを書いています。