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

by 株式会社NIJIBOX

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

パフォーマンスの重要性が高まっている • 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. パフォーマンスがページのユーザーのエクスペリエンスにどのように影響するかについて広く考え、さまざまなユーザーエクスペリエンスの測定基準を検討することを開発者に推奨します。

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

改善施策をいくつか紹介

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

今後取り組むこと

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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