wp-block-library-cssを削除する方法。WordPressのHTMLが約3割軽くなった

まずは結論。
このブログが3割ほど軽くなりました。

🎥 この記事の内容は動画でも解説しています。

何をしたかというと、WordPressが毎ページ出している、ブロックエディタ用のCSSを止めました。
トップページは47.7KBから33.5KB、記事ページは38.6KBから24.5KBになりました。
止めるときは、wp_dequeue_style()だけでは足りません。
そこも書きます。

毎ページ出ているブロック用CSS

きっかけは、Xで見かけた品質監査のプロンプトです。
その観点で、本番のトップページと記事ページをClaude Codeに監査してもらいました。
すると、WordPress本体が出力するインラインCSSが、毎ページ4つ入っていました。

• wp-block-library-inline-css
• global-styles-inline-css
• classic-theme-styles-inline-css
• wp-img-auto-sizes-contain-inline-css

このうち上の3つは、ブロックエディタ向けのCSSです。
4つ目は192バイトと小さいので、そのままにしています。
でも、このブログの本文はHTMLで直接書いていて、ブロックはほぼ使っていません。未だにブロックエディタ苦手ですすみません・・・
使わないCSSを、毎回読ませていました。
もったいないです。

止める前に、ブロックを使っている投稿を探す

念のため止める前に、ブロックを使っている投稿が無いか確認します。
ブロックエディタで保存した本文には、<!-- wp:paragraph -->のようなコメントが入っています。
DBの本文からこのコメントを探せば、ブロックを使っている投稿が分かります。

本番のDBで探すと、見つかったのは3件でした。

• プライバシーポリシー(固定ページ)の段落ブロック
• YouTube埋め込みを入れた記事が2本

少ないです。
公開している記事と固定ページの大半は、ブロックを使っていませんでした。
この数なら、止めたあとに自分で見た目を確認できます。

wp-block-library-cssを削除するコード

止めるコードは、テーマのfunctions.phpに入れます。
このブログでは、そこから読み込んでいるファイルに、こう書きました。

add_action( 'wp_enqueue_scripts', function () {
	wp_dequeue_style( 'wp-block-library' );
	wp_dequeue_style( 'wp-block-library-theme' );
	wp_dequeue_style( 'classic-theme-styles' );
}, 100 );
remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );

1つ目のブロックが、wp-block-libraryとclassic-theme-stylesを止める処理です。
2つ目と3つ目のremove_action()が、global-stylesを止める処理です。

wp_dequeue_style()だけだと、global-stylesが残る

wp_dequeue_style()だけでは、global-stylesは止まりません。
wp_footerでも出力されるからです。
なので、出力元のアクションごとremove_action()で外しています。

外す前に、テーマ側で--wp--presetから始まるCSS変数を使っていないかも確認しました。
この変数はglobal-stylesが出しています。
使っているテーマだと、止めた時点で効かなくなります。
このテーマでは使っていませんでした。

止めた結果、HTMLは3〜4割軽くなった

止める前と後のHTMLサイズです。
思ったより減りました。

• トップページ: 47.7KB → 33.5KB(約30%減)
• 記事ページ: 38.6KB → 24.5KB(約37%減)

この記事を書く前に、本番のトップページを測り直しました。
HTMLは33,373バイトで、今も同じくらいでした。

減ったのは、HTMLの中に直接入っていたCSSの分です。
本文はもともと、ブロックの見た目に頼っていませんでした。

ブロックを使っている投稿は崩れないのか

崩れは出ませんでした。
ブロックを使っている3件も、止めたあとの表示は変わっていません。
WordPressは、使っているブロックの分だけCSSを個別に出すからです。

YouTube埋め込みの記事には、wp-block-embed-inline-css。
プライバシーポリシーには、wp-block-paragraph-inline-css。
必要な分だけ、個別に出ていました。
YouTube埋め込みの16:9の表示も、本番でそのまま保たれていました。
YouTube埋め込みやコードブロックの見た目は、自前のSCSSで当てています。

止める前の確認と、止めたあとの確認

1. DBで<!-- wp:を含む投稿を探す
2. --wp--preset系のCSS変数を使っていないか見る
3. 止めたあと、本文・目次・埋め込みを本番で見る
4. ブロックを使う投稿は、CSSが出ているか開いて確かめる

ブロックエディタで書く投稿が多いサイトは、確認が大変です。
その場合は、まず1ページだけ止めて試すのがおすすめです。

AIに任せたときの確認ポイント

今回は、監査もコードの修正も、Claude Codeに任せました。
任せるときは、「止めていい根拠」が揃っているかを見るのがおすすめです。
ブロックを使っていないとDBで確認できているか。
止めたあとの見た目を本番で確認したか。
この2つが無いまま「CSSを減らしました」と言われたら、待ったほうがいいと思います。