PageSpeed Insights内の「使用していないCSSの削減」を
簡単に見つけ出してくれるWebサービス。
チェックしたいURLを入力するだけで
CSSをプロパティ毎に表示します。
![PageSpeedの【使用していないCSSの削減】を見つけ出すWebサービス 『Unused CSS finder』](https://pc.mogeringo.com/wp-content/uploads/2022/11/unusedcssfinder-thumb.jpg)
目次
リンク先
使い方
![PageSpeedの【使用していないCSSの削減】を見つけ出すWebサービス 『Unused CSS finder』](https://pc.mogeringo.com/wp-content/uploads/2022/11/unusedcssfinder1.jpg)
使い方は簡単でチェックしたいページのURLを入力するだけです。
![PageSpeedの【使用していないCSSの削減】を見つけ出すWebサービス 『Unused CSS finder』](https://pc.mogeringo.com/wp-content/uploads/2022/11/unusedcssfinder6.jpg)
ルートURLという事でこのブログだと「https://pc.mogeringo.com」となります。
階層ページなども辿ってくれます。
![PageSpeedの【使用していないCSSの削減】を見つけ出すWebサービス 『Unused CSS finder』](https://pc.mogeringo.com/wp-content/uploads/2022/11/unusedcssfinder2.jpg)
入力して「CRAWL FOR UNUSED CSS」をクリックするとチェックが始まります。
ページ内のリンクを辿っていきルートURLから検出したページ内で
使われていないCSSプロパティをチェックしてくれるようです。
![PageSpeedの【使用していないCSSの削減】を見つけ出すWebサービス 『Unused CSS finder』](https://pc.mogeringo.com/wp-content/uploads/2022/11/unusedcssfinder3.jpg)
Doneと記述されそこから使われていないCSSプロパティを表示します。
かなり膨大な数のCSSプロパティが使われていないようです。
![PageSpeedの【使用していないCSSの削減】を見つけ出すWebサービス 『Unused CSS finder』](https://pc.mogeringo.com/wp-content/uploads/2022/11/unusedcssfinder4.jpg)
PageSpeed Insightsのスコアは100となっていますが、
![PageSpeedの【使用していないCSSの削減】を見つけ出すWebサービス 『Unused CSS finder』](https://pc.mogeringo.com/wp-content/uploads/2022/11/unusedcssfinder5.jpg)
使用していないCSSの削減という項目でかなりの量のデータがあったので
チェックしてみた所こんなに使われていないCSSがありました。
レビュー
現在Wordpressのテーマ「SWELL」でAutoptimizeというプラグインを使ってみた所
こんなに大量に出てきてしまいました。
恐らくテーマ側で自動でCSSなど最適化してくれているのに
AutoptimizeでCSSをまとめて1つのCSSに最適化した事が原因と思われます。
やはりテーマSWELLで公式でも書いてある通り、Autoptimizeを使うと
不具合が出そうです。
その他のテーマなどでは使われていないCSSの削減の問題を解決するのに
とても便利なWebサービスだと思います。
コメント