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
170
フロントエンドのチューニングに挑戦してみる
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
270
ドキュメント翻訳で学ぶ新しい言語仕様・機能
jdkfx
1
270
フレームワークの内部構造を理解するためにフレームワークを作ってみることにした / phpcon-2021
jdkfx
2
1.2k
Other Decks in Programming
See All in Programming
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
770
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
120
Model Pollution
hschwentner
1
180
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
380
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
CSC509 Lecture 04
javiergs
PRO
0
290
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
340
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.7k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3k
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.4k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building Applications with DynamoDB
mza
96
6.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
A Tale of Four Properties
chriscoyier
160
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
How to Ace a Technical Interview
jacobian
280
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Power of CSS Pseudo Elements
geoffreycrofte
79
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