高速化のプリセットをボタン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まわりのことを書いています。