PayPayモール 速度改善に挑んだ日々 #yjbonfire

767 Views

August 18, 20

スライド概要

Bonfire Frontend #6 での登壇発表内容です。
イベントページ URL は こちらです。
https://yj-meetup.connpass.com/event/181363/
Bonfire Frontendは、ヤフー主催の「フロントエンド」にフォーカスした情報共有を定期的に行う勉強会/交流会イベントです。
様々な最新技術の活用方法やデザイナー、バックエンドとの連携など、フロントエンドが抱える課題を共有し、フロントエンドについてを熱く語る会を目指します!

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

PayPayモール 速度改善に挑んだ⽇々 2020年8⽉14⽇ 清⼟ 伸康 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

2.

⾃⼰紹介 • 清⼟ 伸康 (セド ノブヤス) • 1982.9.3 • PayPayモールのフロントエ ンド部分を担当 • 買ってよかったもの • • • Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. ジグソーパズル🧩 オフィスチェア リングフィット アドベンチャー 2

3.

PayPayモールとは • 2019.10.17にローンチ • 厳選されたストア • ヤフーショッピングをベース に構築 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 3

4.

PayPayモールとは 検索 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. トップ 商品 4

5.

PayPayモールとは 検索 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. トップ 商品 5

6.

アジェンダ • PayPayモールで挑戦したこと • 速度改善に挑んだ⽇々 • まとめ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 6

7.

PayPayモールで 挑戦したこと Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

8.

PayPayモールで挑戦したこと • DDD(ドメイン駆動設計) • AMP • 速度改善 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 8

9.

DDDとは • 開発⼿法の⼀つ • メンテナンスしやすいシステムを作る • ドメインと呼ばれる単位で業務を分け る • どこで何をしているかが分かり易い Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 9

10.

DDDを使ってみて • 最初の設計は難しかった • ローンチ時点では良い設計だったか分 からない • 仕様変更、機能拡張に対応しやすい Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 10

11.

AMPとは • モバイルページを⾼速に表⽰させるた めの⼿法 • ⾼速表⽰させるためのパーツが揃って いる(JSの使⽤制限あり) • Google側にキャッシュも持たせて⾼ 速化 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 11

12.

AMPを使ってみて • 完全AMP化はできず (キャッシュ使えず) • JSを書かないからViewがシンプル • あれ︖思ったよりも早くなってない Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 12

13.

速度改善に 挑んだ⽇々 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

14.

速度改善の軌跡 3 2.5 2.5 2.5 2 1.8 1.7 1.8 1.7 1.7 1.8 1.7 1.9 1.8 1.9 1.7 1.5 1.5 1.3 1.3 1.2 1 0.5 0 2019年10月 2019年11月 2019年12月 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2020年1月 2020年2月 PayPayモール 2020年3月 A社 2020年4月 2020年5月 2020年6月 2020年7月 14

15.

速度改善の軌跡 3 PayPayモール 2.5 2.5 2.5 2 1.8 1.7 1.8 1.7 1.7 1.8 1.7 1.9 1.8 1.9 1.7 1.5 1.5 1.3 1.3 1.2 1 0.5 0 2019年10月 2019年11月 2019年12月 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2020年1月 2020年2月 PayPayモール 2020年3月 A社 2020年4月 2020年5月 2020年6月 2020年7月 15

16.

速度改善の軌跡 3 PayPayモール 2.5 2.5 2.5 2 1.8 1.7 1.8 1.7 1.7 1.8 1.7 1.9 1.8 1.9 1.7 1.5 1.5 1.3 1.3 1.2 1 A社 0.5 0 2019年10月 2019年11月 2019年12月 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2020年1月 2020年2月 PayPayモール 2020年3月 A社 2020年4月 2020年5月 2020年6月 2020年7月 16

17.

速度改善の軌跡 3 PayPayモール 2.5 2.5 2.5 プリロード 2 1.8 1.7 1.8 1.7 1.7 1.8 1.7 1.9 1.8 1.9 1.7 1.5 1.5 1.3 1.3 1.2 1 A社 0.5 0 2019年10月 2019年11月 2019年12月 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2020年1月 2020年2月 PayPayモール 2020年3月 A社 2020年4月 2020年5月 2020年6月 2020年7月 17

18.

プリロード • 初期表⽰に必要なJS、画像 を優先して読み込ませる • ロゴ画像 • プロモーション画像 • AMPのJS Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 18

19.

プリロード <head> ・・・ <link rel="preload" href="https://cdn.ampproject.org/rtv/01200 3031842100/v0.js" as="script"> ・・・ <link rel="preload" href="https://s.yimg.jp/images/paypay/com mon/logo/mall_1_68.png" as="image"> ・・・ • 初期表⽰に必要なJS、画像 を優先して読み込ませる • ロゴ画像 • プロモーション画像 • AMPのJS </head> Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 19

20.

プリロード • 初期表⽰に必要なJS、画像 を優先して読み込ませる • ロゴ画像 • プロモーション画像 • AMPのJS Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 20

21.

プリロード • 初期表⽰に必要なJS、画像 を優先して読み込ませる • ロゴ画像 • プロモーション画像 • AMPのJS 約100[ms]の改善 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 21

22.

速度改善の軌跡 3 PayPayモール 2.5 2.5 2.5 プリロード 2.4[s] 2 1.8 1.7 1.8 1.7 1.7 1.8 1.7 1.9 1.8 1.9 1.7 1.5 1.5 1.3 1.3 1.2 1 A社 0.5 0 2019年10月 2019年11月 2019年12月 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2020年1月 2020年2月 PayPayモール 2020年3月 A社 2020年4月 2020年5月 2020年6月 2020年7月 22

23.

速度改善の軌跡 3 PayPayモール 2.5 2.5 2.5 プリロード FVをSSR 2 1.8 1.7 1.8 1.7 1.7 1.8 1.7 1.9 1.8 1.9 1.7 1.5 1.5 1.3 1.3 1.2 1 A社 0.5 0 2019年10月 2019年11月 2019年12月 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2020年1月 2020年2月 PayPayモール 2020年3月 A社 2020年4月 2020年5月 2020年6月 2020年7月 23

24.

初期表⽰(FV)をSSR • 初期表⽰(FV)に必要なデー タをサーバーサイドでレンダ リング(SSR)する • ローンチ時はクライアントサ イドでレンダリング(CSR) Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 24

25.

SSRとCSR SSR Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. CSR 25

26.

SSRとCSR SSR Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. CSR 26

27.

初期表⽰(FV)をSSR • 初期表⽰(FV)に必要なデー タをサーバーサイドでレンダ リング(SSR)する • ローンチ時はクライアントサ イドでレンダリング(CSR) 約600[ms]の改善 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 27

28.

実装時のポイント CSR 1.6[s] FE 0.6[s] 0.2[s] FE Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. BE 合計 2.4[s] 28

29.

実装時のポイント SSR 1.6[s] 0.2[s] FE BE 合計 1.8[s] Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 29

30.

速度改善の軌跡 3 PayPayモール 2.5 2.5 2.5 プリロード FVをSSR 2 1.8 1.7 1.8 1.7 1.8[s] 1.7 1.8 1.7 1.9 1.8 1.9 1.7 1.5 1.5 1.3 1.3 1.2 1 A社 0.5 0 2019年10月 2019年11月 2019年12月 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2020年1月 2020年2月 PayPayモール 2020年3月 A社 2020年4月 2020年5月 2020年6月 2020年7月 30

31.

速度改善の軌跡 3 PayPayモール 2.5 2.5 2.5 プリロード FVをSSR 2 1.8 1.7 1.8 1.7 Optimizer 1.7 1.8 1.7 1.9 1.8 1.9 1.7 1.5 1.5 1.3 1.3 1.2 1 A社 0.5 0 2019年10月 2019年11月 2019年12月 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2020年1月 2020年2月 PayPayモール 2020年3月 A社 2020年4月 2020年5月 2020年6月 2020年7月 31

32.

AMP Optimizer • サーバーサイドでAMPを最適化し、 ページの読み込みを早くする • すぐにシステムに組み込むのは時間が かかりそう Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 32

33.

AMP Optimizer • Play Groundがあったので⼿動で適⽤ してみた • レンダリング前に時間が掛かっていた 箇所が改善された Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 33

34.

AMP Optimizer • Play Groundがあったので⼿動で適⽤ してみた • レンダリング前に時間が掛かっていた 箇所が改善された 約100[ms]の改善 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 34

35.

速度改善の軌跡 3 PayPayモール 2.5 2.5 2.5 プリロード FVをSSR 2 1.8 1.7 1.8 1.7 Optimizer 1.7 1.7[s] 1.8 1.7 1.9 1.8 1.9 1.7 1.5 1.5 1.3 1.3 1.2 1 A社 0.5 0 2019年10月 2019年11月 2019年12月 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2020年1月 2020年2月 PayPayモール 2020年3月 A社 2020年4月 2020年5月 2020年6月 2020年7月 35

36.

速度改善の軌跡 3 PayPayモール 2.5 2.5 2.5 プリロード FVをSSR 2 1.8 1.7 1.8 1.7 Optimizer 1.7 CaaS 1.8 1.7 1.9 1.8 1.9 1.7 1.5 1.5 1.3 1.3 1.2 1 A社 0.5 0 2019年10月 2019年11月 2019年12月 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2020年1月 2020年2月 PayPayモール 2020年3月 A社 2020年4月 2020年5月 2020年6月 2020年7月 36

37.

IaaS から CaaS • 運⽤効率、スケーラビリティを上げる ための移⾏ • 速度改善とは別の取り組み Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 37

38.

IaaS から CaaS • 運⽤効率、スケーラビリティを上げる ための移⾏ • 速度改善とは別の取り組み 約600[ms]の改善 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 38

39.

速度改善の軌跡 3 PayPayモール 2.5 2.5 2.5 1.3[s] プリロード FVをSSR 2 1.8 1.7 1.8 1.7 Optimizer 1.7 CaaS 1.8 1.7 1.9 1.8 1.9 1.7 1.5 1.5 1.3 1.3 1.2 1 A社 0.5 0 2019年10月 2019年11月 2019年12月 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2020年1月 2020年2月 PayPayモール 2020年3月 A社 2020年4月 2020年5月 2020年6月 2020年7月 39

40.

速度改善の結果 改善前 改善後 2.5[s] 1.3[s] Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 40

41.

速度改善のポイント • まずは現状を知る • 計測、ボトルネックの洗い出し • 仮説・検証を短時間で⾏う • 最初から綺麗にやる必要はない • どんどんつぶやく • 改善のタネが⾒つかる Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 41

42.

まとめ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

43.

まとめ • DDD(ドメイン駆動設計) • メンテナンスしやすくなった • AMP • 上⼿く使えば早くなる • 速度改善 • 継続は⼒なり ( 2.5[s] -> 1.3[s] ) Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 43

44.

買ってよかったもの ジグソーパズル Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. オフィスチェア リングフィット アドベンチャー 44

45.

Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 45