ブロックエディター用CSS「block-library」の読み込み停止でWP軽量化！wp-blockはグーデンベルグ用。

block-libraryの読み込みを停止する

先日使用していないCSSをチェックしていると

などなど、頭に「wp-block」が付いたクラスが目立ちました。
全ページで使用していない不要なCSSだったので調べたところ、新エディターであるグーデンベルグ用のCSSのようです。

block-libraryの読込先

block-libraryの容量は約60KB

読込先を確認してみると以下でした。

ブロックバイナリーというフォルダから読み込まれているようです。
当サイトの場合このスタイルシートの容量は58,144バイトで約60KBでした。

ブロックバイナリーは全ページで読み込まれますが、クラシックエディターしか使わない方にとっては不要です。

Gutenbergを使わないのであれば、この読み込みは停止しておく方が良いです。
何バイトであっても使わないCSSは読み込むだけ無駄ですので...

functions.phpで読み込みを停止する

ブロックバイナリーの読み込みを停止する方法は簡単です。

幸いにも読み込まれるファイルが他のものと分かれており、「wp-block-library」というハンドル名が付いているのでピンポイントで読み込みを停止できます。

子テーマのfunctions.phpなどに以下のコードをコピペすればOK！

//wp-block-library読み込み停止
function remove_unuse_css() {
    wp_dequeue_style('wp-block-library');
    }
add_action( 'wp_enqueue_scripts', 'remove_unuse_css' ,9999);

add_actionの第三引数に9999と適当な数字を入れています。
これは実行の優先順位で、10が初期値です。省略してもOKです。

動作確認

コードを追記して保存したら早速確認してみましょう！
キャッシュを使っている場合は更新して下さい。
そして念のためスーパーリロードで読み込んで確認しましょう。

block-libraryが読み込まれなくなった

OKですね！
グーデンベルグを一切使用していないのでレイアウトの崩れはありませんでした。

dashicaonsの読み込み停止について

ログインしている状態だと同じような状態のCSSで「.dashicons」という名のスタイルが確認できると思います。

これは管理画面用のスタイルシートですが、ログアウト状態だと読み込まれないので今回のような作業は不要です。

少し調べると昔は読み込まれていたのかも？
もしもログアウトしている状態でdashiconsが読み込まれており、停止したい場合は以下のコードをお試しください。

function remove_unuse_css() {
    //wp-block-libraryの読み込み停止
    wp_dequeue_style('wp-block-library');
    //dashiconsの読み込み停止
    wp_deregister_style('dashicons');
    }
add_action( 'wp_enqueue_scripts', 'remove_unuse_css' ,9999);

ほとんど同じですが、wp_deregister_styleを使っています。

ログイン中か否かで読み込みが変わってくるので、コードを追記する前にログアウト状態でdashiconsが本当に読み込まれているか確認してからにしてくださいね★

まとめ

Gutenberg用のCSSであるブロックライブラリーの読み込みを停止する方法でした。

グーデンベルグは日々アップデートされているようですが、イマイチ受け入れられておらず相変わらず不人気ですね…
余談ですが、グーデンベルグのスペーサーを使った余白の作り方なんかはHTMLのコードで見ると綺麗とは言えません。
SEOに影響があるかは不明ですが…そもそも使いにｒｙ

お読みいただきありがとうございました。