テクニカルSEO

wp-block-library-css(Gutenberg用のCSS)を読み込まないようにする方法

wp-block-library-css(Gutenberg用のスタイル)を読み込まないようにする方法

ページスピードインサイトで「改善できる項目」の「使用していない CSS を削除してください」や「レンダリングを妨げるリソースの除外」の中に「block-library/style.min.css」が表示されていませんか?

それはWordPressのバージョンアップに伴う新しいエディタ、Gutenberg(グーテンベルク)用のスタイルシートです。

https://example.com/xxxxx/wp-includes/css/dist/block-library/style.min.css?ver=5.2.3

お好みにもよりますが、多くの方はバージョンアップ前のClassic Editorを使用しているのではないでしょうか。

その場合は、Gutenbergのスタイルシートを読み込むことは本来不要です。

しかもそのスタイルシートが、ページの読み込み・表示を妨げてページスピード低下につながっているため、強制的にGutenberg用のスタイルシートを読み込まないようにすることがおすすめです。

この記事では、wp-block-library-css(Gutenberg用のCSS)を読み込まないようにして、ページスピードを速くする方法をご紹介いたします。

使用していないCSSを削除してください wp-block-library-css

wp-block-library-cssを読み込まないようにする方法

WordPressテーマファイルのfunctions.phpを編集

WordPressテーマファイルの中のfunctions.phpを編集します。

functions.phpの編集は、誤ってしまうとサイトが表示されなくなるリスクもありますので、WordPress管理画面からの編集はおすすめしません。

サーバーからファイルをダウンロードし編集していただいた方が良いです。

編集の前には、必ずWordPressサイトデータ一式のバックアップをお取りください。

もしWordPress管理画面から編集する場合は、外観→テーマエディター→functions.phpを選択します。

WordPress管理画面 外観 functions.phpの編集

functions.phpに貼り付けるソースコード

市販のWordPressテーマを利用している方は、親テーマのfunctions.phpを編集しても、アップデートする際に上書きされてしまいます。

子テーマを適用し、子テーマのfunctions.phpの末尾に以下のプログラムを記述しましょう。

//////////////////////////////////////////////////
//Gutenberg用のCSSを読み込まない
//WordPressに含まれているjQueryを読み込まない
//////////////////////////////////////////////////
function my_delete_plugin_files() {
//IDを指定し解除
wp_deregister_style('wp-block-library');
wp_deregister_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'my_delete_plugin_files' );
WEMO.techさん、ハックノートさんの記事に学ばせて頂きました。ありがとうございます。

Gutenberg用のCSSを読み込まないだけでなく、ついでにWordPressのwp-includesディレクトリの中のjQueryも読み込まないように指定しています。

jQueryはサーバー内に置いておくよりも、GoogleのCDNから読み込む方が高速化しやすく便利です。

そのため、WordPressデフォルトのjQueryを読み込まないようにしています。

GoogleのCDNからjQueryを読み込むためには、以下のようなコードをfooter.phpなどに記述します。
必要なjQueryのバージョンにより、コードは変わります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

コードの記述位置、読み込む順番によっては、プログラムが正常に動作しないためご注意ください。

まとめ

これで「使用していない CSS を削除してください」「レンダリングを妨げるリソースの除外」の一部が改善され、ページスピードインサイトスコアが向上します。

その他のページスピード改善方法については、以下の記事をご参照ください。

ページスピード高速化に関する記事一覧

ページスピードインサイトをもとにサイトスピードを改善する方法リンクをクリックしてから、ページが読み込まれ表示されるまでの時間が長くなりすぎていませんか? 「読み込みが遅い、サイトが重たい」と...
ABOUT ME
渡部 瞬
一人ビジネス戦略家&Webコンサルタント。得意分野は、テクニカルSEO。 「1ヵ月後に月間PV数1.7倍、2ヵ月後に月間PV数2.3倍」や「7ヵ月後に月間オーガニック流入数 100万件超、前年比507%」など改善実績・事例多数です。 個人起業家から上場企業まで、7年間で180以上のWebマーケティング、Webサイト改善に携わり事業成長を支援しています。 エンジニア・デザイナー・クリエイター、コーチ・コンサルタントなど、労働集約型ビジネスの一人社長・複業家・フリーランス・副業サラリーマンの方向けに、一人ビジネス専門メディア『ナノ経営』を運営。 一人ブラック企業状態を脱却し、週3日稼働で高収益な一人ホワイト企業に転換するための情報を発信しています。 お問い合わせフォームはこちら »
現状分析・課題抽出のためのSEO診断

●対応内容:
サイトの現状調査・分析により、順位上昇・SEO対策の効果を高めるための改善点・課題点抽出を行います。

●成果物:
Word数ページにて、チェック項目・改善点を一式ご報告させていただきます。

※箇条書き、テキストベースのシンプルな体裁とさせていただいておりますが、ご了承いただけましたら幸いです。

※調査結果とあわせてご参考までに、改善・改修作業を弊社で対応させていただく場合のお見積もりをお送りさせていただきます。

※改善・改修作業をこちらで対応させて頂く場合は、調査料金3万円をお見積もりから差し引かせて頂きます。

●所要期間:
お振り込み頂き着手してから、1週間以内に調査結果をお送りさせていただきます。

【特典】
Googleデータポータル(旧Googleデータスタジオ)を活用し、アナリティクスやサーチコンソールの各種データを連携して作成した10ページ前後のアクセス解析オンラインレポートをご提供します。

アナリティクスよりもアクセスの推移やコンバージョン数(申込数、成約数)などの成果が見やすくなります。
Googleデータポータルの仕様が変わらなければ、無料でずっと使えます。

毎日自動でデータが反映され、日々の指標確認、アクセス分析、スピーディーな打ち手検討、モチベーション維持などにご活用いただけます。

【料金】
現状分析・課題抽出のためのSEO診断 一式 30,000円(税別)

SEO診断に申し込む »