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

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