Tweet
Tweet

Slide 1

Slide 1 text

フロントエンドの チューニングに挑戦してみる 2025/03/01 ひろしまフロントエンド勉強会 Vol.39 @jdkfx

Slide 2

Slide 2 text

アジェンダ 1. はじめに 2. パフォーマンスチューニングについて 3. 具体的にどうすればよいのか 4. 実践編 5. モブプロ

Slide 3

Slide 3 text

自己紹介 ● 田添春樹 / @jdkfx ● 株式会社GoQSystem ● やっていること ○ PHPを用いたバックエンド開発、Vue.js製のOSSをちょこっと... ● よく使う技術 ( 使っていた技術 ) ○ PHP, JavaScript, Vue.js, Svelte … ○ Vue.jsでのE2Eテストに苦戦中

Slide 4

Slide 4 text

パフォーマンスチューニングについて

Slide 5

Slide 5 text

あなたはとあるWEBサイトを訪問しました ● たとえばとあるインターネットニュースサイト ● SNSで見たタイトルに惹かれ詳しく読みたい！と思った ● 遷移してみると...

Slide 6

Slide 6 text

広告が多くてサイトが重い ● ページの大半が広告 ● 広告画像の読み込みの時間が長く スクロールに時間がかかる ● もちろんユーザーの持っている 端末のスペックによるが、一般的なユーザーが 高スペックな端末を持っているとは限らない

Slide 7

Slide 7 text

サイトが重いことによるデメリット ● ユーザー体験（UX）の悪化 ● ページ離脱 ● 二度と利用してもらえない可能性さえ ● SEOにも影響 単に広告が悪いと言うわけではないけど…

Slide 8

Slide 8 text

では、あなたのサービスは？ ● 読み込みに時間がかかっていませんか？ ● クリック、スクロールに大幅な遅延がありませんか？

Slide 9

Slide 9 text

パフォーマンスを改善し、 ユーザーに最高の価値を届けましょう

Slide 10

Slide 10 text

具体的にどうすればよいのか

Slide 11

Slide 11 text

まずはボトルネックの確認 ● 問題となりそうな箇所を見つける ● Chrome Devtools ○ Lighthouse ○ Network ○ Performance ● その他計測ツールはたくさん…

Slide 12

Slide 12 text

自作ブログをLighthouseで計測 https://blog.jdkfx.com/

Slide 13

Slide 13 text

これを読もう ● 大体のことは書いてあるはず ● 先述のChrome Dev Tools活用法についても しっかり記載されている WEB+DB PRESS plusシリーズ 超速！ Webページ速度改善ガイド ──使いやすさは「速さ」から始まる https://gihyo.jp/book/2017/978-4-7741-9400-4

Slide 14

Slide 14 text

実践編

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Web Speed Hackathon 2024 ● "Web Speed Hackathon 2024" は、非常に重たい Web アプリをチューニン グして、いかに高速にするかを競う競技です。 ● 今回のテーマは、架空の漫画サイト「Cyber TOON」です。 レギュレーショ ンを守った上で、Cyber TOON のパフォーマンスを改善してください。 ● https://github.com/CyberAgentHack/web-speed-hackathon-2024

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Bundle Size Analyzer https://esbuild.github.io/analyze/

Slide 19

Slide 19 text

configまわり ● NODE_ENV: process.env['NODE_ENV'] || 'production' ● minify: true, ● sourcemap: false, ● target: Chromeの最新版へ ● etc. ● client.global.js 47.0mb => 36.5mb

Slide 20

Slide 20 text

いろいろやる ● フォントファイルは使ってないので削除 ● faviconをbase64形式からico形式に ● SVGファイルを圧縮

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

画像の正体 ● base64 エンコードされた画像 ● base64 → png → webp ● src=”/assets/hero.webp” ● client.global.js 36.5mb => 23.8mb

Slide 25

Slide 25 text

画像を軽量化した

Slide 26

Slide 26 text

画像を軽量化した

Slide 27

Slide 27 text

こんな感じでミニマムに ● 必要ないものを削除 ● 小さくできるものは小さく

Slide 28

Slide 28 text

画像の遅延ロード ● loading='lazy' ● スクロール前の画像を読み込まない

Slide 29

Slide 29 text

デモ

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

ライブラリ周りを改善 ● @mui/icons-material 気になる

Slide 33

Slide 33 text

結果（before）

Slide 34

Slide 34 text

結果（after）

Slide 35

Slide 35 text

最後に

Slide 36

Slide 36 text

No content