Subscribed unsubscribe Subscribe Subscribe

使用していないCSSを削除するには

WEBサイトで重要なのがパフォーマンスです。

0.1秒が大きな影響を与えます。

イライラしやすいユーザーにとっては特にパフォーマンスが重要です。

そんな中、ChromeのAuditsを使用してみると、多くのサイトで以下のような改善点が報告されます。 今回はRemove unused CSS rulesをどう解消するかについて書いていきます。

Network Utilization
  Minimize cookie size

Web Page Performance
  Optimize the order of styles and scripts (1)
  Put CSS in the document head (6)
  Remove unused CSS rules (725)
  Use normal CSS property names instead of vendor-prefixed ones (65)

ちなみにAuditsとはその名の通り、ページの監査をしてくれる機能です。
chromeディベロッパツールにデフォルトであります。

Chrome DevTools Overview - Google Chrome

解決策は単純です。

以下のアドオンをchromeに入れて、 使用しているcssだけをまとめたcssファイルをダウンロードしてみてください。

chrome.google.com

そして、落ちてきたcombined.cssの中身のみをそのページで読みこめばいいです。 ※レスポンシブデザインの場合は各スマホ、タブレット、PCのUAでのcombines.cssを結合する必要があります。

最近、CSSはページごとでいいのではと思い始めました。

無駄な脂肪(使用されていないCSS)は不要です。

CSS体脂肪率0%が理想です。
※レスポンシブデザインの場合はスマホを表示している場合はタブレット、PC用のCSSは余分な脂肪となりえます。