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
ドキュメント翻訳で学ぶ新しい言語仕様・機能
jdkfx
1
250
フレームワークの内部構造を理解するためにフレームワークを作ってみることにした / phpcon-2021
jdkfx
2
1.2k
Other Decks in Programming
See All in Programming
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
280
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
Deep Dive into ~/.claude/projects
hiragram
14
14k
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
300
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How STYLIGHT went responsive
nonsquared
100
5.6k
Building Adaptive Systems
keathley
43
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Documentation Writing (for coders)
carmenintech
72
4.9k
GitHub's CSS Performance
jonrohan
1031
460k
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