TAGS :,

HTMLやCSSの記述はサイト上の表示だけでなく、レンダリングスピードや更新性にも影響することで、できるだけ複雑にならないようにシンプルに構成することが大切です。

そんなHTMLやCSSの解析ツールは様々ありますが、URLを入力するだけでWebサイト内のCSSファイルを解析して、パフォーマンス、保守性、複雑性に焦点を当てたスコアを出してくれる「Online CSS Code Quality Analyzer」が便利だったので紹介します。

Online CSS Code Quality Analyzer – Project Wallac


Online CSS Code Quality Analyzer – Project Wallac

解析方法は、ページ上にある入力フォームに解析したいサイトのURLを入力をする「Analyze URL」と、CSSファイルをアップロードする「Analyze File」と、CSSの内容を直接入力する「Analyze CSS input」の3パターンあります。

オプションに「Prettify CSS」のチェックがあり、チェックすることで整形したCSSを生成してくれます。

解析結果は以下の3項目それぞれ0～100ポイントでスコア付けしてくれます。
※サイト上には、CSS版のPageSpeed Insightsのようなものと紹介されています。

  • ・Maintainability（保守性）
  • ・Complexity（複雑性）
  • ・Performance（パフォーマンス）

当ブログの解析を行ってみると以下のような結果に…
（ブログを運用していく中でCSS構成がだいぶゴチャついてしまってます…）

各項目のスコアだけでなく、以下のような項目等でとても細かくCSS構成をチェックして、どこを改善することでパフォーマンス、保守性、複雑さを解消できるか改善策を提示してくれます。

  • ・CSSファイル内のコメントの削除
  • ・セレクタの複雑度
  • ・宣言の重複
  • ・空のルールセットの削除
  • ・IDセレクタの使用率

Webサイト公開時や、長い期間運用しているWebサイトのCSSチェックにも活用できるかと思います。

WebサイトのCSSを解析して最適化する際にぜひ。。。