SUUMOでのパフォーマンス_株式会社ニジボックス Satoshi Arai

リクルートグループ主催！『大規模メディアにおけるWeb開発の最前線』
https://business-and-creative.connpass.com/event/188628/

Transcript

1. SUUMOでの
   パフォーマンス
   2020/12/10
   

   View Slide

2. 自己紹介
   ニジボックスクリエイティブ室 グループマネジャー
   

   View Slide

3. SUUMOについて
   • 国内最大級の不動産情報サービス
   • 2009年スタート
   

   View Slide

4. SUUMOでのパフォーマンス
   • 主要なパージについて2年ほど計測している
   • 日次で大きな劣化を検知してアラート
   • 週次のサマリ、レポート作成
   • ハッカソン形式での性能改善活動
   

   View Slide

5. なぜパフォーマンスに
   取り組んでいるのか
   

   View Slide

6. モバイルユーザーが重視するもの
   （Google の2017年の調査報告）
   Google の調査報告：https://www.awwwards.com/brainfood-mobile-performance-vol3.pdf
   

   View Slide

7. パフォーマンスの重要性が高まっている
   • 2018/07 Google の SpeedUpdate
   “Using page speed in mobile search ranking”
   https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
   ページの速度 をモバイルの検索順位に使用する
   We encourage developers to think broadly about how performance
   affects a user’s experience of their page and to consider a variety
   of user experience metrics.
   パフォーマンスがページのユーザーのエクスペリエンスにどのように
   影響するかについて広く考え、さまざまなユーザーエクスペリエンスの
   測定基準を検討することを開発者に推奨します。
   

   View Slide

8. パフォーマンスの重要性が高まっている
   • Google 検索へのページ エクスペリエンスの導入時期
   https://developers.google.com/search/blog/2020/11/timing-for-page-experience
   

   View Slide

9. SUUMOでのパフォーマンス可視化
   • UX
   • SEO
   • 競合との比較
   リスクの可視化、把握
   

   View Slide

10. SUUMOでのパフォーマンス可視化
    • 独自基盤で運用（AWS）
    

    View Slide

11. SUUMOでの
    パフォーマンス改善活動
    

    View Slide

12. View Slide

13. 改善施策をいくつか紹介
    

    View Slide

14. 95%以上の不使用CSSを最適化
    Chrome DevTool で見た
    カバレッジ
    最適化後の性能向上
    

    View Slide

15. 95%以上の不使用CSSを最適化
    • 長年の積み重ね
    • 不要なCSSの影響範囲が見えず消せなかった
    • 最適化スクリプトはCLIにし公開
    

    View Slide

16. 画面外の画像を遅延読み込み
    画面外で表示されない画像が
    ページ表示時に読込まれていた
    

    View Slide

17. 画面外の画像を遅延読み込み
    リリースした結果、大幅な改善
    

    View Slide

18. 測定ツールなど
    ほか、Search Console など
    

    View Slide

19. 過去2年間の運用で
    おきたこと紹介
    

    View Slide

20. 何が起きているでしょうか
    いきなりですが、クイズです
    

    View Slide

21. Problem1：ある日のアラート
    ①点数の劣化 ②読込サイズが増えている
    

    View Slide

22. Answer: 最適化されていない画像
    最適化されていない画像に
    よって大きな劣化が発生。
    運用を徹底し、いまでは起
    きていない
    画面はイメージです
    

    View Slide

23. Problem2：リリースしていないのに、、
    ①スクリプトの増加
    JS、XHRが増えている
    ②Speed Index も悪化
    

    View Slide

24. Answer: 広告タグの追加、など
    3rdPartyスクリプト
    の転送サイズ変化
    現在は可能な限り
    削減する活動も
    画面はイメージです
    

    View Slide

25. 3rdPartyスクリプト
    Problem3：またある日のアラート
    ①3rdPartyスクリプトの増加
    測定によってXHRが増えたり減ったり
    

    View Slide

26. Answer: ABテスト
    JS 実装によるABテストの実施
    ABテスト対象になると追加で
    JS、画像が読み込まれる。
    ランダムに振り分けられるので、
    測定するタイミングによって変
    わる
    画面はイメージです
    

    View Slide

27. Problem4: 気を付けていても
    ①点数の劣化 ②読込サイズが増えている
    

    View Slide

28. Answer: 機能追加
    機能追加によって起きるべくし
    て起きた劣化。
    機能の価値と、パフォーマンス
    のトレードオフ。バランスを
    とってUXを最大化するしかない。
    → パフォーマンスバジェット
    画面はイメージです
    

    View Slide

29. サービスの成長とともに性能は劣化する
    改善しやすい劣化もあれば避けられないものもある。
    多くの方に利用してもらうサービスにとって、
    第一歩として可視化と変化の把握は重要
    運用も（パフォーマンスバジェット）
    

    View Slide

30. 今後取り組むこと
    

    View Slide

31. サービスの成長とともに性能は劣化する
    直近では、
    •CWV対応状況の把握
    •監視・レポートの継続
    長期的には、
    •（レポーティングなど）組織に共有・共通認識へ
    •PerformanceBudget 運用の進化・定着
    

    View Slide

32. ありがとうございました！
    

    View Slide