ユアマイスター株式会社エンジニアブログ

ユアマイスター株式会社のエンジニアが日々徒然。

Google Lighthouseについて調べてみた vol.1 #lighthouse

f:id:yourmystar_engineer:20181218170205p:plain

こんにちは。ユアマイスター 星(@inase17000)です。

今回はGoogle Lighthouseについてがっつり調べてみたので、自分のためにもメモ残しておこうと思います。

ページスピードの重要性

Googleでは 2018年7月からページの読み込み速度を検索のランキング要素として使用することを「スピードアップデート」と呼んで実際に導入されています。(英語版のブログで2018年1月にアナウンスされていました。)

ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。 検索意図は依然として非常に強いシグナルですので、魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります。

ということで、結局そんなにランキングに対しては影響力はなさそうだ、というのがGoogleの言い分ではありますが、1ユーザーとして考えたときにページスピードはUX的にも大変重要だと考えていて、待ち時間のせいで離脱した...なんてことが起きないように あなたのマイスターの改善を続けていきたいと考えています。

どこまで早くすればいいのかの目安を知りたいときは、RAIL*1モデルを参照していきます。だいぶ基準が高い(甘え?w)ので、可能な範囲から効果を見ていくのがいいかと思います。

Lighthouseとは?

Lighthouse は、ウェブページの品質向上に役立つよう開発された、オープンソースの自動化されたツールです。「暗礁に乗り上げないようにする」ため、「Lighthouse(灯台)」と名付けられたようです。

PageSpeed Insights (PSI) との違いは?

PageSpeed Insights(PSI)の分析エンジンとして Lighthouse を使用しています。PSIにはChrome ユーザー エクスペリエンス レポート(CrUX)*2で提供されるフィールド データも組み込まれます。

PageSpeed Insights APIの最新バージョンはV5*3となっており(2018/12/17現在)、以前のバージョンは2019年5月ごろにサポートが終了すると Googleウェブマスター向け公式ブログでアナウンスされています。

GitHub

README.mdが充実しているのでサマられた情報を見たい場合は、オフィシャルドキュメントより有用かもしれません。

https://github.com/GoogleChrome/lighthouse

オフィシャルドキュメント

英語(一部日本語)ですが、網羅的に記載があるので調べるならここでしょう。

https://developers.google.com/web/tools/lighthouse/

使い方

コマンドラインで使う

https://developers.google.com/web/tools/lighthouse/?hl=ja#_2

  • Node のバージョン 5 以降が必要

Chrome DevTools の Audits パネルで使う

  • [Chromeメニュー] > [その他のメニュー] > [検証]
  • Webページ上で右クリック > [検証]
  • Ctrl+Shift+I キー(Windows)または Cmd+Opt+I キー(Mac
  • Lighthouse 3.0.3
    • バージョンが古いので注意

Google Chrome 拡張機能で使う

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja

web.devで使う

https://web.dev/

Audit References - 診断

ユアマイスターのサイト(yourmystar.jp)を診断する中で出てきたものを抜粋して紹介します。オフィシャルのドキュメントが日本語と英語が混ざっているのでなんとかしたいw年末年始ちょっと貢献しようかと思う。

と思ったらlighthouseレポジトリのi18n対応を見ることである程度把握できることに気づき、捗りました。

①Performance - パフォーマンス

Metrics

特定のタイミングが始まるポイントと終わるポイントまでの時間を計測していて、それが指標になっています。

  1. First Contentful Paint - コンテンツの初回イベント

    • コンテンツの初回ペイントは、テキストまたは画像が初めてペイントされるまでにかかった時間です。詳細
  2. First Meaningful Paint - 意味のあるコンテンツの初回イベント

    • 意味のあるコンテンツの初回ペイントは、ページの主要なコンテンツが可視化されるまでにかかった時間です。詳細
  3. Speed Index - 速度インデックス

    • 速度インデックスは、ページのコンテンツが取り込まれて表示される速さを表します。詳細
    • この項目を計測しようとしたCookpadさんの事例が勉強になります。
  4. First CPU Idle - CPUの初回アイドル

    • CPU の初回アイドルは、ページのメインスレッド処理が静止し、初めて入力の処理が可能になるまでにかかった時間です。詳細
  5. Time to Interactive - 操作可能になるタイミング

  6. Estimated Input Latency - 入力の推定待ち時間

    • ページ読み込みの最もビジーな 5 秒間における、ユーザーの入力に対するアプリの応答時間(ミリ秒)です。待ち時間が 50 ミリ秒より長い場合、アプリの反応が悪いと思われる可能性があります。詳細

Opportunities

  1. Defer offscreen images - オフスクリーン画像の遅延読み込み

    • オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。詳細
    • 対策としては、初期表示はそのままにしておいて、画面下のほうの隠れている部分はLazyloadで表示する。
  2. Serve images in next-gen formats

  3. Efficiently encode images

    • 適切なサイズの画像を配信して、モバイルデータ量と読み込み時間を抑えてください。詳細
    • 対策は、表示サイズにあわせて、画像リサイズや圧縮をすること。
  4. Eliminate render-blocking resources

    • ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。詳細
    • 対策は、各種js,cssファイルを非同期で読み込むことなんだけど
    • jQueryなど大きなファイルをインラインで読み込むと、headタグ内が膨大になるため結局レンダリングに時間がかかりUXを落とす(実験済み)
    • よって、ある程度しょうがない。根本解決するためには結構ゼロから作り直さないといけないので腰が重い。
  5. Properly size images

    • つまり、画像を圧縮しろという話。「Efficiently encode images」と同じ。
  6. Preconnect to required origins

    • 事前接続または DNS プリフェッチのリソースヒントを追加して、重要な第三者ドメインへの接続を早期に確立できるようにすることをご検討ください。詳細
    • 対策としては、dns-prefetch, preconnectをつけてあげて、コネクション確立を助けてあげること。(参考:https://w3c.github.io/resource-hints/

Diagnostics

※次回以降にまた別記事にします。

Progressive Web App - プログレッシブ ウェブアプリ

略称をPWAを呼び、モバイル向けWebサイトをまるでネイティブアプリのように使える仕組みです。特殊な技術を使って実装するものではなく、HTML、CSSJavaScript で実現が可能です。

yourmystar.jpではPWA対応していないため、指摘内容を無視しました。ゆくゆくは対応してインストールなしで使いやすいサービスを提供していきたいと思います。

③Accessibility - アクセシビリティ

※次回以降にまた別記事にします。

④Best Practices - ベスト プラクティス

※次回以降にまた別記事にします。

SEO - SEO

基本的には、検索エンジン最適化(SEO)スターター ガイドに書いてある注意事項が守られているかを検査してくれます。

yourmystar.jpは指摘なしの状態でしたので今回調査対象からはスコープアウトしました。必要が出たらまた対応を検討していこうと思います。


参考にしたサイトです。

https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

https://webmaster-ja.googleblog.com/2018/02/seo-audit-category-in-lighthouse.html

https://webmaster-ja.googleblog.com/2018/11/pagespeed-insights-now-powered-by.html

https://support.google.com/webmasters/answer/7451184

https://qiita.com/TanakanoAnchan/items/01c02a5bfae4c04465e5

https://qiita.com/algas/items/f385222580145f01dea2

https://www.suzukikenichi.com/blog/state-of-the-union-for-speed-tooling/

以上、だいぶLighthouseについて詳しくなれました。改善に活用しながら、UX上げます!次回作もお楽しみに!