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
First_Paintと_クリティカルレンダリングパス
Search
howdy39
April 13, 2018
Programming
0
420
First_Paintと_クリティカルレンダリングパス
howdy39
April 13, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
630
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
440
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
510
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.2k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.1k
Promise
howdy39
1
260
カラーユニバーサルデザイン / color universal design
howdy39
0
640
Geolocation API
howdy39
0
86
Chrome DevTools の Console を使いこなす/Using the Chrome dev tool
howdy39
0
150
Other Decks in Programming
See All in Programming
코틀린으로 멀티플랫폼 만들기
pangmoo
0
120
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.8k
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
プールにゆこう
irof
2
120
Ruby製社内ツールのGo移行
bgpat
2
330
ゆるい個人開発のススメ
kuroppe1819
10
940
SpringBoot+MyBatisで例外が出たときどこを見るか
syukai
0
110
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
ONE WEDGE_company_guide
1wedge_one
0
380
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
Featured
See All Featured
Fireside Chat
paigeccino
20
2.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
It's Worth the Effort
3n
180
27k
Scaling GitHub
holman
457
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
In The Pink: A Labor of Love
frogandcode
138
21k
4 Signs Your Business is Dying
shpigford
175
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
Designing Experiences People Love
moore
136
23k
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