Yellow Lab Tools: サイトを色々深く解析して改善を提示してくれるツール

Google DevelopersのPageSpeed Insightsを参考にしてサイトを高速化 を書いた後に、 Twitterでこれ知ってる？と言われた Yellow Lab Tools が結構高機能で色々面白かったのでその紹介。

• Yellow Lab Tools

Yellow Lab Tools

Yellow Lab Tools はWebページを入力するとそのページを解析して、 HTML, JavaScript, CSS等について改善案を出してくれるWebツール。

Google DevelopersのPageSpeed Insightsを参考にしてサイトを高速化 を書いた後に、作者の人がTwitterでこれ知ってる?という感じでメッセージを送ってきたので見てみました。 (フランス人で多分日本語は読めないので単にPageSpeed Insightsという ワードを拾ってメッセージを流してるみたい。) いきなり来たのでちょっとあれかな、と思いましたが、 GitHubのレポジトリ の方も400以上Starが付いてたりしてよさ気なので試してみることに。

サイトの解析をしてくれるWebツールは沢山ありますが、 このツールの特徴としてはJavaScriptやCSSの内容についても細かく 解析してくれるところです。

このブログのトップページをやってみたところ

Yellow Lab Tools Tested url: http://rcmdnk.github.io/

例えば

• DOM complexity
  • DOM max depth

なんかは、HTMLを解析してDOMの深さの最大な所を指摘。

• Bad JavaScript
  • JavaScript errors
• Bad CSS
  • CSS syntax error

ではJavaScriptやCSSでエラーを指摘。

• Bad CSS
  • Duplicated selectors
  • Duplicated properties

ではCSSでの重複した指定を指摘。

• CSS complexity
  • Different colors

ではCSSで使ってる色の一覧を表示。

• jQuery
  • jQuery usage

では逆にjQueryを余り使ってないなら 代わりにVanilla JS ¹ を使ってみたら?的な事を指摘。

みたいな感じで他のサイト解析によくある ページ表示スピードに関するものに加え、 色々と細かいエラーとか改善案も示してくれます。