【重くて邪魔】WordPressのblock-libraryのCSSを読み込まなくする方法(wp deregister script関数・functions.php)
2019/04/29
こんにちは、管理人@SS_mshpです。
今回は、WordPressを新バージョンにしたときに、勝手に読み込まれるようになっていた、ブロックライブラリCSSを読み込まないようにしてみます。
ブロック表示するコンテンツを使う場合は必要かもしれませんが、そうでない場合は無駄なファイル読み込みが増えたりして、ちょっとやっかいです。さっそく読み込まないように設定してみましょう。
WordPressのblock-libraryのCSSとは?
おそらくWordPress5からだと思うんですけど、こんな感じで『ブロックライブラリ』と名前がついたCSSが読み込まれるようになっていました。パスは『wp-includes/css/dist/block-library』で、WPコア内蔵のファイルです。ブロック表示には便利そうですが、管理人はそういう機能つかっていません。
CSSを開いてみたところです。びっちり書いています。これ結構重そうだな~(笑)
サイズも24kb。ブロック表示機能だけで、このサイトの倍のサイズのCSS使っていますね~。PageSpeed Insightsでは『CSS読み込みで表示速度低下』という判定になるほか、1日1000回リクエストがあれば2ギガです。サーバー負荷なども考えると、使っていないファイル読み込みは抑えたほうがよさそうです。
WordPress・block-libraryのCSSを
以前、余計なjavascriptを読まなくするときに『wp_deregister_script』を使ったのを思い出しました。
https://wpdocs.osdn.jp/関数リファレンス/wp_deregister_script
これのスタイルシート版である『wp_deregister_style』を使ってみたいとおもいます。
block-libraryのCSSを読み込まなくするコード(functions.php)
function名が『deregister_styles』だと、二重定義が怖かったんですが、貼ってみたところ大丈夫でした(ワードプレスの組み込み関数の場合 wp_deregister_style)。
海外のプログラマーの方でもfunction名が『deregister_styles』でCSSをカットしている方はいるようです。気になるときは、あたまに○○○(オリジナルななんか文字列)_みたいにしても良いでしょう。
ちなみに、PHPでは定数や関数がカブってしまうと『二重定義エラー』を吐き出すようですので注意しましょう。
特に関数は『function hoge()とfunction Hoge()』が(大文字小文字で区別しないから)同じと認識されエラーというのもあります。エラーが出て貼れない場合は、二重定義なども確認するとよいでしょう。
使い方は、こんな感じでfunctions.phpに貼ります。
実行結果
このように、無事にブロックライブラリCSSが読み込まなくなりました。最近PageSpeed Insightsの判定内容がどんどん厳しくなっていますが(google無茶振りすんなよ笑)、体感的に、少し読み込みが早くなった気がします。スコアも2点くらいあがるでしょう。
あとがき・まとめ
- 最近のWordPressでは、ブロックライブラリCSSが読み込まれるようになっている
- ややサイズが大きいので、ブロック表示を使わない場合はカット推奨
- functions.phpにコードを書いて、読み込みを停止することができる
まとめるとこんな感じでしょうか。ブロック表示を使う場合は便利なCSSですが、使わない場合はfunctions.phpを少しカスタマイズして非読み込みにし、表示速度やサーバー負荷などを少し改善してもよさそうです。
【カテゴリ】 - webサイト高速表示 【タグ】 - functions.php
関連記事
-
-
【PHPパフォーマンス】モジュールモード5.6と、CGIモード7.1どちらが快適に利用できた?→モジュール5.6です。ベストは7.3モジュールかも
今回は、管理人がやってみた実験『PHP・モジュールモード5.6と、CGI …
-
-
【WordPressモバイル高速化】pagespeed insightsモバイルスコアが大きく低下→原因はgoogle、お前だ(アドセンス自動広告)
今回は、WordPressサイト(重い)の高速化に取り組んでいて、pag …
-
-
【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装
今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニューをサイ …
-
-
【WPサイト高速表示】ロリポWPコンテンツキャッシュで、速度の変動があるようです(不安定)
今回は、サイト表示速度に関わるキャッシュ話題です。 以前ロリポサーバーで …
-
-
【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処
今回は、『遅い』とされていた(過去形)wordpressサイトを『Pja …
-
-
【ロリポwordpress高速表示でSP90超えろ】ロリポップサーバーで『コンテンツキャッシュ機能』提供開始・設定方法と効果のチェック
今回はサイトを高速表示するときに重要なポイントといえる『キャッシュ活用』 …
-
-
【WPテーマを軽くカスタマイズ】プチ静的化して、データベースアクセスやPHPファイルをへらしつつ同じデザインで
今回は管理人も利用しているWP(wordpress)サイトで、ちょっとだ …
-
-
【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう
今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …
-
-
Googleがスマホ表示速度をランキング要因にすると発表・サイト制作者/ユーザーの対策は?
今回は2018年1月に、Googleの検索順位に影響する内容が公式に発表 …
-
-
CSSを限界圧縮してヘッダーに書くと、表示速度は速くなるの?(fc2ぶろぐで実験)
今回は、サイトを高速表示するCSSの書き方についてです。 管理人が昔使っ …
-
-
【ワードプレスサイト高速化プラグイン】Speed Up-JavaScript To Footerで、表示速度を速くする方法
今回は、ワードプレスサイトの使い勝手(読者から見た)を向上させるプラグイ …
-
-
【サイト高速表示】ワードプレステーマ・stinger(5)のCSS軽量化!どれくらい小さくなる?
今回は、前回やったCSS縮小続きで、『書き方変えたり、いらない部分カット …