PageSpeed Insightsの次世代のツール：LightHouseについて
の記事の中で「LightHouse」という知らないワードがあったので調べました
次世代とか言っていますが、私が勝手にいっています。すいません
今まで（PageSpeed Insights）
今まではサイトを作ると「PageSpeed Insights」でチェックをして
パフォーマンスをチェックしていました
実際の例は以下のとおりです
次世代（LightHouse）
次世代のツール：LightHouseだとこれよりもっと細かいテストがされるみたいです
（表示は英語ですが、翻訳で対応できます）
PWAチェックリストもチェックされる
パフォーマンスもファーストVIEWとかもある
イメージタグのaltや色とかもチェックされます
どうしたらベストプラクティスになれるのかのアドバイスがあります
LightHouseのインストールと使い方
１・chromeで下記のURLを開く
２・拡張機能：LightHouseをインストールする
chromeのバーの部分に
LightHouseマークが表示される
３・検証したいページにいく
４・LightHouseマークを押してGenerate reportで作成される
node.jsでLightHouseを使う
node.jsでも同じ動作ができるようです
検証するサイトが多い場合はたぶんこちらがメインになる
インストールは下記のコマンドでOK
>npm install -g lighthouse
`-- lighthouse@2.1.0
+-- axe-core@2.2.1
+-- chrome-devtools-frontend@1.0.422034
・
・
・
| +-- code-point-at@1.1.0
| `-- is-fullwidth-code-point@1.0.0
| `-- number-is-nan@1.0.1
+-- window-size@0.1.4
`-- y18n@3.2.1
チェックは下記のコマンドで実行
>lighthouse http://masalib.hatenablog.com/ ChromeLauncher Waiting for browser. +0ms ChromeLauncher Waiting for browser... +4ms ChromeLauncher Waiting for browser...√ +548ms Lighthouse:warn The URL provided should be on HTTPS +728ms Lighthouse:warn Performance stats will be skewed redirecting from HTTP to HTTPS. +15ms status Initializing… +642ms ・ ・ ・ status Evaluating: Uses passive listeners to improve scrolling performance +52ms status Generating results... +3ms Printer domhtml output written to C:\vagrant\masalib.hatenablog.com_2017-06-26_18-28-32.report.dom.html +93ms CLI Protip: Run lighthouse with `--view` to immediately open the HTML report in your browser +3ms ChromeLauncher Killing all Chrome Instances +4ms
問題なければ実行されたフォルダにHTMLができます
オプションでJSONを指定とかできます
もちろん出力パスの指定も
例
lighthouse http://masalib.hatenablog.com/ --output json --output C:\作業用フォルダ
困ったらhelpを見るか
lighthouse --help
リファレンスを見る感じになります
https://github.com/GoogleChrome/lighthouse
