Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
First_Paintと_クリティカルレンダリングパス
howdy39
April 13, 2018
Programming
0
200
First_Paintと_クリティカルレンダリングパス
howdy39
April 13, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
400
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
7.2k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
1.7k
Promise
howdy39
0
160
カラーユニバーサルデザイン / color universal design
howdy39
0
340
Geolocation API
howdy39
0
58
Chrome DevTools の Console を使いこなす/Using the Chrome dev tool
howdy39
0
91
Media Queries
howdy39
0
46
Puppeteer と GAS を利用した Web 監視
howdy39
1
1.1k
Other Decks in Programming
See All in Programming
Kotlin KSP - Intro
taehwandev
1
520
Nix for Scala folks
kubukoz
0
140
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
masayaaoyama
1
780
Your Test Suite is Making Too Many Database Calls!
joelq
0
210
CLI構築のススメ
nyankotaro
1
260
バンドル最適化マニアクス at tfconf
mizchi
5
2.4k
Let's build components, not layers
thombergs
1
270
Jetpack Compose 頑張らないPreviewParameterProvider
horie23
0
110
Reactでアプリケーションを構築する多様化
sakito
4
3.5k
よりUXに近いSLI・SLOの運用による可用性の再設計
kazumanagano
3
1.1k
dbtとBigQueryで始めるData Vault入門
kazk1018
0
260
Why declarative UI frameworks?
tkuenneth
0
200
Featured
See All Featured
A Philosophy of Restraint
colly
192
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
WebSockets: Embracing the real-time Web
robhawkes
57
5k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
How to Ace a Technical Interview
jacobian
265
21k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
26
1.5k
GitHub's CSS Performance
jonrohan
1020
410k
Rails Girls Zürich Keynote
gr2m
86
12k
4 Signs Your Business is Dying
shpigford
169
20k
Navigating Team Friction
lara
175
11k
KATA
mclloyd
7
8.6k
Transcript
First Paintと クリティカルレンダリングパス 2018/04/13 トップゲート社 第3回 フロントエンド勉強会 1
Web画面を表示するとき ブラウザは裏でどんなことを やっているのか 2
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 3
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 4
preload scanner 5
6 HTML読み込み→ css/js/画像などのサブリソースを 同時に読み込む CSS JavaScript image HTML プリロード スキャナ
Highest High/Medium/Low Low Priority
7 デモ) http://topgate.co.jp
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 8
Document Object Model (DOM) 9
10 ツリー状にHTMLノードを構築
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 11
CSS Object Model (CSSOM) 12
13 ツリー状にCSSノードを構築
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 14
Render Tree 15
16 DOMとCSSOMを関連付ける
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 17
Layout & Paint 18
19 画面の幅や高さからレイアウトを決めて描画
Critical Rendering Path (CRP) 20
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 21 ペイントまでの 一連の流れ のこと
クリティカルレンダリングパスを 短縮すると 22
First Paint が早くなる 23
クリティカルレンダリングパス とCSSOMの関係 24
CSSOMの構築がおわるまでレ ンダリングツリーが作られない =描画されない 25
26 CSSOMツリー構築 DOMツリー構築
27 デモ) 1. コードの解説 2. h1は何色になる? 3. https://howdy39.github.io/study-critical- render-path/css-block.html ※回線速度を(10kb/s)程度に遅くして実
行
28 CSSOMツリー構築 めっちゃ時間か かった DOMツリー構築 すぐ終わった
クリティカルレンダリングパス とJavaScriptの関係 29
JavaScriptはDOMツリー構築を ストップさせる =描画されない 30
31 JavaScriptはDOM ツリーの構築を止 める
32 デモ) 1. コードの解説 2. https://howdy39.github.io/study-critical- render-path/js-block.html
33 CSSOMツリー構築 すぐ終わった DOMツリー構築 めっちゃ時間か かった
まとめ 34
DOMツリー・CSSOMツリー の構築を意識 した実装をすることで First Paint を早くすることが出来る 35
CSS最適化 36 • 圧縮 • メディアクエリ • インラインスタイル • セレクタ最適化
• 画面単位でCSSを読み込む
JS最適化 37 • 圧縮 • 後実行(</body>の直前/async/defer) • 画面単位でJavaScriptを読み込む
参考 38 https://developers.google.com/web/fundamentals/performance/critical-rendering-path https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork https://coliss.com/articles/build-websites/operation/work/about-the-critical-rendering-path.html https://qiita.com/mamo/items/ff336b5cc0a1a95e03a7