Exploring Critical Rendering Path

This guide will not bring you a magic formula to optimize critical render path. When the subject is web performance: there's no magic formula. Analyze performance is careful and meticulous process, and it can bring different results based on various existing variables.

Transcript

1. ~ Exploring
   Critical
   Rendering
   Path
   Why Performance Matters
   @raphamundi's
   

   View Slide

2. Raphael Amorim
   This guy seems like a nice
   person, but he doesn’t.
   Seriously. He likes topics
   related to JavaScript, Python,
   Clojure, WebGL, Algorithms and
   sometimes force some git push.

   Working most part of his time in
   useless open source projects.
   Works in globo.com, loves to
   create useful tiny modules to
   daily use.
   @raphamundi
   

   View Slide

3. We write the
   markup. . .

   

   Then a page comes
   out on the screen.
   

   View Slide

4. But how does
   the browser
   rendering
   engine work?
   

   View Slide

5. 1#
   Constructing
   the Object
   Model
   

   View Slide

6. HTML markup is transformed into a
   Document Object Model (DOM)
   

   View Slide

7. HTML markup is transformed into a
   Document Object Model (DOM)
   CSS markup is transformed into a CSS
   Object Model (CSSOM)
   

   View Slide

8. HTML markup is transformed into a
   Document Object Model (DOM)
   CSS markup is transformed into a CSS
   Object Model (CSSOM)
   DOM and CSSOM are independent data
   structures
   

   View Slide

9. HTML markup is transformed into a
   Document Object Model (DOM)
   CSS markup is transformed into a CSS
   Object Model (CSSOM)
   DOM and CSSOM are independent data
   structures
   Bytes ! characters ! tokens ! nodes ! object model
   

   View Slide

10. 
    
    
    content="width=device-width,initial-scale=1">
    The Astronaut
    
    
    
    
    Neil Armstrong
    
    
    
    How does the browser process this page?
    

    View Slide

11. 3c68746d6c3ea20203c686561643ea202020203c6d65746120636861727365743d201c75746
    62d38223ea202020203c6d657461206e616d653d2276696577706f72742220a20636f6e7465
    6e743d2277696474683d6465766963652d77696474682c696e697469616c2d7363616c653d3
    1223ea202020203c7469746c653e54686520417374726f6e6175743c2f7469746c653ea2020
    20203c212d2d205374796c657368656574202d2d3e2020a202020203c6c696e6b2068726566
    3d227374796c652e637373222072656c3d227374796c657368656574223ea20203c2f686561
    643ea20203c626f64793ea202020203c703e4e65696c2041726d7374726f6e673c2f703ea20
    2020203c703e3c696d67207372633d201c6a7573742d612d6e65696c2d706963747572652e6
    a7067201d3e3c2f703ea20203c2f626f64793ea3c2f68746d6c3e
    ……
    Conversion
    

    View Slide

12. Tokenizing
    ……
    StartTag: html StartTag: head
    EndTag: head EndTag: html
    

    View Slide

13. Lexing
    StartTag: html StartTag: head
    EndTag: head EndTag: html
    html head
    *NodeType
    p body
    meta
    

    View Slide

14. DOM Mount
    head
    p
    body
    meta
    html
    link
    “Neil Arm…” img
    

    View Slide

15. While browser was mounting the DOM.
    It encountered a link tag in the head
    section referencing an external CSS
    

    View Slide

16. Then the Browser make a request for
    this resource.
    

    View Slide

17. We repeat the HTML process, but for
    CSS instead of HTML:
    Bytes ! characters ! tokens ! nodes ! CSSOM
    

    View Slide

18. 2#
    Render-tree
    Construction
    

    View Slide

19. The DOM and CSSOM trees are combined
    to form the render tree
    

    View Slide

20. The DOM and CSSOM trees are combined
    to form the render tree
    Render tree contains only the nodes
    required to render the page
    

    View Slide

21. The DOM and CSSOM trees are combined
    to form the render tree
    Render tree contains only the nodes
    required to render the page
    Layout computes the exact position and
    size of each object
    

    View Slide

22. Captures all the visible DOM content
    on the page and all the CSSOM style
    information for each node
    

    View Slide

23. head
    p
    body
    meta
    html
    link
    “Neil Arm…” img
    DOM
    

    View Slide

24. p img
    body
    CSSOM
    color: black
    background: #FFF
    color: black
    *font-size: 14px
    *user agent styles
    *font-weight: normal
    padding: 10px
    

    View Slide

25. img
    body
    Render Tree
    color: black
    background: #FFF
    color: black
    *font-size: 14px
    *user agent styles
    *font-weight: normal
    padding: 10px
    p
    “Neil Arm…”
    

    View Slide

26. 3#
    Layout
    &
    Paint
    

    View Slide

27. Layout 

    Calculate nodes exact position and
    size within the viewport of the device
    

    View Slide

28. Then all of the relative measurements are
    converted to absolute pixels on the screen
    

    View Slide

29. Captures the exact position and size
    of each element within the viewport
    
    
    content="width=device-width,initial-
    scale=1">
    

    My application

    
    
    
    
    

    JavaScript Rocks!

    
    
    
    
    

    View Slide

30. Captures the exact position and size
    of each element within the viewport
    
    
    content="width=device-width,initial-
    scale=1">
    

    My application

    
    
    
    
    

    JavaScript Rocks!

    
    
    
    
    viewport size=device-width
    JavaScript
    Rocks!
    

    View Slide

31. After know what nodes are visible, and get their
    computed styles and geometry, becomes Paint stage.
    

    View Slide

32. Paint 

    Converts each node in the render tree
    to actual pixels on the screen
    

    View Slide

33. View Slide

34. Time required to perform render tree
    construction, layout and paint varies
    based on the size of the document, the
    applied styles, and the device it is
    running on.
    

    View Slide

35. rendering Document Object Model(DOM)
    CSS object model(CSSOM)
    Render Tree
    Layout & Paint
    In resume:
    

    View Slide

36. "I want to
    reduce my 

    render time."
    

    View Slide

37. Probably 

    you can’t reduce a
    specific element
    render time*
    [*] depends on case by case
    

    View Slide

38. However you can
    prioritize the
    display of content
    that relates to the
    current user action
    

    View Slide

39. Critical
    Rendering
    Path
    

    View Slide

40. The goal of optimizing the critical
    rendering path is to allow the browser to
    paint the page as quickly as possible.
    

    View Slide

41. View Slide

42. Optimizing which resources are loaded and
    in which order we can minimize the blank
    screen time.
    

    View Slide

43. Let’s dive in a simple request.
    Considering a use of regular 3G, the
    network roundtrip (propagation latency)
    to the server will cost 100ms - 750kb/s ~
    250kb/s.
    

    View Slide

44. 
    
    content="width=device-width,initial-scale=1">
    Some Random Page
    
    
    
    
    
    
    
    
    

    View Slide

45. View Slide

46. The HTML file took ~111ms to download
    

    View Slide

47. Once the HTML content becomes available, the
    browser has to parse the bytes, convert them
    into tokens, and build the DOM tree
    

    View Slide

48. After the DOMContentLoaded trigger, the
    browser starts to build the DOM tree
    

    View Slide

49. 1# Note: 

    JavaScript wait til CSS files are downloaded
    and parsed
    

    View Slide

50. 1# Note: 

    JavaScript wait til CSS files are downloaded
    and parsed
    Even with inline scripts?
    

    View Slide

51. 1# Note: 

    JavaScript wait til CSS files are downloaded
    and parsed
    Even with inline scripts?
    Inline scripts force browsers to intends
    to know what that script does. It blocks
    the CSS parse if it's placed above link
    or style tags
    

    View Slide

52. 2# Note: 

    Images doesn’t block the initial render of the
    page (including domContentLoaded event).
    

    View Slide

53. When we talk about the critical rendering path
    we are typically talking about the HTML
    markup, CSS and JavaScript
    

    View Slide

54. More critical content is related with above
    the fold, page-loaded and server-side
    rendered.
    

    View Slide

55. Less critical content is related with below
    the fold, lazy-loaded and client-side
    rendered.
    

    View Slide

56. How I
    improve it?
    

    View Slide

57. Make critical assets as small as possible by
    minifying and compressing both the html and
    css (obfuscation process)
    

    View Slide

58. Asynchronous strategies to unblock the parser
    

    View Slide

59. Async keyword
    

    View Slide

60. Specifies that the script will be executed
    asynchronously as soon as it is available 

    

    (only for external scripts)
    

    View Slide

61. 
    
    content="width=device-width,initial-scale=1">
    Some Random Page
    
    
    
    
    
    
    
    
    

    View Slide

62. 
    
    content="width=device-width,initial-scale=1">
    Some Random Page
    
    
    
    
    
    
    
    
    

    View Slide

63. 
    
    content="width=device-width,initial-scale=1">
    Some Random Page
    
    
    
    
    
    
    
    
    DOMContentLoaded: 1.73s
    

    View Slide

64. 
    
    content="width=device-width,initial-scale=1">
    Some Random Page
    
    
    
    
    
    
    
    
    

    View Slide

65. 
    
    content="width=device-width,initial-scale=1">
    Some Random Page
    
    
    
    
    
    
    
    
    

    View Slide

66. 
    
    content="width=device-width,initial-scale=1">
    Some Random Page
    
    
    
    
    
    
    
    
    DOMContentLoaded: 191ms
    

    View Slide

67. Script
    Loaders
    or Defer all of JavaScript
    

    View Slide

68. Script Loaders
    E.g: Requirejs, Yepnope.js, LABjs and Nautilus.js
    

    View Slide

69. Pros:
    Specify which scripts will be loaded
    according to the interaction
    

    View Slide

70. Pros:
    Specify which scripts will be loaded
    according to the interaction
    Better script dependencies management
    

    View Slide

71. Who use it?
    The Guardian (best perf case) - Requirejs
    g1.globo.com - Nautilusjs
    

    View Slide

72. Inline
    Critical CSS
    

    View Slide

73. A good approach is to inline only the
    critical css, and downloading the
    remaining css async
    

    View Slide

74. Concatenate and minify, always.
    

    View Slide

75. github.com/filamentgroup/loadCSS
    

    View Slide

76. Remove
    Unused CSS
    

    View Slide

77. github.com/giakki/uncss
    

    View Slide

78. Optimize
    Images
    

    View Slide

79. github.com/imagemin/imagemin
    

    View Slide

80. Inline
    Images
    

    View Slide

81. Remove a request by inlining
    a base64 image
    

    View Slide

82. Be Careful: Data URIs are
    slow on mobile devices!
    

    View Slide

83. Load fonts
    asynchronously
    

    View Slide

84. Load fonts
    asynchronous
    Use a fallback while fonts load
    "Unlimited" Cache
    Use fewer fonts, Avoid repaints
    

    View Slide

85. npm i fontfaceonload
    

    View Slide

86. npm i fontfaceonload
    FontFaceOnload("My Custom Font Family", {
    success: function() {
    document.documentElement.className.add(“my-custom-font-family”);
    }
    });
    

    View Slide

87. Optimize
    HTTP
    

    View Slide

88. Turn on keep-alive
    

    View Slide

89. GZip all the text
    

    View Slide

90. For god sake:
    Make less requests!
    

    View Slide

91. Optimize
    TCP
    

    View Slide

92. Increase initial TCP
    cwnd size
    

    View Slide

93. Disable slow-start
    restart (SSR)
    

    View Slide

94. For god sake:
    Make less requests!
    

    View Slide

95. Measure
    your
    metrics
    

    View Slide

96. developers.google.com/speed/pagespeed/insights
    

    View Slide

97. developers.google.com/speed/pagespeed/insights
    

    View Slide

98. webpagetest.org
    

    View Slide

99. webpagetest.org
    

    View Slide

100. Thank
     You
     @raphamundi
     

     View Slide

101. https://developers.google.com/web/fundamentals/performance/
     critical-rendering-path/constructing-the-object-model
     References:
     https://developers.google.com/web/fundamentals/
     performance/critical-rendering-path
     https://developers.google.com/web/fundamentals/performance/
     critical-rendering-path/render-tree-construction
     https://speakerdeck.com/bevacqua/
     high-performance-in-the-critical-path
     

     View Slide