どうやってWebサービスのページ表示速度を1/3にしたか / how-to-reduce-display-speed

by pinkumohikan

Slide 1

Slide 1 text

©tete marche CO., LTD. どうやってWebサービスのページ表示速度を1/3にしたか PHPerKaigi 2024 テテマーチ株式会社篠田

Slide 2

Slide 2 text

©tete marche CO., LTD. 2 ✔ テテマーチ株式会社 SINIS for X テックリード篠田北斗 ( @pinkumohikan ) ✔ 社内ブランディング「定期的に髪色が変わるやべーやつ」 ✔ バックエンド寄りの技術が好き ISUCON毎年参戦中🔥 (去年の戦績の話はNG) 自己紹介

Slide 3

Slide 3 text

©tete marche CO., LTD. 3 このトークでお話することテテマーチ株式会社が開発・提供するInstagram分析ツール「SINIS for Instagram」のページ表示速度を約1/3にした事例を元にどうやって課題を見つけ、何の改善を試み、その結果どうなったのか

Slide 4

Slide 4 text

©tete marche CO., LTD. Index 目次 4 1. Webページ表示速度は重要 2. パフォーマンスチューニングの基本 3. SINIS for Instagramの高速化でやったこと

Slide 5

Slide 5 text

©tete marche CO., LTD. Webページ表示速度は重要 1. 5

Slide 6

Slide 6 text

©tete marche CO., LTD. 6 ページ表示速度はビジネスに効くビジネスに効く = (売上に効く && 利益に効く) 最初に結論

Slide 7

Slide 7 text

©tete marche CO., LTD. 7 ● 表示速度はWebにおけるすべてのユーザ体験の根底にある ○ どんなに優れていても遅いとイライラする、使ってもらえない ○ UXが悪いサービスはUXが良いサービスに簡単に代替される ● Googleもそう言っているページ表示速度は「売上」に効く出典: 速度が重要な理由 by web.dev

Slide 8

Slide 8 text

©tete marche CO., LTD. 8 ● Googleはページ表示速度をSEOで考慮すると明言ページ表示速度は「売上」に効く出典: Core Web Vitals と Google 検索の検索結果について by Google検索セントラル

Slide 9

Slide 9 text

©tete marche CO., LTD. 9 Core Web Vitals (CWV) Googleが提唱している、WebページのUX品質指標出典: Web Vitals by web.dev

Slide 10

Slide 10 text

©tete marche CO., LTD. 10 Core Web Vitals (CWV) Googleが提唱している、WebページのUX品質指標出典: Web Vitals by web.dev

Slide 11

Slide 11 text

©tete marche CO., LTD. 11 Webページが速ければ沢山のトラフィックを少ないサーバで捌けるページ表示速度は「利益」に効く vs サーバ代: 月50万円サーバ代: 月5万円

Slide 12

Slide 12 text

©tete marche CO., LTD. パフォーマンスチューニングの基本 2. 12

Slide 13

Slide 13 text

©tete marche CO., LTD. 13 パフォーマンスチューニングの流れ

Slide 14

Slide 14 text

©tete marche CO., LTD. 14 パフォーマンスチューニングの流れ 👈 一番大事！

Slide 15

Slide 15 text

©tete marche CO., LTD. 15 ボトルネック「特定」につかえる便利ツール ● ブラウザ付属のDevTool (a.k.a. Developer Console) ○ 「Network」タブはマブダチ

Slide 16

Slide 16 text

©tete marche CO., LTD. 16 ボトルネック「特定」につかえる便利ツール ● ブラウザ付属のDevTool (a.k.a. Developer Console) ○ 「Network」タブはマブダチ

Slide 17

Slide 17 text

©tete marche CO., LTD. 17 ボトルネック「特定」につかえる便利ツール ● プロファイラ ○ PHPではXdebugが定番 (無料) ○ どの関数で実行に時間がかかったか計測できる ○ 計測中は激重 (開発環境などで使う) ○ プロファイリング結果はWebGrindなどのツールで可視化出典: WebGrind - GitHub

Slide 18

Slide 18 text

©tete marche CO., LTD. 18 ボトルネック「特定」につかえる便利ツール ● Application Performance Monitor (APM) ○ NewRelicやDatadogなどが提供する有償プロファイラ ○ SDKを仕込んでおくと自動でプロファイリング、集積、可視化してくれる出典: APMによるアプリのパフォーマンス改善 - Newrelic

Slide 19

Slide 19 text

©tete marche CO., LTD. 19 ボトルネック「特定」につかえる便利ツール ● Google Lighthouse ○ GoogleがOSS開発している、パフォーマンス・品質・正確性の改善ツール ○ 任意のWebサイトに実行でき、CWV+αに基づいてスコアリングしてくれる ○ Google Chrome Pluginがある他、CIに組み込むことも可能

Slide 20

Slide 20 text

©tete marche CO., LTD. 20 ボトルネック「特定」につかえる便利ツール ● Google Lighthouse

Slide 21

Slide 21 text

©tete marche CO., LTD. 21 ボトルネック「特定」につかえる便利ツール ● Google Lighthouse

Slide 22

Slide 22 text

©tete marche CO., LTD. 22 ボトルネック「特定」につかえる便利ツール ● Google Lighthouse

Slide 23

Slide 23 text

©tete marche CO., LTD. 23 ボトルネック「確認」につかえる便利ツール ● Vegeta ○ OSS開発されている、いわゆる負荷テストツール ○ 任意の時間、任意の並列数、任意のシナリオ (順番) で指定したサイトへリクエストしまくってくれる ○ 類似ツール: Apache Jmeter、Apache Bench、Tsung、 Siege、etc… 出典: Vegeta - GitHub

Slide 24

Slide 24 text

©tete marche CO., LTD. 24 ボトルネック「確認」につかえる便利ツール ● Vegeta

Slide 25

Slide 25 text

©tete marche CO., LTD. 25 チューニングのサイクルとツール ●

Slide 26

Slide 26 text

©tete marche CO., LTD. 26 完全に理解できましたね 🤗 Laravelで学ぶWebアプリケーションチューニングの基本 by hanhanさん https://speakerdeck.com/hanhan1978/web-application-tuning-guildline PHPWebアプリケーションパフォーマンスチューニング by 清家史郎 https://speakerdeck.com/seike460/php-web-application-performance-tuning Webアプリケーションのパフォーマンス・チューニングの勘所 by そーだいさん https://speakerdeck.com/soudai/web-tuningperformance

Slide 27

Slide 27 text

©tete marche CO., LTD. SINIS for Instagramの高速化でやったこと 3. 27

Slide 28

Slide 28 text

©tete marche CO., LTD. 28 高速化前のGoogle Lighthouse実行結果

Slide 29

Slide 29 text

©tete marche CO., LTD. 29 高速化前のGoogle Lighthouse実行結果

Slide 30

Slide 30 text

©tete marche CO., LTD. 30 Webサービスの表示速度が遅い場合、たいていAPIが遅い Chrome DevToolの「Network」タブでリクエストを確認

Slide 31

Slide 31 text

©tete marche CO., LTD. 31 Webサービスの表示速度が遅い場合、たいていAPIが遅い Chrome DevToolの「Network」タブでリクエストを確認

Slide 32

Slide 32 text

©tete marche CO., LTD. 32 APIが遅い場合、たいていDBが詰まっている次はDBを見ていく

Slide 33

Slide 33 text

©tete marche CO., LTD. 33 クエリのチューニング遅いと言われているクエリのexplainを見て、indexを追加

Slide 34

Slide 34 text

©tete marche CO., LTD. 34 クエリのチューニング

Slide 35

Slide 35 text

©tete marche CO., LTD. 35 クエリのチューニング

Slide 36

Slide 36 text

©tete marche CO., LTD. 36 クエリのチューニング

Slide 37

Slide 37 text

©tete marche CO., LTD. 37 クエリのチューニング

Slide 38

Slide 38 text

©tete marche CO., LTD. 38 クエリのチューニング

Slide 39

Slide 39 text

©tete marche CO., LTD. 39 そんなことを頑張った結果

Slide 40

Slide 40 text

©tete marche CO., LTD. 40 一段落したらGoogle Lighthouse スコア再計測

Slide 41

Slide 41 text

©tete marche CO., LTD. 41 だがしかしbut でも、待てよ🤔 クエリ結果は500msくらいで返ってきてるなぜAPI応答に3秒もかかるんだ...?🤔

Slide 42

Slide 42 text

©tete marche CO., LTD. 42 だがしかしbut こういうときこそ「推測するな、計測せよ」

Slide 43

Slide 43 text

©tete marche CO., LTD. 43 分からないならプロファイリング Xdebug x WebGrind

Slide 44

Slide 44 text

©tete marche CO., LTD. 44 Call graphを見ていく 👈 怪しい

Slide 45

Slide 45 text

©tete marche CO., LTD. 45 怪しそうなところの前後をコードリーディング

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Slide 61

Slide 61 text

Slide 62

Slide 62 text

©tete marche CO., LTD. 62 ● Web上でビジネスをするすべてのプロダクトにおいて表示速度は重要 ● Googleが提唱するUX品質指標「Core Web Vitals (CWV)」 ● Google提供の「Lighthouse」でCWVの計測ができる ● 計測によってボトルネックを見つけ、1箇所づつ改善すれば速くなる ● おかしいな？と思ったらプロファイルを取ろう ● 「念の為の確認」は大事まとめ

Slide 63

Slide 63 text

©tete marche CO., LTD. 63 ● Web Vitals (Google) ● Core Web Vitals（CWV）とは？ (CLOUDFLARE) ● Core Web Vitals と Google 検索の検索結果について (Google) ● 速度が重要な理由 (Google) ● 達人が教えるWebパフォーマンスチューニング (ISUCONが大好きな皆さん) 参考文献

Slide 64

Slide 64 text

We are hiring!

Slide 65

Slide 65 text

Slide 66

Slide 66 text

©tete marche CO., LTD. 66 想定質問 ● なぜピンクのモヒカンなのか ● どうやって高速化に取り組むための時間を捻出するか ● 高速化についてもっと詳しく知りたいが、何からやれば良いか ● 紹介していること以外にやったこと