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
Shouta
March 23, 2024
Programming
8
1.9k
フロントエンドパフォーマンス 入門
Shouta
March 23, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
2.8k
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
230
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
120
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
7
6.5k
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
2
940
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
2.9k
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
140
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
120
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
970
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
190
ローコードサービスの進化のためのモノレポ移行
taro28
1
330
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Bash Introduction
62gerente
611
210k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
610
Documentation Writing (for coders)
carmenintech
69
4.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Docker and Python
trallard
44
3.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
4 Signs Your Business is Dying
shpigford
183
22k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Transcript
フロントエンドパフォーマンス 入門 内山 翔太
自己紹介 基本的に興味関心がパフォーマンスに全振りしています SES で働いています 普段は Java を書いており、フロントエンドは趣味です(?)
今日の内容 Core Web Vitals Web パフォーマンスにおいて確認すべき要素 すぐに取り組める改善
Web サイトのパフォーマンスの重要性 ユーザー体験の向上 ユーザー体験が悪いと離脱してしまう Amazon では表示速度が 0.1 秒遅くなると売上が 1 %減少すると言われている
( 後述する) Core Web Vitals は検索順位にも影響を与える 訪問者あたりの収益が 53.37% 、コンバージョン率が 33.13% 増加したケースもあ るらしい。 https://web.dev/case-studies/rakuten?hl=ja
Core Web Vitals とは Google が提唱するパフォーマンスの指標のことです。 Core Web Vitals は、ページの読み込みパフォーマンス、インタラクティブ性、視
覚的安定性に関する実際のユーザー エクスペリエンスを測定する一連の指標で す。 https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ja Lighthouse や PageSpeed Insights で手軽に計測できます。
Core Web Vitals の指標を解説 First Contentful Paint (FCP) ページで一番最初に描画されるまでにかかった時間 Largest
Contentful Paint (LCP) 最も大きな要素が描画されるまでにかかった時間 Total Blocking Time (TBT) ページがユーザー入力に応答できない時間 最近だと、Hydration と呼ばれる処理にかかる時間が長いことで悪化しやすい 印象 Cumulative Layout Shift (CLS) レイアウトシフトがどのくらい起きているかの指標
Web パフォーマンスにおい て確認すべき要素 フロントエンドエンジニアが確認す るべきは フロントエンド ネットワークの帯域( ファイルサ イズなど) React
Server Components(RSC) の登場でバックエンドまで見る 必要も... ? https://twitter.com/takehora/statu s/1499185146779607045
この画像で何を伝えたかったのか? ファイルサイズは数多くある要素の内の一部である。 ファイルサイズの削減、圧縮はその一部のみに効く施策である minify は計算量を削減しないし、処理同士の依存関係も解消しない サイト全体のファイルサイズが小さい = 速いではない 逆に、サイトが遅い =
ファイルサイズが大きいでもない!!! 処理のコスト、順序を考えるのが大切
これらの知識をどう活かすか これらの知識がなんとなくでも身につくと、どの技術が何を解決するために生まれた のか。自分はどの技術を採用すればいいのか理解しやすくなります。 例えば RSC はサーバー側で React コンポーネントを実行し、ブラウザでの実行 コストを削減する技術です。 ブラウザ上での
JavaScript の実行コストが減ると、ユーザー入力を妨げる重たい 処理が減るので、TBT や Time to Interactive( 紹介しきれなかった...) が改善する。
おまけ 最新の HTML 、CSS を学ぼう! ライブラリを使わなくても dialog 要素でダイアログ, details 要素でアコーディオ
ンを簡単に作れる。 ライブラリを使用するよりバンドルサイズも小さくなる。 軽量なライブラリを選定しよう。 bundlephobia や Shakerphobia を使用するとバンドルサイズを測定できます。 https://bundlephobia.com/ 本当にそのライブラリ必要ですか?? 上 2 つとも関係しますが、最近の HTML,CSS,JavaScript は進化しています。 標準の技術で実現できないのか?自作できないのか? まずは検討してみよう!!
おわり 入門ということで、 パフォーマンスの指標 パフォーマンスはいろんな要素が絡んでいること を中心に話しました。 ご清聴ありがとうございました!