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

wp-block-library読み込み停止_001

WordPress5.0から使えるブロックエディターのGutenberg...使っていますか?

僕は旧エディターの方が使いやすいので、未だに旧エディターを使っています。
グーデンベルグは全く使用していないのですが、このグーデンベルグ用のCSSが全ページで読み込まれていることに気が付きました。

wp-block」というクラスがあれば、それはグーデンベルグ専用のCSSです。
wp-block-library」内からこのCSSが読み込まれるので、読み込みを停止してサイトを少し軽量化しました。

旧エディターしか使わない方には"使用していないCSS"で不要です。

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

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

.wp-block-audio
.wp-block-button
.wp-block-calendar

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

block-libraryの読込先

wp-block-library読み込み停止_001

block-libraryの容量は約60KB

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

/wp-includes/css/dist/block-library

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

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

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

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

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

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

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

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

コードのポイントを特記すれば

!current_user_can('read')

というのがログイン中のユーザーではないという条件分岐です。
閲覧者や検索エンジンにwp-block-libraryが読み込まれなくなります。

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

動作確認

コードを追記して保存したら早速確認してみましょう!

ログアウトしてから確認します。
「ログイン中のユーザーではない場合」という条件をつけてありますので...
Wordpressの管理画面にログインしている状態では読み込まれます。

wp-block-library読み込み停止_002

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

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

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

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

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

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

function remove_unuse_css() {
if (!current_user_can('read')){
    //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に影響があるかは不明ですが…そもそも使いにry

60KBに満たないスタイルシートの読み込み停止...
数MBのWebページとってそれはわずかなことかもしれない...
だがそれをわずかと笑える者はチューニングを語る資格は無い!

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

-Wordpress
-,

© 2021 ソロ学