Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

1623dd1adf096ba35ba33727d933e14c?s=128

株式会社NIJIBOX

December 18, 2020
Tweet

Transcript

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

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

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

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

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

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

  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. パフォーマンスがページのユーザーのエクスペリエンスにどのように 影響するかについて広く考え、さまざまなユーザーエクスペリエンスの 測定基準を検討することを開発者に推奨します。
  8. パフォーマンスの重要性が高まっている • Google 検索へのページ エクスペリエンスの導入時期 https://developers.google.com/search/blog/2020/11/timing-for-page-experience

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  30. 今後取り組むこと

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

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