0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

WordPressの高速化プリセットを一括で入れたとき、どこが壊れるか。JS遅延・未使用CSS削除・投機的ロードの確認手順

0
Posted at

高速化のプリセットをボタン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つが、deferasync を後付けするもの。

どちらも、実行の順番が変わります。

問題になるのは、jQuery に依存しているコードです。テーマやプラグインが jQuery(function($){ ... }) で書いている処理は、jQuery 本体より先に走ると死にます。遅延の対象に jQuery 本体が入っていて、依存する側のインラインスクリプトが入っていない、という組み合わせが起きうる。

インラインスクリプトも同じです。wp_add_inline_script() で足したものや、テーマが直接 <script> で書いているもの。これらが遅延の対象から外れていると、順番が入れ替わります。

自分が使っているプラグインは、危ないスクリプトを初期状態で除外リストに入れたうえで、この設定を入れると警告を出します。警告が出ること自体が正しい挙動で、消すものではありません。

確認する場所

未ログインのシークレットウィンドウで、公開ページを開いて触ってください。ログイン中だと、管理バーのぶんだけ読み込まれるスクリプトが変わります。

見るのはこのあたりです。ハンバーガーメニューが開くか。ドロップダウンが2階層目まで出るか。スライダーが自動再生されて、矢印で送れるか。お問い合わせフォームの送信ボタンが反応して、確認画面まで行くか。検索のサジェストが出るか。

そして開発者ツールのコンソール。$ is not definedCannot 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まわりのことを書いています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?