【Audits】知ってた?PageSpreed Insights の機能が Google Chrome の検証モードで使えるよ!

Audits コラム


こんにちは、いつもご覧いただきましてありがとうございます。
今回はWeb制作、ブロガーなど、Webサイトに関わる人たちなら多用している、もしくは使ったことがある「PageSpeed Insights」をお手軽に、「検証モード」で使える方法をご紹介いたします。

いつも使っている「PageSpeed Insights」

では、いつも使用している「PageSpeed Insights」をおさらいしてみましょう。

まずは「PageSpeed Insights」のページにアクセス。
URL入力欄があるので、そこに該当のURLを入力して「分析」ボタンを押下

何秒か待つと結果が表示されます。
72点…。まあまあです。

スマホ版は…。今回はお見せするのはやめておきましょう……。

こんな感じでWebサイトの分析をすることができます。

詳細もずらり。

いつもならこちらを見てWebサイトの改善方法を考えます。

もちろん、このままでも普通に分析できますが、

この分析がブラウザ「Google Chrome」の検証モードで使えるのです!
ただ、この方法、日本語対応してないので日本語として見る方法も後ほどご紹介いたします。

検証モードで使える機能「Audits」

Web制作やWebサービス、Webアプリに携わる人で使わない人はいないブラウザの「検証モード」
いつもはここでHTMLタグを見たり、コンソールをみてエラーや警告がないかを確認して開発をします。
WindowsではF12、Macでは command + option + I で表示できます。

そこで、あまり見たことない項目を発見。

「Audits」だと…?
習ったことない英単語だと思い、調べてみると

監査

まんますぎる…。
Webサイトを「監査」するサービスですもんね…

じゃあ早速使ってみることに。

この調査方法は PageSpeed Insights と同じ「Lighthouse」を使っているので評価方法はどちらも変わりないみたいです。

DeviceとAuditsとThrottlingを選ぶ項目があります。

DeviceではPCカスマホを選択できます。
ここまでは PageSpeed Insights と変わりありません。

次にAudits。
これは調査するものを選びます。
Performance、Progressive Web App、Best Practice、Accessibility、SEOの5項目あります。
それぞれ簡単に

  • Performance:Webサイトの表示スピードなどのパフォーマンス
  • Progressive Web App:PWA対応か、対応していればどんなものなのか
  • Best Practice:Googleが推奨しているWebサイトの作り方になっているか
  • Accessibility:ユーザーにとって使いやすいUIか否か
  • SEO:SEO的にどうなのか

これらを調査し、得点化してくれます。

Throttingはそれぞれ4Gなどのモバイル回線で通信した場合かそうでないかを推定して表示速度の調査を行います。
上の二つはあまり差がなかったし、英語の意味もわからなかったので、とりあえずデフォルトで選択されていた一番上の項目を選択。

これで「Run Audits」をクリックする。

何秒間か待つと…

出ました。結果が。

表示のしかたは PageSpeed Insights とはちょっと違う感じ。
PageSpeed Insights では72点。
でもAudits側では、Performanceとか48点だし…
まさか、評価の仕方が違う…?

と思って見直してみました。
勘のいい方はもうお気づきでしょう。

Auditsでの全ての得点の平均がPageSpeed Insightsの得点なのです!

これでWebサイトのどの部分で足を引っ張っているのかがパッと見でわかります。

ただ…。これ全部英語なんだよね…

そんな時に使うのが「保存」です。

Auditsを日本語としてみる方法

AuditsではWebページの評価をファイルとして保存できるのです。
ファイルの形式は「HTML」と「JSON」です。

HTMLとして保存して、それをGoogle Chromeで表示するとこんな感じのページになってます。

そして、右上の翻訳ボタンをクリック。

これで日本語になりました。

割と古典的な感じで…すみません。

まとめ

というわけで今回は「Audits」をご紹介したしました。
これを有効に利用してWebの評価を上げていきましょう。

コメント

タイトルとURLをコピーしました