Lighthouse による監査方法
![Lighthouse によるスコア](https://thk.kanzae.net/wp/wp-content/uploads/2020/05/lighthouse-score.png)
Google Chrome、Opera、Vivaldi、Sleipnir、SRWare Iron など Blink エンジンを搭載した Chromium 系ブラウザでは Lighthouse(Audits) で Web サイトのパフォーマンスやアクセシビリティ・SEO などを監査することができます。
このページでは Lighthouse によるサイトの監査の仕方について解説します。
Lighthouse の使い方と監査手順
手順1: 開発者ツールを開く
まずは、ブラウザで監査したいサイトを開きます。
次にキーボードで、Ctrl + Shift + I を押します(またはブラウザのメニューから「開発者ツール」を選択します)
手順2: Lighthouse を開く
![開発者ツール](https://thk.kanzae.net/wp/wp-content/uploads/2020/05/lighthouse-use-1-530x362.jpg)
上記のような画面が出てきたら、Lighthouse(ブラウザによっては Audits)を選択します。
手順3: モバイルかデスクトップを選択
![Lighthouse](https://thk.kanzae.net/wp/wp-content/uploads/2020/05/lighthouse-use-2-530x362.jpg)
右上にある Device で、モバイルかデスクトップを選択します。
- モバイルを選択するとスマホで閲覧した際の状態をエミュレートして計測します
- デスクトップを選択すると現在 PC で閲覧してる状態をそのまま計測します
手順4: 監査を開始する
左上の「Generate report」を押すと監査を開始します。
![監査開始](https://thk.kanzae.net/wp/wp-content/uploads/2020/05/lighthouse-use-3-530x362.png)
手順5: レポートを確認する
![監査結果](https://thk.kanzae.net/wp/wp-content/uploads/2020/05/lighthouse-use-4-530x362.jpg)
監査の結果がレポートで表示されます。
Performance、Accessibility、Best Practice、SEO のそれぞれの数字を押すとレポートの詳細を見ることができます。
監査で減点されている項目をチェックしてみましょう。
最近のコメント