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

©tete marche CO., LTD. 46 怪しそうなところの前後をコードリーディング cache機構がありそう

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

©tete marche CO., LTD. 48 ASTキャッシュ機能を有効化 vegetaでのbefore/after計測結果

Slide 49

Slide 49 text

©tete marche CO., LTD. 49 楽しい時間はずっとは続かない 大人の事情で急遽タイムリミットが... 最後に、定番の設定が出来ているか確認しておくことに

Slide 50

Slide 50 text

©tete marche CO., LTD. 50 OPCache 出典: 問題解決に必要な能力 〜CodeBuildとOPCacheに振り回された話〜

Slide 51

Slide 51 text

©tete marche CO., LTD. 51 php.ini

Slide 52

Slide 52 text

©tete marche CO., LTD. 52 php.ini

Slide 53

Slide 53 text

©tete marche CO., LTD. 53 php.ini

Slide 54

Slide 54 text

©tete marche CO., LTD. 54 おわかりいただけただろうか・・・

Slide 55

Slide 55 text

©tete marche CO., LTD. 55 🦙 php.ini

Slide 56

Slide 56 text

©tete marche CO., LTD. 56 🦙 php.ini 念の為の確認、大事。

Slide 57

Slide 57 text

©tete marche CO., LTD. vegetaでのbefore/after計測結果 57 OPCache 有効化

Slide 58

Slide 58 text

©tete marche CO., LTD. 58 旅の終わり ここまでの取り組みにより...

Slide 59

Slide 59 text

©tete marche CO., LTD. 59 旅の終わり ここまでの取り組みにより...

Slide 60

Slide 60 text

©tete marche CO., LTD. 60 旅の終わり ここまでの取り組みにより... Performance Score 約2倍 LCP 1/3以下に 👏

Slide 61

Slide 61 text

©tete marche CO., LTD. まとめ 61

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

©tete marche CO., LTD. Q&A 65

Slide 66

Slide 66 text

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