KumaTechLab
2021-09-13/2023-05-23

不要なCSSをチェックするツール

不要なCSSをチェックするツール

今回は不要なCSSをチェックするツールを紹介します。

最近は「PageSpeed Insignts」などでしっかりとサイトのパフォーマンスをチェックしている人も多いですよね。

そのようなWebのチェックツールでよく指摘される項目で多いのが「画像」「css」「javascript」あたりです。

今回はその中の「css」に着目していきたいと思います。

「css」で有効な解決策はページ表示時に必要なcssをインラインで読み込んでその他のcssを遅延読み込みする方法です。

ところで「ページ表示時に必要なcss」とは？　と思う人もいるでしょう。

「ページ表示時に必要なcss」 = 「スクロール無しで表示されるcss」

「スクロール無しで表示されるcss」 のみ抽出するのは難しいです。

なので今回は、

「スクロール無しで表示されるcss」　≒　「そのページで必要なcss」

と考えて 「そのページで必要なcss」 を取り出していきます。

cssって全部必要じゃないのと思う人もいるかもしれませんね。

WordPressのテーマのcssなんかはわかりやすいのですが、基本的に一つのcssファイルですべてのスタイルを管理しています。

TOPページのスライダーのcssに、投稿ページの吹き出しのcssに、お問い合わせのフォームのcssに・・・

というのがすべて入っています。

そのためページ表示時には必然的に必要のないスタイルを読み込んでしまっているとわけです。

それでは必要なcssのみ取り出すにはどのようにしたらよいでしょうか？

ここからが本記事の本題である「不要なCSSチェックツール」の出番です。

不要なCSSチェックツール 「PurinfyCSS Online」

紹介するツールは「PurinfyCSS Online」です。

使い方は簡単でWebサイトのURLを入力し、「Clean up CSS」ボタンを押すだけです。

そうすると上記画像のように結果が表示されます。

  • before・・・現在のサイズ
  • after・・・不要CSS排除後のサイズ
  • used・・・使用率
  • unused・・・未使用率

おそらくメインのcssファイルのunusedが高い結果になるのではないかと思います。

私の場合はプラグインのautoptimizeによって一つにまとめられたcssファイルが「80％以上も未使用」と表示されています。

それで不要なCSSはわかったけどどうすればいいの？

と思う人もいるでしょう。

「show clean css code」というボタンをクリックしてみてください。

圧縮されたCSSコードがつらつらと表示されると思います。

このコードが必要なCSSのみをまとめたものです。

必要なCSSが判明すれば、その次にするのは対応ですね。

インラインで出力する【WordPress】【開発者用】

WordPressに限定して紹介していきます。

WordPressでない場合は利用している環境で調整してください。

TOPページで出力していく例です。

まずはインラインで出力します。

add_action( 'wp_head', function() {
    if ( ! is_front_page() ) return;
    ob_start();
    ?>
    echo 'コピーした「使用しているCSS」';
    <?php
    echo ob_get_clean();
} );

次はCSSファイルを出力しないようにしていきます。

hook順一覧

add_action( 'wp_head', function() {
    if ( ! is_front_page() ) return;
    wp_dequeue_style( 'cssのhandle名' );
} );

以上の作業でTOPページではインラインCSSのみ有効になるはずです。

ただ、高速化のために様々なプラグインを使用している場合にはうまくいかないこともあります。

まとめ

指定ページに必要なCSSのみ取得することができるツールの紹介でした。

私の環境でも 「PurinfyCSS Online」 で取得したCSSのみでトップページをを見たところ正常に機能していました。

しかし、wpX Speedのサーバーキャッシュのおかげでcssファイルの取得時間がほとんどかからないので、速度的な検証は行えませんでした。。。(【速度計測】wpX Speed、mixhost、Hostingerで検証)

2020 KumaTechLab.