Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドのチューニングに挑戦してみる
Search
Haruki Tazoe
March 01, 2025
Programming
0
150
フロントエンドのチューニングに挑戦してみる
https://hfe.connpass.com/event/345525/
Haruki Tazoe
March 01, 2025
Tweet
Share
More Decks by Haruki Tazoe
See All by Haruki Tazoe
ドキュメント翻訳で学ぶ新しい言語仕様・機能
jdkfx
1
240
フレームワークの内部構造を理解するためにフレームワークを作ってみることにした / phpcon-2021
jdkfx
2
1.2k
Other Decks in Programming
See All in Programming
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
530
Benchmark
sysong
0
280
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
240
エラーって何種類あるの?
kajitack
5
340
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
480
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
6
5.4k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
260
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
580
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
How to Ace a Technical Interview
jacobian
277
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
A Tale of Four Properties
chriscoyier
160
23k
Producing Creativity
orderedlist
PRO
346
40k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Transcript
フロントエンドの チューニングに挑戦してみる 2025/03/01 ひろしまフロントエンド勉強会 Vol.39 @jdkfx
アジェンダ 1. はじめに 2. パフォーマンスチューニングについて 3. 具体的にどうすればよいのか 4. 実践編 5.
モブプロ
自己紹介 • 田添春樹 / @jdkfx • 株式会社GoQSystem • やっていること ◦
PHPを用いたバックエンド開発、Vue.js製のOSSをちょこっと... • よく使う技術 ( 使っていた技術 ) ◦ PHP, JavaScript, Vue.js, Svelte … ◦ Vue.jsでのE2Eテストに苦戦中
パフォーマンスチューニングについて
あなたはとあるWEBサイトを訪問しました • たとえばとあるインターネットニュースサイト • SNSで見たタイトルに惹かれ詳しく読みたい!と思った • 遷移してみると...
広告が多くてサイトが重い • ページの大半が広告 • 広告画像の読み込みの時間が長く スクロールに時間がかかる • もちろんユーザーの持っている 端末のスペックによるが、一般的なユーザーが 高スペックな端末を持っているとは限らない
サイトが重いことによるデメリット • ユーザー体験(UX)の悪化 • ページ離脱 • 二度と利用してもらえない可能性さえ • SEOにも影響 単に広告が悪いと言うわけではないけど…
では、あなたのサービスは? • 読み込みに時間がかかっていませんか? • クリック、スクロールに大幅な遅延がありませんか?
パフォーマンスを改善し、 ユーザーに最高の価値を届けましょう
具体的にどうすればよいのか
まずはボトルネックの確認 • 問題となりそうな箇所を見つける • Chrome Devtools ◦ Lighthouse ◦ Network
◦ Performance • その他計測ツールはたくさん…
自作ブログをLighthouseで計測 https://blog.jdkfx.com/
これを読もう • 大体のことは書いてあるはず • 先述のChrome Dev Tools活用法についても しっかり記載されている WEB+DB PRESS
plusシリーズ 超速! Webページ速度改善ガイド ──使いやすさは「速さ」から始まる https://gihyo.jp/book/2017/978-4-7741-9400-4
実践編
None
Web Speed Hackathon 2024 • "Web Speed Hackathon 2024" は、非常に重たい
Web アプリをチューニン グして、いかに高速にするかを競う競技です。 • 今回のテーマは、架空の漫画サイト「Cyber TOON」です。 レギュレーショ ンを守った上で、Cyber TOON のパフォーマンスを改善してください。 • https://github.com/CyberAgentHack/web-speed-hackathon-2024
None
Bundle Size Analyzer https://esbuild.github.io/analyze/
configまわり • NODE_ENV: process.env['NODE_ENV'] || 'production' • minify: true, •
sourcemap: false, • target: Chromeの最新版へ • etc. • client.global.js 47.0mb => 36.5mb
いろいろやる • フォントファイルは使ってないので削除 • faviconをbase64形式からico形式に • SVGファイルを圧縮
None
None
None
画像の正体 • base64 エンコードされた画像 • base64 → png → webp
• src=”/assets/hero.webp” • client.global.js 36.5mb => 23.8mb
画像を軽量化した
画像を軽量化した
こんな感じでミニマムに • 必要ないものを削除 • 小さくできるものは小さく
画像の遅延ロード • loading='lazy' • スクロール前の画像を読み込まない
デモ
None
None
ライブラリ周りを改善 • @mui/icons-material 気になる
結果(before)
結果(after)
最後に
None