$30 off During Our Annual Pro Sale. View Details »

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

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

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

株式会社NIJIBOX

December 18, 2020
Tweet

More Decks by 株式会社NIJIBOX

Other Decks in Programming

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