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
160
フロントエンドのチューニングに挑戦してみる
https://hfe.connpass.com/event/345525/
Haruki Tazoe
March 01, 2025
Tweet
Share
More Decks by Haruki Tazoe
See All by Haruki Tazoe
PHPのプロセス制御について
jdkfx
0
37
ちょっとした「翻訳ブーム」はこうして始まった
jdkfx
0
250
ドキュメント翻訳で学ぶ新しい言語仕様・機能
jdkfx
1
260
フレームワークの内部構造を理解するためにフレームワークを作ってみることにした / phpcon-2021
jdkfx
2
1.2k
Other Decks in Programming
See All in Programming
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
旅行プランAIエージェント開発の裏側
ippo012
2
900
Laravel Boost 超入門
fire_arlo
3
210
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
160
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
Kiroで始めるAI-DLC
kaonash
2
580
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
320
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
340
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
320
Improving my own Ruby thereafter
sisshiki1969
1
160
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Context Engineering - Making Every Token Count
addyosmani
2
40
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
A designer walks into a library…
pauljervisheath
207
24k
Into the Great Unknown - MozCon
thekraken
40
2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Embracing the Ebb and Flow
colly
87
4.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Cult of Friendly URLs
andyhume
79
6.6k
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