Lighthouse による監査方法

2020年3月31日

Google Chrome、Opera、Vivaldi、Sleipnir、SRWare Iron など Blink エンジンを搭載した Chromium 系ブラウザでは Lighthouse(Audits) で Web サイトのパフォーマンスやアクセシビリティ・SEO などを監査することができます。

このページでは Lighthouse によるサイトの監査の仕方について解説します。

Lighthouse の使い方と監査手順

手順1: 開発者ツールを開く

まずは、ブラウザで監査したいサイトを開きます。

次にキーボードで、Ctrl + Shift + I を押します(またはブラウザのメニューから「開発者ツール」を選択します)

手順2: Lighthouse を開く

上記のような画面が出てきたら、Lighthouse(ブラウザによっては Audits)を選択します。

手順3: モバイルかデスクトップを選択

右上にある Device で、モバイルかデスクトップを選択します。

  • モバイルを選択するとスマホで閲覧した際の状態をエミュレートして計測します
  • デスクトップを選択すると現在 PC で閲覧してる状態をそのまま計測します

手順4: 監査を開始する

左上の「Generate report」を押すと監査を開始します。

手順5: レポートを確認する

監査の結果がレポートで表示されます。

Performance、Accessibility、Best Practice、SEO のそれぞれの数字を押すとレポートの詳細を見ることができます。

監査で減点されている項目をチェックしてみましょう。

Luxeritas の設定

Posted by るな