PayPayモール 速度改善に挑んだ日々 #yjbonfire
690 Views
August 18, 20
スライド概要
Bonfire Frontend #6 での登壇発表内容です。
イベントページ URL は こちらです。
https://yj-meetup.connpass.com/event/181363/
Bonfire Frontendは、ヤフー主催の「フロントエンド」にフォーカスした情報共有を定期的に行う勉強会/交流会イベントです。
様々な最新技術の活用方法やデザイナー、バックエンドとの連携など、フロントエンドが抱える課題を共有し、フロントエンドについてを熱く語る会を目指します！
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
関連スライド
各ページのテキスト
PayPayモール 速度改善に挑んだ⽇々 2020年8⽉14⽇ 清⼟ 伸康 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
⾃⼰紹介 • 清⼟ 伸康 (セド ノブヤス) • 1982.9.3 • PayPayモールのフロントエ ンド部分を担当 • 買ってよかったもの • • • Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. ジグソーパズル🧩 オフィスチェア リングフィット アドベンチャー 2
PayPayモールとは • 2019.10.17にローンチ • 厳選されたストア • ヤフーショッピングをベース に構築 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 3
PayPayモールとは 検索 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. トップ 商品 4
PayPayモールとは 検索 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. トップ 商品 5
アジェンダ • PayPayモールで挑戦したこと • 速度改善に挑んだ⽇々 • まとめ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 6
PayPayモールで 挑戦したこと Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
PayPayモールで挑戦したこと • DDD（ドメイン駆動設計） • AMP • 速度改善 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 8
DDDとは • 開発⼿法の⼀つ • メンテナンスしやすいシステムを作る • ドメインと呼ばれる単位で業務を分け る • どこで何をしているかが分かり易い Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 9
DDDを使ってみて • 最初の設計は難しかった • ローンチ時点では良い設計だったか分 からない • 仕様変更、機能拡張に対応しやすい Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 10
AMPとは • モバイルページを⾼速に表⽰させるた めの⼿法 • ⾼速表⽰させるためのパーツが揃って いる（JSの使⽤制限あり） • Google側にキャッシュも持たせて⾼ 速化 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 11
AMPを使ってみて • 完全AMP化はできず （キャッシュ使えず） • JSを書かないからViewがシンプル • あれ︖思ったよりも早くなってない Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 12
速度改善に 挑んだ⽇々 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
速度改善の軌跡 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
速度改善の軌跡 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
速度改善の軌跡 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
速度改善の軌跡 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
プリロード • 初期表⽰に必要なJS、画像 を優先して読み込ませる • ロゴ画像 • プロモーション画像 • AMPのJS Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 18
プリロード <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
プリロード • 初期表⽰に必要なJS、画像 を優先して読み込ませる • ロゴ画像 • プロモーション画像 • AMPのJS Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 20
プリロード • 初期表⽰に必要なJS、画像 を優先して読み込ませる • ロゴ画像 • プロモーション画像 • AMPのJS 約100[ms]の改善 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 21
速度改善の軌跡 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
速度改善の軌跡 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
初期表⽰(FV)をSSR • 初期表⽰(FV)に必要なデー タをサーバーサイドでレンダ リング(SSR)する • ローンチ時はクライアントサ イドでレンダリング(CSR) Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 24
SSRとCSR SSR Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. CSR 25
SSRとCSR SSR Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. CSR 26
初期表⽰(FV)をSSR • 初期表⽰(FV)に必要なデー タをサーバーサイドでレンダ リング(SSR)する • ローンチ時はクライアントサ イドでレンダリング(CSR) 約600[ms]の改善 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 27
実装時のポイント 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
実装時のポイント SSR 1.6[s] 0.2[s] FE BE 合計 1.8[s] Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 29
速度改善の軌跡 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
速度改善の軌跡 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
AMP Optimizer • サーバーサイドでAMPを最適化し、 ページの読み込みを早くする • すぐにシステムに組み込むのは時間が かかりそう Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 32
AMP Optimizer • Play Groundがあったので⼿動で適⽤ してみた • レンダリング前に時間が掛かっていた 箇所が改善された Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 33
AMP Optimizer • Play Groundがあったので⼿動で適⽤ してみた • レンダリング前に時間が掛かっていた 箇所が改善された 約100[ms]の改善 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 34
速度改善の軌跡 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
速度改善の軌跡 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
IaaS から CaaS • 運⽤効率、スケーラビリティを上げる ための移⾏ • 速度改善とは別の取り組み Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 37
IaaS から CaaS • 運⽤効率、スケーラビリティを上げる ための移⾏ • 速度改善とは別の取り組み 約600[ms]の改善 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 38
速度改善の軌跡 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
速度改善の結果 改善前 改善後 2.5[s] 1.3[s] Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 40
速度改善のポイント • まずは現状を知る • 計測、ボトルネックの洗い出し • 仮説・検証を短時間で⾏う • 最初から綺麗にやる必要はない • どんどんつぶやく • 改善のタネが⾒つかる Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 41
まとめ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
まとめ • DDD（ドメイン駆動設計） • メンテナンスしやすくなった • AMP • 上⼿く使えば早くなる • 速度改善 • 継続は⼒なり ( 2.5[s] -> 1.3[s] ) Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 43
買ってよかったもの ジグソーパズル Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. オフィスチェア リングフィット アドベンチャー 44
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 45