First_Paintと_クリティカルレンダリングパス

First Paintとクリティカルレンダリングパス 2018/04/13 トップゲート社第3回フロントエンド勉強会 1

Web画面を表示するときブラウザは裏でどんなことをやっているのか 2

1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 3

preload scanner 5

6 HTML読み込み→ css/js/画像などのサブリソースを同時に読み込む CSS JavaScript image HTML プリロードスキャナ
Highest High/Medium/Low Low Priority

7 デモ） http://topgate.co.jp

Document Object Model （DOM） 9

10 ツリー状にHTMLノードを構築

CSS Object Model （CSSOM） 12

13 ツリー状にCSSノードを構築

Render Tree 15

16 DOMとCSSOMを関連付ける

Layout & Paint 18

19 画面の幅や高さからレイアウトを決めて描画

Critical Rendering Path （CRP） 20

レイアウト 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

First_Paintと_クリティカルレンダリングパス

First_Paintと_クリティカルレンダリングパス

More Decks by howdy39

Other Decks in Programming

Featured

Transcript