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

PHPerKaigi 2024
2024/03/08 16:10-, Track B
https://fortee.jp/phperkaigi-2024/proposal/2c3ccd3d-9630-4bf9-a33b-3b7d40d5be69

Transcript

1. ©tete marche CO., LTD. どうやってWebサービスの ページ表示速度を1/3にしたか PHPerKaigi 2024 テテマーチ株式会社 篠田
2. ©tete marche CO., LTD. 2 ✔ テテマーチ株式会社 SINIS for X テックリード 篠田 北斗 ( @pinkumohikan ) ✔ 社内ブランディング 「定期的に髪色が変わるやべーやつ」 ✔ バックエンド寄りの技術が好き ISUCON毎年参戦中🔥 (去年の戦績の話はNG) 自己紹介
3. ©tete marche CO., LTD. 3 このトークでお話すること テテマーチ株式会社が開発・提供するInstagram分析ツール 「SINIS for Instagram」のページ表示速度を約1/3にした事例を元に どうやって課題を見つけ、何の改善を試み、その結果どうなったのか
4. ©tete marche CO., LTD. Index 目次 4 1. Webページ表示速度は重要 2. パフォーマンスチューニングの基本 3. SINIS for Instagramの高速化でやったこと
5. ©tete marche CO., LTD. Webページ表示速度は重要 1. 5
6. ©tete marche CO., LTD. 6 ページ表示速度はビジネスに効く ビジネスに効く = (売上に効く && 利益に効く) 最初に結論
7. ©tete marche CO., LTD. 7 • 表示速度はWebにおけるすべてのユーザ体験の根底にある ◦ どんなに優れていても遅いとイライラする、使ってもらえない ◦ UXが悪いサービスはUXが良いサービスに簡単に代替される • Googleもそう言っている ページ表示速度は「売上」に効く 出典: 速度が重要な理由 by web.dev
8. ©tete marche CO., LTD. 8 • Googleはページ表示速度をSEOで考慮すると明言 ページ表示速度は「売上」に効く 出典: Core Web Vitals と Google 検索の検索結果について by Google検索セントラル
9. ©tete marche CO., LTD. 9 Core Web Vitals (CWV) Googleが提唱している、WebページのUX品質指標 出典: Web Vitals by web.dev
10. ©tete marche CO., LTD. 10 Core Web Vitals (CWV) Googleが提唱している、WebページのUX品質指標 出典: Web Vitals by web.dev
11. ©tete marche CO., LTD. 11 Webページが速ければ沢山のトラフィックを少ないサーバで捌ける ページ表示速度は「利益」に効く vs サーバ代: 月50万円 サーバ代: 月5万円
12. ©tete marche CO., LTD. パフォーマンスチューニングの基本 2. 12
13. ©tete marche CO., LTD. 13 パフォーマンスチューニングの流れ
14. ©tete marche CO., LTD. 14 パフォーマンスチューニングの流れ 👈 一番大事！
15. ©tete marche CO., LTD. 15 ボトルネック「特定」につかえる便利ツール • ブラウザ付属のDevTool (a.k.a. Developer Console) ◦ 「Network」タブはマブダチ
16. ©tete marche CO., LTD. 16 ボトルネック「特定」につかえる便利ツール • ブラウザ付属のDevTool (a.k.a. Developer Console) ◦ 「Network」タブはマブダチ
17. ©tete marche CO., LTD. 17 ボトルネック「特定」につかえる便利ツール • プロファイラ ◦ PHPではXdebugが定番 (無料) ◦ どの関数で実行に時間がかかったか計測できる ◦ 計測中は激重 (開発環境などで使う) ◦ プロファイリング結果はWebGrindなどのツールで可視化 出典: WebGrind - GitHub
18. ©tete marche CO., LTD. 18 ボトルネック「特定」につかえる便利ツール • Application Performance Monitor (APM) ◦ NewRelicやDatadogなどが提供する有償プロファイラ ◦ SDKを仕込んでおくと自動でプロファイリング、集積、可視化してくれる 出典: APMによるアプリのパフォーマンス改善 - Newrelic
19. ©tete marche CO., LTD. 19 ボトルネック「特定」につかえる便利ツール • Google Lighthouse ◦ GoogleがOSS開発している、パフォーマンス・品質・正確性の改善ツール ◦ 任意のWebサイトに実行でき、CWV+αに基づいてスコアリングしてくれる ◦ Google Chrome Pluginがある他、CIに組み込むことも可能
20. ©tete marche CO., LTD. 20 ボトルネック「特定」につかえる便利ツール • Google Lighthouse
21. ©tete marche CO., LTD. 21 ボトルネック「特定」につかえる便利ツール • Google Lighthouse
22. ©tete marche CO., LTD. 22 ボトルネック「特定」につかえる便利ツール • Google Lighthouse
23. ©tete marche CO., LTD. 23 ボトルネック「確認」につかえる便利ツール • Vegeta ◦ OSS開発されている、いわゆる負荷テストツール ◦ 任意の時間、任意の並列数、任意のシナリオ (順番) で指定したサイ トへリクエストしまくってくれる ◦ 類似ツール: Apache Jmeter、Apache Bench、Tsung、 Siege、etc… 出典: Vegeta - GitHub
24. ©tete marche CO., LTD. 24 ボトルネック「確認」につかえる便利ツール • Vegeta
25. ©tete marche CO., LTD. 25 チューニングのサイクルとツール •
26. ©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
27. ©tete marche CO., LTD. SINIS for Instagramの高速化でやったこと 3. 27
28. ©tete marche CO., LTD. 28 高速化前のGoogle Lighthouse実行結果
29. ©tete marche CO., LTD. 29 高速化前のGoogle Lighthouse実行結果
30. ©tete marche CO., LTD. 30 Webサービスの表示速度が遅い場合、たいていAPIが遅い Chrome DevToolの「Network」タブでリクエストを確認
31. ©tete marche CO., LTD. 31 Webサービスの表示速度が遅い場合、たいていAPIが遅い Chrome DevToolの「Network」タブでリクエストを確認
32. ©tete marche CO., LTD. 32 APIが遅い場合、たいていDBが詰まっている 次はDBを見ていく
33. ©tete marche CO., LTD. 33 クエリのチューニング 遅いと言われているクエリのexplainを見て、indexを追加
34. ©tete marche CO., LTD. 34 クエリのチューニング
35. ©tete marche CO., LTD. 35 クエリのチューニング
36. ©tete marche CO., LTD. 36 クエリのチューニング
37. ©tete marche CO., LTD. 37 クエリのチューニング
38. ©tete marche CO., LTD. 38 クエリのチューニング
39. ©tete marche CO., LTD. 39 そんなことを頑張った結果
40. ©tete marche CO., LTD. 40 一段落したらGoogle Lighthouse スコア再計測
41. ©tete marche CO., LTD. 41 だがしかしbut でも、待てよ🤔 クエリ結果は500msくらいで返ってきてる なぜAPI応答に3秒もかかるんだ...?🤔
42. ©tete marche CO., LTD. 42 だがしかしbut こういうときこそ 「推測するな、計測せよ」
43. ©tete marche CO., LTD. 43 分からないならプロファイリング Xdebug x WebGrind
44. ©tete marche CO., LTD. 44 Call graphを見ていく 👈 怪しい
45. ©tete marche CO., LTD. 45 怪しそうなところの前後をコードリーディング
46. ©tete marche CO., LTD. 46 怪しそうなところの前後をコードリーディング cache機構がありそう
47. ©tete marche CO., LTD. 47 怪しそうなところの前後をコードリーディング
48. ©tete marche CO., LTD. 48 ASTキャッシュ機能を有効化 vegetaでのbefore/after計測結果
49. ©tete marche CO., LTD. 49 楽しい時間はずっとは続かない 大人の事情で急遽タイムリミットが... 最後に、定番の設定が出来ているか確認しておくことに
50. ©tete marche CO., LTD. 50 OPCache 出典: 問題解決に必要な能力 〜CodeBuildとOPCacheに振り回された話〜
51. ©tete marche CO., LTD. 51 php.ini
52. ©tete marche CO., LTD. 52 php.ini
53. ©tete marche CO., LTD. 53 php.ini
54. ©tete marche CO., LTD. 54 おわかりいただけただろうか・・・
55. ©tete marche CO., LTD. 55 🦙 php.ini
56. ©tete marche CO., LTD. 56 🦙 php.ini 念の為の確認、大事。
57. ©tete marche CO., LTD. vegetaでのbefore/after計測結果 57 OPCache 有効化
58. ©tete marche CO., LTD. 58 旅の終わり ここまでの取り組みにより...
59. ©tete marche CO., LTD. 59 旅の終わり ここまでの取り組みにより...
60. ©tete marche CO., LTD. 60 旅の終わり ここまでの取り組みにより... Performance Score 約2倍 LCP 1/3以下に 👏
61. ©tete marche CO., LTD. まとめ 61
62. ©tete marche CO., LTD. 62 • Web上でビジネスをするすべてのプロダクトにおいて表示速度は重要 • Googleが提唱するUX品質指標 「Core Web Vitals (CWV)」 • Google提供の 「Lighthouse」 でCWVの計測ができる • 計測によってボトルネックを見つけ、1箇所づつ改善すれば速くなる • おかしいな？と思ったらプロファイルを取ろう • 「念の為の確認」は大事 まとめ
63. ©tete marche CO., LTD. 63 • Web Vitals (Google) • Core Web Vitals（CWV）とは？ (CLOUDFLARE) • Core Web Vitals と Google 検索の検索結果について (Google) • 速度が重要な理由 (Google) • 達人が教えるWebパフォーマンスチューニング (ISUCONが大好きな皆さ ん) 参考文献
64. We are hiring!
65. ©tete marche CO., LTD. Q&A 65
66. ©tete marche CO., LTD. 66 想定質問 • なぜピンクのモヒカンなのか • どうやって高速化に取り組むための時間を捻出するか • 高速化についてもっと詳しく知りたいが、何からやれば良いか • 紹介していること以外にやったこと