LIFULL Creators Blog

LIFULL Creators Blogとは、株式会社LIFULLの社員が記事を共有するブログです。自分の役立つ経験や知識を広めることで世界をもっとFULLにしていきます。

LighthouseでLIFULL HOME'Sを計測し可視化した話

はじめまして

テクノロジー本部 基盤運用ユニット 基盤グループの久保田です。

より良いサービスを提供していくために必要なことは色々あり、また答えがあるものではないと思っていますが

どういったアプローチを行うにせよ、それを検討していくためにはまずは

「自分たちが置かれている状況を把握すること」が必要と考えています。

そこで以前、自社サービスであるLIFULL HOME'Sを検証のためサイト運営で利用しているツール以外で計測し可視化したときの話をしようと思います。

 

なにを使って計測するか

Googleが提供しているLighthosueを使って計測することにしました。

理由としては

  • SpeedIndex、SEO、Accessibilityが計測できる。
  • お金が掛からなければ良かった。

各メトリクスは内容やツールなど色々ご意見があると思いますが

今回は一定の基準で比較検討すること

複数のツールを使わなくても良いことからLighthouseを使うことにしました。

  • SpeedIndex:ページ内のコンテンツが視覚的に認識できるようになるまでの時間
  • SEO:Search Engine Optimization(検索エンジン最適化)の略称で、このスコアが高いとGoogleなどの検索エンジンでキーワードが検索された際、上位に表示されやすくなる。
  • Accssibility:誰でも使用することが出来るかという点をスコアとして表したもの

なにを使って可視化するか

DatadogにLighthouseで計測したメトリクスを収集し可視化することにしました。

理由としては

  • 使ってみたかった
  • 当時、社内でDatadogを使っていこうという流れがあった

技術的な理由などは特になかったです。

自分の必要と考えていたことは「自分たちが置かれている状況を把握すること」なのでこだわりはありませんでした。

なにを計測するか

自社サービスであるLIFULL HOME'S

ついでにトップページや物件一覧ページなどをカテゴライズして今回の計測用のサイトマップを作成しました。

どう可視化されたのか

このような感じでメトリクスごとに時系列でページ別に比較することが出来るようになりました。

カテゴライズした時の分類をメトリクス送信時に付与しダッシュボードで絞り込めることも出来ます。

f:id:LIFULL-kubotad:20210302180152j:plain

f:id:LIFULL-kubotad:20210224115050p:plain

f:id:LIFULL-kubotad:20210224115117p:plain

f:id:LIFULL-kubotad:20210224115140p:plain

HOME'S Quality Metrics Board
グラフ内の赤帯について

LIFULL HOME'Sに対しリリースが行われたタイミングをGithubから取得しグラフに表示するようにしています。

これでリリースによりLIFULL HOME'Sに対して変化が起きた際、気付くことが出来るようにしました。

可視化して得られたもの

  • 自分たちのサービスがどの様な位置にいるのか確認することが出来た。
  • PDCAを回していくための道具を手に入れることが出来た。