2026年8月27日
2026年8月27日
WordPressでキャッシュプラグイン導入後のHTMLに不要なタグが入る場合の原因と修正
キャッシュプラグインを入れた後にHTMLへ見覚えのないコメントや <script>・<noscript>・属性が増えた場合、多くはプラグインの「最適化」機能が意図どおりに挿入したものです。問題は、それがレイアウト崩れや動作不良、古い内容の表示につながっているときです。この記事では、増えたタグがどの機能から来たかを見分ける方法と、原因を可能性の高い順に並べた確認と修正方法を説明します。
まず「どのHTMLを見ているか」をそろえる
調査の最初につまずきやすいのが、見ているHTMLの違いです。ブラウザの開発者ツールの「要素」タブに表示されるのは、JavaScriptが実行された後のDOMです。キャッシュプラグインが挿入したタグなのか、テーマやJavaScriptが後から追加したものなのかを区別するには、サーバーから返ってきたままのHTML、つまり「ページのソースを表示」で見る必要があります。
また、多くのキャッシュプラグインはログイン中のユーザーにはキャッシュを返しません。管理者としてログインしたまま確認すると、訪問者に返っているHTMLとは別のものを見てしまいます。シークレットウィンドウか、コマンドで取得したHTMLで確認します。
# 訪問者に返っているHTMLとヘッダーを保存する
curl -s -D headers.txt -o cached.html https://example.com/sample-page/
# キャッシュプラグインの最適化を止めた状態(ステージングなど)で同じページを保存し、差分を見る
curl -s -o plain.html https://staging.example.com/sample-page/
# タグごとに改行してから比べると差分が読みやすい(GNU sed の例)
diff <(sed 's/>/>\n/g' plain.html) <(sed 's/>/>\n/g' cached.html) | less
headers.txt には、キャッシュから返されたかどうかを示すヘッダー(プラグイン独自のヘッダーや age、CDNの cf-cache-status など)が含まれることがあります。HTMLを比べることで、どのタグが最適化で増えたのかがはっきりします。
増えやすいタグと、その出どころ
差分に出てきたタグから、どの機能が挿入したのかを推測できます。
- ページ末尾のHTMLコメント:キャッシュの生成日時やプラグイン名を記録した目印です。多くのキャッシュプラグインが出力します
<noscript>とdata-lazy-srcなどの属性:画像や動画の遅延読み込み機能が、元のsrcを置き換えたものですtype属性が書き換えられた<script>:JavaScriptの実行を遅らせる機能が、ブラウザにすぐ実行させないために付けたものです<link rel="preload">や<style>に入ったCSS:重要なCSSの先読みやインライン化の機能によるものです- 結合されたCSS・JSファイルへの
<link>や<script>:ファイル結合(コンバイン)の機能によるものです /cdn-cgi/を含むスクリプト:Cloudflareのメールアドレス難読化などCDN側の機能が挿入したもので、WordPressのプラグインではありません
属性名やコメントの文言はプラグインとバージョンによって異なります(2026年10月現在)。差分に出てきた文字列でプラグインのドキュメントを検索すると、該当する機能名が見つかることが多いです。
原因と修正(可能性が高い順)
1. 目印のHTMLコメントが入っている
ページ末尾のコメントは、キャッシュが正しく効いているかを確かめるためのもので、表示や検索結果に影響するものではありません。そのままにしておいて問題はなく、むしろ「キャッシュが効いているか」の確認に役立ちます。どうしても消したい場合は、プラグインの設定やドキュメントで、コメントの出力を止める方法が用意されているかを確認してください。用意されていない場合に出力バッファで無理に削除するのは、別の不具合を招きやすいのでおすすめしません。
2. HTMLの縮小(ミニファイ)でマークアップが崩れている
HTMLの縮小機能は、空白やコメント、省略可能な閉じタグや引用符を取り除きます。通常は問題ありませんが、インラインのJavaScriptやテンプレート内のコメントを前提にしたコード、<pre> 内の空白に依存した表示が崩れることがあります。表示が崩れたのが縮小の有効化後なら、まずHTMLの縮小だけを無効にして確かめます。HTMLの縮小で減るデータ量は、多くの場合、サーバーでの圧縮(gzipやBrotli)に比べて小さいため、無効にしても速度への影響は限られます。
3. 遅延読み込みが二重にかかっている
WordPressのコアは、画像に loading="lazy" 属性を自動で付けます。そこへキャッシュプラグインの遅延読み込みや、テーマ・画像最適化プラグインの同様の機能が重なると、<noscript> が重複したり、画像が表示されなかったりします。遅延読み込みは1つの仕組みにまとめるのが基本です。あわせて、ページ最上部のメイン画像(LCPの対象になりやすい画像)は遅延読み込みの対象から外す設定にすると、表示速度の指標が悪化しにくくなります。
4. JavaScriptの遅延実行・結合で動作が壊れている
JavaScriptを遅らせる機能や結合する機能は、<script> タグを書き換えるため、読み込み順に依存するスクリプト(jQueryに依存するスライダーやフォームなど)を壊すことがあります。症状が出たら、ブラウザのコンソールで is not defined などのエラーを確認し、原因のスクリプトを除外リストに追加します。除外の指定方法(ファイル名、キーワードなど)はプラグインごとに異なるので、設定画面の説明に従ってください。
5. エラーメッセージや管理用の表示がキャッシュされている
本番環境で WP_DEBUG_DISPLAY が有効のままだと、一時的に出たPHPの警告がHTMLに混ざり、その状態のページがキャッシュされて表示され続けることがあります。本番では次のように画面への表示を止め、ログにだけ記録します。
define( 'WP_DEBUG', false );
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', '0' );
設定を変えたら、キャッシュを削除して再生成します。警告の文言がHTMLに出ていた場合は、警告そのものの原因(古いプラグインなど)も修正しておきます。
6. 複数の最適化が重なっている
キャッシュプラグインを2つ同時に有効にしている、キャッシュプラグインと別の最適化プラグインの両方でCSS・JSの結合をしている、CDN側でもスクリプトの書き換え機能を有効にしている、といった重複は、タグの二重挿入や予測しにくい不具合の原因になります。ページキャッシュは1つのプラグイン(またはサーバーのキャッシュ)に任せ、CSS・JSの最適化も1か所にまとめます。CDNの最適化機能は、WordPress側と同じことをしていないかを確認し、重複していれば片方を止めます。
修正するときの手順
最適化機能は、まとめて変更すると何が効いたのか分からなくなります。次の順で進めると、原因を絞り込みやすくなります。
- 変更前にサイトとデータベースのバックアップを取る。可能ならステージング環境で作業する
- 最適化の機能を1つ無効にする
- プラグイン・サーバー・CDNのすべてのキャッシュを削除する
- ログアウトした状態でページのソースを確認し、問題のタグが消えたか、表示や動作が直ったかを見る
- 直らなければ設定を戻し、次の機能に進む
原因の機能が分かったら、機能全体を止めるのではなく、問題のファイルやページだけを除外できないかを先に検討します。速度の改善と表示の正しさを両立しやすくなります。
まとめ
- 増えたタグはサーバーが返したHTML(ページのソース)で、ログアウト状態で確認する。開発者ツールの「要素」はJavaScript実行後のDOM
- ステージングなどで最適化なしのHTMLを取り、差分から出どころの機能を特定する
- 目印のコメントは基本的に無害。崩れの原因になりやすいのはHTML縮小、遅延読み込みの重複、JavaScriptの遅延・結合
- 本番では
WP_DEBUG_DISPLAYを無効にし、警告がキャッシュに残らないようにする - 最適化は1か所にまとめ、機能を1つずつ切り替えて、そのたびにすべての層のキャッシュを削除して確認する