Pro Yearly is on sale from $80 to $50! »

First_Paintと_クリティカルレンダリングパス

 First_Paintと_クリティカルレンダリングパス

5abf9d4714b77a15beea063d08586560?s=128

howdy39

April 13, 2018
Tweet

Transcript

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

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

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

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

    レイアウト 5. ペイント 4
  5. preload scanner 5

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

    Highest High/Medium/Low Low Priority
  7. 7 デモ) http://topgate.co.jp

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

    レイアウト 5. ペイント 8
  9. Document Object Model (DOM) 9

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

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

    レイアウト 5. ペイント 11
  12. CSS Object Model (CSSOM) 12

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

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

    レイアウト 5. ペイント 14
  15. Render Tree 15

  16. 16 DOMとCSSOMを関連付ける

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

    レイアウト 5. ペイント 17
  18. Layout & Paint 18

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

  20. Critical Rendering Path (CRP) 20

  21. 1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.

    レイアウト 5. ペイント 21 ペイントまでの 一連の流れ のこと
  22. クリティカルレンダリングパスを 短縮すると 22

  23. First Paint が早くなる 23

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

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

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

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

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

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

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

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

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

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

  34. まとめ 34

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

  36. CSS最適化 36 • 圧縮 • メディアクエリ • インラインスタイル • セレクタ最適化

    • 画面単位でCSSを読み込む
  37. JS最適化 37 • 圧縮 • 後実行(</body>の直前/async/defer) • 画面単位でJavaScriptを読み込む

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