Lighthouseによるサイト評価でユーザ体験を向上します!

f:id:aidemy-blog:20220330161510p:plain

定量的な指標に基づき Alms 開発を推進します

弊社では創業時から安定したサービスを提供したりさまざまな機能を拡充したりするためにAlmsを開発してきました。今後も現状ご利用いただいているユーザを含めたさまざまなユーザに利用してもらいたい!

しかし、利用開始時にロードが10秒など時間がかかればユーザが弊サービスを利用する以前に「なんかこのアプリ重い。」とそっと閉じられてしまうでしょう。そんなユーザ体験をさせないために弊社ではLighthouseというツールでアプリのパフォーマンスを測りユーザ体験の向上を目指します!

Lighthouseとは?

LighthouseとはWebアプリの品質を自動で計測してくれるオープンソースのツールであり、Chromeの拡張の機能やCI上で利用できるものとして提供されています。計測に関してはPerformance, Accessibility, Best Practices, SEOの観点からスコアを測ることができます。

Lighthouseを選んだ2つの理由

弊社では継続的にアプリの品質を評価しチームでその評価を追っていきたいという上で以下の要件がありました。

1 アプリの品質をできるだけ簡単に設定したい

LighthouseにはLighthouse CIというCI上で走ってくれるツールがあり、githubに用意したrepositoryに対してcommitが入ったときにCI上でアプリのパフォーマンスをチェックするような使い方できるものです。また、Lighthouse CI Serverというものも用意されておりこちらを利用してServerを立てLighthouse CIからデータを送ればグラフなどにデータをまとめて表示してくれます!

2 定期的にWebアプリを評価したい

Lighouse CIに関してcommitごとに走るようになっているのですが、一つ懸念があります。それはLighthouse側がスコアの基準を変える可能性があることです。この点からもしcommitごとにCIが走りアプリの評価に以前と乖離があった場合、サービスのデプロイタイミングなどの要因とLighthouse側のスコアの基準を変えた要因がより分離しずらくなります。そのため、今回は時間ごとにWebアプリを評価するようにjobが走るような仕組みを採用しています。

システム構成

Lighthouseによるスコア取得のシステム環境

autorun

GKE上でautorunが定期的に走りWebアプリの評価をします。評価後のスコアのデータはserverに送られます。

server

Lighthouse CI serverをDockerを使いGKE上で用意しています。また、autorunから送られてくる評価に関するスコアはDocker上で動いているMySQLに保存されます。

まとめと今後

ここまででLighthouseにより弊サービスを継続的に評価する経緯と実際に設定するシステム環境について述べました。今後に関してはスコアを継続的に取得しチームでどのようにスコアからアプリを改善していくか判断していきたいと思います。