サイトスピード改善

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

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

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

block-library/style.min.cssとは

ページスピードインサイトで「改善できる項目」の「使用していない 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用のスタイルシートを読み込まないようにすることがおすすめです。

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

block-library/style.min.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 を削除してください」「レンダリングを妨げるリソースの除外」の一部が改善され、ページスピードインサイトスコアが向上します。

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

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

フリーランスエージェントおすすめ2選

ITプロパートナーズ … 「週2~3日」「リモート」など魅力的な案件多数。単価も高いので少ない稼働日数でも十分な固定収入を確保。
安心して自分のビジネス収入の柱づくりにも注力できる。セミリタイア生活におすすめのエージェントNo.1!

Midworks(ミッドワークス) … 「フリーランス」と「正社員」の良いとこ取りをした働き方を実現!保障・保険・費用補助・福利厚生が充実。
他のエージェントに類を見ない、安心して独立できる保障の手厚さが特長。週3~5日の常駐案件メイン。

  • この記事を書いた人
ナノ経営研究会

ナノ経営研究会

働く時間を減らしながら豊かになる一人経営マガジン『ナノ経営®』

創業10年。Webコンサルタント。
一人社長セミリタイアコンサルタント®。
ナノインスパイア株式会社 代表取締役。

ビジネス収入や資産収入の柱を構築しながら自由と余裕を手に入れ、自分の人生を100%楽しむ一人経営の知識・情報・考え方などを発信します。

お金・時間・心の余裕に溢れ、いつもワクワク生き生きと輝くセミリタイア一人社長を増やします。

一人でも多くの人とともにより良くなっていけるよう、お互いに成長していけるよう、微力ながら執筆していきます。

24歳 Web制作・コンサル起業 ▶︎ 25歳 株式会社設立 ▶︎ 29歳 5年連続年商アップ、最高年商なのに判断を誤り初の大赤字、しかも多忙すぎて挫折 ▶︎ 事業再生専門・公認会計士の先生の門下生となる ▶︎ 経営・戦略・ビジネスモデル・会計・マーケティング・問題解決などを原理・原則から学び修業 ▶︎ 31歳(2019年) 独自の経営改善により、働く時間は半分以下に↓↓、手元に残るキャッシュは大幅アップ↑↑

-サイトスピード改善