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

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

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での パフォーマンス改善活動
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. ありがとうございました！