rcmdnk's blog

20150714_yellowlabtools_200_200

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

Sponsored Links

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で使ってる色の一覧を表示。

  • jQuery
    • jQuery usage

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

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

Sponsored Links
Sponsored Links