【重くて邪魔】WordPressのblock-libraryのＣＳＳを読み込まなくする方法（wp deregister script関数・functions.php）

こんにちは、管理人@SS_mshpです。

今回は、WordPressを新バージョンにしたときに、勝手に読み込まれるようになっていた、ブロックライブラリCSSを読み込まないようにしてみます。

ブロック表示するコンテンツを使う場合は必要かもしれませんが、そうでない場合は無駄なファイル読み込みが増えたりして、ちょっとやっかいです。さっそく読み込まないように設定してみましょう。

WordPressのblock-libraryのＣＳＳとは？

おそらくWordPress5からだと思うんですけど、こんな感じで『ブロックライブラリ』と名前がついたCSSが読み込まれるようになっていました。パスは『wp-includes/css/dist/block-library』で、WPコア内蔵のファイルです。ブロック表示には便利そうですが、管理人はそういう機能つかっていません。

CSSを開いてみたところです。びっちり書いています。これ結構重そうだな～（笑）

サイズも24kb。ブロック表示機能だけで、このサイトの倍のサイズのCSS使っていますね～。PageSpeed Insightsでは『CSS読み込みで表示速度低下』という判定になるほか、1日1000回リクエストがあれば2ギガです。サーバー負荷なども考えると、使っていないファイル読み込みは抑えたほうがよさそうです。

WordPress・block-libraryのＣＳＳを

以前、余計なjavascriptを読まなくするときに『wp_deregister_script』を使ったのを思い出しました。
https://wpdocs.osdn.jp/関数リファレンス/wp_deregister_script

これのスタイルシート版である『wp_deregister_style』を使ってみたいとおもいます。

block-libraryのＣＳＳを読み込まなくするコード（functions.php）

function名が『deregister_styles』だと、二重定義が怖かったんですが、貼ってみたところ大丈夫でした（ワードプレスの組み込み関数の場合　wp_deregister_style）。
海外のプログラマーの方でもfunction名が『deregister_styles』でＣＳＳをカットしている方はいるようです。気になるときは、あたまに○○○（オリジナルななんか文字列）_みたいにしても良いでしょう。

ちなみに、ＰＨＰでは定数や関数がカブってしまうと『二重定義エラー』を吐き出すようですので注意しましょう。
特に関数は『function hoge()とfunction Hoge()』が（大文字小文字で区別しないから）同じと認識されエラーというのもあります。エラーが出て貼れない場合は、二重定義なども確認するとよいでしょう。

使い方は、こんな感じでfunctions.phpに貼ります。

実行結果

このように、無事にブロックライブラリCSSが読み込まなくなりました。最近PageSpeed Insightsの判定内容がどんどん厳しくなっていますが（google無茶振りすんなよ笑）、体感的に、少し読み込みが早くなった気がします。スコアも2点くらいあがるでしょう。

あとがき・まとめ

• 最近のWordPressでは、ブロックライブラリCSSが読み込まれるようになっている
• ややサイズが大きいので、ブロック表示を使わない場合はカット推奨
• functions.phpにコードを書いて、読み込みを停止することができる

まとめるとこんな感じでしょうか。ブロック表示を使う場合は便利なCSSですが、使わない場合はfunctions.phpを少しカスタマイズして非読み込みにし、表示速度やサーバー負荷などを少し改善してもよさそうです。