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
130
フロントエンドのチューニングに挑戦してみる
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
210
フレームワークの内部構造を理解するためにフレームワークを作ってみることにした / phpcon-2021
jdkfx
2
1.2k
Other Decks in Programming
See All in Programming
生成AIを使ったQAアプリケーションの作成 - ハンズオン補足資料
oracle4engineer
PRO
3
220
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
6k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
1.5k
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
140
The Evolution of the CRuby Build System
kateinoigakukun
0
700
ComposeでWebアプリを作る技術
tbsten
0
110
State of Namespace
tagomoris
4
1.4k
Building Scalable Mobile Projects: Fast Builds, High Reusability and Clear Ownership
cyrilmottier
2
280
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
150
Kamal 2 – Get Out of the Cloud
aleksandrov
1
190
リストビュー画面UX改善の振り返り
splcywolf
0
140
Develop Faster With FrankenPHP
dunglas
2
3.3k
Featured
See All Featured
Making Projects Easy
brettharned
116
6.1k
Fireside Chat
paigeccino
37
3.4k
Adopting Sorbet at Scale
ufuk
76
9.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Designing for Performance
lara
608
69k
The Pragmatic Product Professional
lauravandoore
33
6.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Rails Girls Zürich Keynote
gr2m
94
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
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