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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

preload scanner 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Document Object Model （DOM） 9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

CSS Object Model （CSSOM） 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Render Tree 15

Slide 16

Slide 16 text

16 DOMとCSSOMを関連付ける

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Layout & Paint 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Critical Rendering Path （CRP） 20

Slide 21

Slide 21 text

1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4. レイアウト 5. ペイント 21 ペイントまでの一連の流れのこと

Slide 22

Slide 22 text

クリティカルレンダリングパスを短縮すると 22

Slide 23

Slide 23 text

First Paint が早くなる 23

Slide 24

Slide 24 text

クリティカルレンダリングパスとCSSOMの関係 24

Slide 25

Slide 25 text

CSSOMの構築がおわるまでレンダリングツリーが作られない＝描画されない 25

Slide 26

Slide 26 text

26 CSSOMツリー構築 DOMツリー構築

Slide 27

Slide 27 text

27 デモ） 1. コードの解説 2. h1は何色になる？ 3. https://howdy39.github.io/study-critical- render-path/css-block.html ※回線速度を(10kb/s)程度に遅くして実行

Slide 28

Slide 28 text

28 CSSOMツリー構築めっちゃ時間かかった DOMツリー構築すぐ終わった

Slide 29

Slide 29 text

クリティカルレンダリングパスとJavaScriptの関係 29

Slide 30

Slide 30 text

JavaScriptはDOMツリー構築をストップさせる＝描画されない 30

Slide 31

Slide 31 text

31 JavaScriptはDOM ツリーの構築を止める

Slide 32

Slide 32 text

32 デモ） 1. コードの解説 2. https://howdy39.github.io/study-critical- render-path/js-block.html

Slide 33

Slide 33 text

33 CSSOMツリー構築すぐ終わった DOMツリー構築めっちゃ時間かかった

Slide 34

Slide 34 text

まとめ 34

Slide 35

Slide 35 text

DOMツリー・CSSOMツリーの構築を意識した実装をすることで First Paint を早くすることが出来る 35

Slide 36

Slide 36 text

CSS最適化 36 ● 圧縮 ● メディアクエリ ● インラインスタイル ● セレクタ最適化 ● 画面単位でCSSを読み込む

Slide 37

Slide 37 text

JS最適化 37 ● 圧縮 ● 後実行(

Slide 38

Slide 38 text

参考 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