Google PageSpeed Insightsで「使用していない CSS を削除してください」と提案されたので対処してみた

公開日: 使い方など

このサイトは独自テーマ「ha-Basic」を使って運営し、サイトの高速化やGoogle PageSpeed Insightsのスコア対策についてはプラグインに頼らず、テーマの機能として実装したり、追加コードを入れたりして対処しています。

2021年3月14日現在の投稿や固定ページの数は2000超、使用しているプラグイン数も24個と多い方だと思うので、現在のGoogle PageSpeed Insightsスコアとしてはまあまあかなと思っています。

が、どうしても消えなかったのが「使用していない CSS を削除してください」という提案事項。よく見るとこれらはテーマの問題で出力されているものではないのです(以下が実際の画像です)

一番上の行はGoogleフォントでしかも管理画面側で適用されているもの、そんなの使ってないから多分プラグインかWordPress本体の仕業、その他についてもWordPressの管理画面側のものでした。

そこでこれらを改善するコードを作り対処しましたので、備忘録を兼ね紹介しておきます。

この対処でスコアが大幅改善する・・なんてことは期待しない方がいいですが、気になっている方の参考になれば幸いです。

WordPress特有のCSS読み込みが原因で、「使用していない CSS を削除してください」とGoogle PageSpeed Insightsで指摘されるときの対処方法

結論からいうと、同じ状況であれば、テーマのfunctions.phpへ以下のコードを追記して保存するだけです。

/** ブロックエディタ用googleフォントの読み込みを削除 **/
function ha_remove_wp_block_css_nonuser() {
if (!current_user_can('read')){
	//ブロックエディタ用のGoogleフォント
	wp_deregister_style( 'wp-editor-font' );
    wp_register_style( 'wp-editor-font', false );
	//ダッシュアイコン
	wp_deregister_style( 'dashicons' );
    wp_register_style( 'dashicons', false );
	//管理画面用のスタイル
	wp_deregister_style( 'wp-components' );
    wp_register_style( 'wp-components', false );
	//ブロックエディタ用のスタイル
	wp_deregister_style( 'wp-block-editor' );
    wp_register_style( 'wp-block-editor', false );
}
}
add_action( 'wp_enqueue_scripts', 'ha_remove_wp_block_css_nonuser' );

ハイ終わり・・ではちょっと芸がないので、コードについてちょっと説明しておきます。

一行目は独自関数名の宣言、最終行はアクションフック(そのように動きなさいという命令)です。

その中に一応管理画面側やログインしたユーザーの表示で問題が起きないよう、ログインしていない訪問者のみ(Google PageSpeed Insightsからのアクセスも訪問者)に適用するようにしています。

if (!current_user_can('read')){
}

そして中身は

wp_deregister_style( 'CSSのID' );
wp_register_style( 'CSSのID', false );

というのを一組にして、

  • wp_deregister_styleでそのIDのスタイルを無効にしてください
  • wp_register_styleでそのIDのスタイルを有効化しないでください

と二重に読み込まないようにするコードを書いています。

通常のCSSやスクリプトを無効にする場合、基本的に上段のコードだけで無効になるのですが、その措置では消えなかったため、とどめ?に有効化しないで!というコードを付加しています。実際このコードで読み込まれなくなりました。詳しいロジックは把握していませんが、WordPressにとって必要なものとして何度かチェックと有効化がされるのでは?と勝手に想像してます。


簡単ですが、これで対策は完了です。

WordPressではこのような機能を含めた高速化系のプラグインが多数リリースされていますし、ページそのものを別場所へページそのものとして保存して表示させる「キャッシュ系」プラグインも多数ありますが、今回のように出てきた事項に対して1つ1つ対処していけば済む話ですし、何より余分な処置をさせなくて済みます。

このサイトのようにWordPressでのサイト作成に役立つ情報は本当に星の数ほどあり、調べればかなりの確率で紹介されていますから、ぜひいろいろとチャレンジしてみてください。

おまけ CSSやスクリプトのIDを調べる方法

ここまででさらっとIDをと書いてきましたが、ID??という方もいるかも知れません。そこでおまけ情報として、WordPressがページ表示時に生成するCSSやスクリプトのIDを調べる方法を紹介しておきます。

まずはご自身のサイトのトップページ、もしくは任意のページを表示してください。

そして、ページの中ほど(基本どこでもよい)で右クリックして、「ソースを表示」(ブラウザによって多少文言は違います)をクリックします。

出てくるのがHTMLと呼ばれるインターネット共通の言語で、これをウェブブラウザが認識していい感じに表示してくれるようになっています(WordPressは簡単にこのコードを作るための仕組みであると言えるでしょう)。

ソースが表示されたら、ゆっくりスクロールしていってみてください。以下のようなコードが記述されている箇所があると思います。

<link r<link rel='stylesheet' id='◎◎'  href='〇〇'...>
<script type='text/javascript' src='〇〇' id='◎◎'></script>

上の記述がスタイルシート(デザイン要素、CSS)、下の記述がスクリプト(何かの動作をつかさどるプログラム)です。

そして、コード中の◎◎の部分がIDになります。

今回紹介したコードで、CSSに対して無効にする場合には

wp_deregister_style( '◎◎' );

スクリプトに対して無効にする場合には

wp_deregister_script( '◎◎' );

という風に、「style」と「script」の違いがあるので注意しましょう。

また、何かを読み込ませたい(有効にしたい)ときは「dequeue_××」の代わりに「enqueue_××」にすればOKです。

あとはして、

  • 不要なCSSやスクリプトを特定
  • 本編で紹介したコードのように独自関数を作る
  • CSSやスクリプトを無効にする構文を入れる
  • 最後にadd_actionフィルタを使ってWordPressに特別な動作を指示する

というコードを作って、今有効化しているテーマのfunctions.php末尾へ追記すればよいでしょう。

おまけ2 スコア改善の優先順位考

完全に今回の件とは離れてしまいますが、冒頭でも書いた通り、この措置をしてもそれほどスコアに影響はありません(むしろ本当に最後の最後に気になるようだったらという措置です)。

WordPressで表示速度の改善やGoogle PageSpeed Insightsのスコア改善について調べると、

  • レンダリングをブロックしているスクリプトを遅延させる
  • CSSをプリロードする
  • スクリプトやCSSを圧縮して出力する
  • キャッシュ系プラグインを使って、事前にページを作っておく

などといったテクニック的なものばかりが目立ちます。

でも・・・本当に大事な改善は別のところにあります。それは・・

ページの転送量を減らすこと

です。

最近では、WordPressが軽く動くように高性能なサーバーがたくさんあり、光や5Gといった高速通信があり、パソコンやスマホの性能がアップしたことで、大容量のページも軽く表示されるようになりましたから、ページの転送量を気にする人が少なくなりました。

ただ、ページを読み込むためのファイルの容量が少なくすることは、間違いなく転送にかかる時間を減らすことにつながるし、たくさんの人が同時アクセスした時でもサーバーや通信網に負担をかけなくなるのでスムーズにつながるようになりますから、絶対に優先順位は一番に対策した方がいいと思います。

インターネットで表示するページの容量で一番大きいのは「画像」です。デジカメやスマホで撮ったビッグな画像をそのままアップロードしていませんか??これをアップロードする前にFree Online Image Compressorなどのサービスを使って一度圧縮してみてください。中には1/3程度にまでファイルの大きさを縮小できる場合があります。

WordPressでは、一度アップロードした画像を再度圧縮して入れ替えるという作業はとても大変ですし、やりにくい作業ですので、まずは今後の画像に対して画像の圧縮を行うようにしてみてください。

また、スコアが大幅に残念な場合でも、前述したテクニック的な改善を行うよりも、圧縮された画像と入れ替える作業を行った方が、はるかに効果が出ます。過去の投稿へ挿入した画像の容量を減らす(圧縮したものと入れ替える)ことで、表示速度の改善、スコアアップの効果が期待できますので、時間のある時にぜひやってみてください。

本当にびっくりする改善できますよ。


なんだか記事の主旨とは違うことの方がたくさん書いてしまった感がありますが、少しでも状況改善して、見る人に快適、かつ、Googleにアクセスしやすいページと認識されるように頑張りましょう!!

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。