Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

howdy39
April 13, 2018

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

howdy39

April 13, 2018
Tweet

More Decks by howdy39

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. preload scanner
    5

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. Document Object Model
    (DOM)
    9

    View Slide

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

    View Slide

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

    View Slide

  12. CSS Object Model
    (CSSOM)
    12

    View Slide

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

    View Slide

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

    View Slide

  15. Render Tree
    15

    View Slide

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

    View Slide

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

    View Slide

  18. Layout & Paint
    18

    View Slide

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

    View Slide

  20. Critical Rendering Path
    (CRP)
    20

    View Slide

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

    View Slide

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

    View Slide

  23. First Paint が早くなる
    23

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. まとめ
    34

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide