フロントエンドのチューニングに挑戦してみる

https://hfe.connpass.com/event/345525/

Transcript

1. フロントエンドの チューニングに挑戦してみる 2025/03/01 ひろしまフロントエンド勉強会 Vol.39 @jdkfx
2. アジェンダ 1. はじめに 2. パフォーマンスチューニングについて 3. 具体的にどうすればよいのか 4. 実践編 5. モブプロ
3. 自己紹介 • 田添春樹 / @jdkfx • 株式会社GoQSystem • やっていること ◦ PHPを用いたバックエンド開発、Vue.js製のOSSをちょこっと... • よく使う技術 ( 使っていた技術 ) ◦ PHP, JavaScript, Vue.js, Svelte … ◦ Vue.jsでのE2Eテストに苦戦中
4. パフォーマンスチューニングについて
5. あなたはとあるWEBサイトを訪問しました • たとえばとあるインターネットニュースサイト • SNSで見たタイトルに惹かれ詳しく読みたい！と思った • 遷移してみると...
6. 広告が多くてサイトが重い • ページの大半が広告 • 広告画像の読み込みの時間が長く スクロールに時間がかかる • もちろんユーザーの持っている 端末のスペックによるが、一般的なユーザーが 高スペックな端末を持っているとは限らない
7. サイトが重いことによるデメリット • ユーザー体験（UX）の悪化 • ページ離脱 • 二度と利用してもらえない可能性さえ • SEOにも影響 単に広告が悪いと言うわけではないけど…
8. では、あなたのサービスは？ • 読み込みに時間がかかっていませんか？ • クリック、スクロールに大幅な遅延がありませんか？
9. パフォーマンスを改善し、 ユーザーに最高の価値を届けましょう
10. 具体的にどうすればよいのか
11. まずはボトルネックの確認 • 問題となりそうな箇所を見つける • Chrome Devtools ◦ Lighthouse ◦ Network ◦ Performance • その他計測ツールはたくさん…
12. 自作ブログをLighthouseで計測 https://blog.jdkfx.com/
13. これを読もう • 大体のことは書いてあるはず • 先述のChrome Dev Tools活用法についても しっかり記載されている WEB+DB PRESS plusシリーズ 超速！ Webページ速度改善ガイド ──使いやすさは「速さ」から始まる https://gihyo.jp/book/2017/978-4-7741-9400-4
14. 実践編
16. Web Speed Hackathon 2024 • "Web Speed Hackathon 2024" は、非常に重たい Web アプリをチューニン グして、いかに高速にするかを競う競技です。 • 今回のテーマは、架空の漫画サイト「Cyber TOON」です。 レギュレーショ ンを守った上で、Cyber TOON のパフォーマンスを改善してください。 • https://github.com/CyberAgentHack/web-speed-hackathon-2024
18. Bundle Size Analyzer https://esbuild.github.io/analyze/
19. configまわり • NODE_ENV: process.env['NODE_ENV'] || 'production' • minify: true, • sourcemap: false, • target: Chromeの最新版へ • etc. • client.global.js 47.0mb => 36.5mb
20. いろいろやる • フォントファイルは使ってないので削除 • faviconをbase64形式からico形式に • SVGファイルを圧縮
24. 画像の正体 • base64 エンコードされた画像 • base64 → png → webp • src=”/assets/hero.webp” • client.global.js 36.5mb => 23.8mb
25. 画像を軽量化した
26. 画像を軽量化した
27. こんな感じでミニマムに • 必要ないものを削除 • 小さくできるものは小さく
28. 画像の遅延ロード • loading='lazy' • スクロール前の画像を読み込まない
29. デモ
32. ライブラリ周りを改善 • @mui/icons-material 気になる
33. 結果（before）
34. 結果（after）
35. 最後に