良好URLを1%から99%に爆増させたパフォーマンス改善の話

Transcript

1. Copyright coconala Inc. All Rights Reserved. 良好URLを1%から99%に爆増させた パフォーマンス改善の話
2. Copyright coconala Inc. All Rights Reserved. アジェンダ 自己紹介 会社紹介 Core Web Vitals やったこと 2 1 2 3 4
3. Copyright coconala Inc. All Rights Reserved. 自己紹介 Chapter 01 3
4. Copyright coconala Inc. All Rights Reserved. 自己紹介 1 4 株式会社ココナラ プロダクト開発部 フロントエンド開発グループ Team Manager 飯塚 譲二（いいづか じょうじ） • ココナラ歴1年半 • 初心者ながらにココナラのテニス部に所属 • 足のサイズ 30cm アイコンはココナラで発注！
5. Copyright coconala Inc. All Rights Reserved. 自己紹介 1 5 株式会社ココナラ プロダクト開発部 フロントエンド開発グループ 加藤 大河（かとう たいが） • ココナラ歴8年 • 趣味：ランチ探検 ◦ 渋谷 550軒 ◦ 五反田 400軒 アイコンはココナラで発注！
6. Copyright coconala Inc. All Rights Reserved. 会社紹介 Chapter 02 6
7. Copyright coconala Inc. All Rights Reserved. 会社紹介 2 7
8. Copyright coconala Inc. All Rights Reserved. 会社紹介（coconala.comで使用している技術スタック） 2 8 フロントエンド API ※一部CakePHPで動いている画面もあり ゲートウェイ gRPC gRPC
9. Copyright coconala Inc. All Rights Reserved. Core Web Vitals Chapter 03 9
10. Copyright coconala Inc. All Rights Reserved. Web Vitalsとは、ウェブ上でより優れたユーザーエクスペリエンス（UX）を提供するため に、Googleが提唱している指標のこと
 
 Core Web Vitalsとは、Web Vitalsの中でも特に重点的に計測する必要がある以下3つ の指標のこと
 ・LCP（Largest Contentful Paint）
 ・FID（First Input Delay）
 ・CLS（Cumulative Layout Shift）
 Core Web Vitals 3 Core Web Vitalsとは 10
11. Copyright coconala Inc. All Rights Reserved. LCPとは、Largest Contentful Paintの略で「 ビューポート内に表示される最も大きいコンテ ンツ（画像やテキスト ブロック）のレンダリング時間」を表す指標になります 
 Core Web Vitals 3 LCPとは 11 引用元：https://web.dev/
12. Copyright coconala Inc. All Rights Reserved. Core Web Vitals 3 12 PC モバイル ココナラのサービスページ
13. Copyright coconala Inc. All Rights Reserved. 13 どうやって Core Web Vitalsを モニタリングしているの？
14. Copyright coconala Inc. All Rights Reserved. Core Web Vitals 3 モニタリング方法 14 ・Google Search Console ・Grafana
15. Copyright coconala Inc. All Rights Reserved. メリット
 ・Googleが提供しているツールなので値に正確性がある 
 
 
 デメリット
 ・検索ができない（過去のデータを探せない）
 ・最新のデータ反映が遅い
 Core Web Vitals 3 Google Search Console 15
16. Copyright coconala Inc. All Rights Reserved. Core Web Vitals 3 16
17. Copyright coconala Inc. All Rights Reserved. Core Web Vitals 3 Grafana 17 メリット
 ・反映が早い
 ・過去のデータが残っており、期間やページ単位で検索ができる
 
 
 デメリット
 ・自前で実装する必要があるため、準備に工数がかかる
 　※ web-vitalsというライブラリを使用してlogを出し、Grafanaで可視化しております。 
 ・データが増えると重い

18. Copyright coconala Inc. All Rights Reserved. Core Web Vitals 3 18
19. Copyright coconala Inc. All Rights Reserved. 19 どうやって ボトルネックを 判断しているの？
20. Copyright coconala Inc. All Rights Reserved. Core Web Vitals 3 ボトルネック調査 20 ・PageSpeed Insights ・Google Chrome DevToolsのLighthouse ・Google Chrome DevToolsのPerformance Insights
21. Copyright coconala Inc. All Rights Reserved. 21 パフォーマンス改善を行った 結果、こうなりました！
22. Copyright coconala Inc. All Rights Reserved. Core Web Vitals 3 良好URL数が1% → 99% 22 1%から 99%へ！ 一度50%達成 => 30%弱までダウン
23. Copyright coconala Inc. All Rights Reserved. Core Web Vitals 3 改善結果 23
24. Copyright coconala Inc. All Rights Reserved. やったこと Chapter 04 24
25. Copyright coconala Inc. All Rights Reserved. 25 目次 1. ロジック 2. 画像 3. バンドルサイズ 4. その他 5. 結果
26. Copyright coconala Inc. All Rights Reserved. 無駄な処理の改善 初期表示に不要な処理は後回しにする 無駄な直列処理（特にAPIコール）を修正 NuxtであればnuxtServerInitなど、全ページで共通の処理は 影響が大きいため要確認 ヘッダーなどの共通コンポーネントも影響大 やったこと：ロジック 4 ロジックの修正 26
27. Copyright coconala Inc. All Rights Reserved. 画像の属性 imgタグには原則 loading="lazy" decoding="async" を付け ておく ただし画像がLCP要素の場合は付けず、代わりに fetchpriority="high" を付ける loading="lazy" : 画像を遅延読込させる decoding="async" : 画像のデコード処理を非同期化する fetchpriority="high" : 読み込みの優先度を高める やったこと：画像 4 画像の最適化 27
28. Copyright coconala Inc. All Rights Reserved. 画像の圧縮（次世代フォーマット化） ユーザーがアップロードした画像を、WebPやAVIFに変換して 圧縮 Akamaiの「Image & Video Manager」というサービスを利用 して、CDN上で自動的に変換 やったこと：画像 4 画像の最適化 28
29. Copyright coconala Inc. All Rights Reserved. Webpack Bundle Analyzer Webpack Bundle Analyzerでバンドルサイズを可視化 大きなプラグインや無駄にインポートされているコンポーネント など、問題点を分析 やったこと：バンドルサイズ 4 バンドルサイズの分析 29
30. Copyright coconala Inc. All Rights Reserved. やったこと：バンドルサイズ 4 バンドルサイズの分析 30
31. Copyright coconala Inc. All Rights Reserved. プラグインの削減 サイズが大きい割に一部でしか使っておらず、自前で代替で きるようなプラグインは削除 全ページで読み込む必要のないプラグインは該当箇所でのみ 読み込むようにする サーバー側で不要なプラグインはクライアント側で読み込むよ うにする やったこと：バンドルサイズ 4 バンドルサイズの削減 31
32. Copyright coconala Inc. All Rights Reserved. ポリフィルの削減 無駄に古いブラウザをサポートしているとポリフィルのサイズ が大きくなるため、古いままだった推奨動作環境や社内のサ ポート基準を見直して更新 ターゲットブラウザの設定（browserslist）を合わせて更新する ことでポリフィル削減 IE用のプラグインも削除 やったこと：バンドルサイズ 4 バンドルサイズの削減 32
33. Copyright coconala Inc. All Rights Reserved. ダイナミックインポート化 通常のインポートだとその場でインポートされるが、条件に よって使われない場合があると無駄になる ダイナミックインポートにして、使われる場合のみインポートさ れるようにする やったこと：バンドルサイズ 4 バンドルサイズの削減 33
34. Copyright coconala Inc. All Rights Reserved. 組み合わせで事故の危険性あり サーバーとクライアントのレンダリング結果が一致しないとエ ラーになるため、サーバーとクライアントで結果が変わる出し 分けがある箇所に対してはダイナミックインポートを使わない よう注意 ダイナミックインポートにした子コンポーネントの中の、孫コン ポーネント内の出し分け等も確認する必要あり やったこと：バンドルサイズ 4 ダイナミックインポートの注意点 34 （isPC はブラウザの横幅によって変わるフラグ）
35. Copyright coconala Inc. All Rights Reserved. webpack-bundle-analyzer（削減結果） app.jsは約40%削減 vendors/app.jsは約22%削減 やったこと：バンドルサイズ 4 バンドルサイズの削減結果 35 2022/06 2023/06
36. Copyright coconala Inc. All Rights Reserved. 初期表示に不要な要素をCSR化 LCP要素を優先して不要なものは後回しにするため、初期表 示に不要な要素はクライアントサイドでレンダリングさせる クリックしたら出るモーダルや、遅れて表示されても問題ない バルーンなど やったこと：その他 4 クライアントサイドレンダリング化 36
37. Copyright coconala Inc. All Rights Reserved. 通信経路を短縮 サーバーサイドのAPI通信はAWS内部で通信させるようにす る クライアントサイドの通信はインターネット経由のままにするた め、CSRとSSRでAPIのURLを変える やったこと：その他 4 API通信の内部化 37
38. Copyright coconala Inc. All Rights Reserved. Node.js（&V8エンジン）のアップデート Node.jsが古いと、内部のJavaScript実行エンジン（V8エンジ ン）も古い アップデートすることでサーバーサイドのパフォーマンスが改 善できた やったこと：その他 4 Node.jsのアップデート 38
39. Copyright coconala Inc. All Rights Reserved. やったこと：結果 4 結果 40回弱リリースを繰り返し、徐々に改善 良好URL1%から99%へ 39
40. Copyright coconala Inc. All Rights Reserved. 40 最後に Chapter 05 40
41. Copyright coconala Inc. All Rights Reserved. 最後に 5 ココナラでは エンジニアを募集しております 41
42. 人生の可能性を広げたユーザーストーリー わたしのスキル解放記 https://blog.coconala.co.jp/m/me8a586112ad2 ココナラの人と組織を伝えるブログ ココナラLIVE https://blog.coconala.co.jp/m/m4e4abe8b17e5 More Info 42 ココナラに所属するエンジニアによるブログ テックブログ https://zenn.dev/coconala エンジニア採用ホームページ https://coconala.co.jp/recruit/engineer 採用ホームページ https://coconala.co.jp/recruit
43. Copyright coconala Inc. All Rights Reserved. 43 パフォーマンス改善の内容は テックブログでも公開しています
44. 一人ひとりが 「自分のストーリー」を 生きていく世の中をつくる ユーザーにとって見えていなかった無数の可能性の扉を開く、 そこにエンジニアとして一緒に貢献しませんか。