Exploring Critical Rendering Path

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.

Ed35943d3199ea37b1b60c39615e8163?s=128

Raphael Amorim

October 08, 2016
Tweet

Transcript

  1. 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
  2. 3.
  3. 7.

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

    CSS markup is transformed into a CSS Object Model (CSSOM)
  4. 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
  5. 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
  6. 10.

    <html> <head> <meta charset=“utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>The Astronaut</title> <!--

    Stylesheet --> <link href="style.css" rel="stylesheet"> </head> <body> <p>Neil Armstrong</p> <p><img src=“just-a-neil-picture.jpg”></p> </body> </html> How does the browser process this page?
  7. 15.

    While browser was mounting the DOM. It encountered a link

    tag in the head section referencing an external CSS
  8. 17.

    We repeat the HTML process, but for CSS instead of

    HTML: Bytes ! characters ! tokens ! nodes ! CSSOM
  9. 20.

    The DOM and CSSOM trees are combined to form the

    render tree Render tree contains only the nodes required to render the page
  10. 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
  11. 22.

    Captures all the visible DOM content on the page and

    all the CSSOM style information for each node
  12. 24.

    p img body CSSOM color: black background: #FFF color: black

    *font-size: 14px *user agent styles *font-weight: normal padding: 10px
  13. 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…”
  14. 29.

    Captures the exact position and size of each element within

    the viewport <html> <head> <meta name="viewport" content="width=device-width,initial- scale=1"> <title>
 My application
 </title> </head> <body> <div style="width: 100%"> <div style="width: 50%">
 JavaScript Rocks!
 </div> </div> </body> </html>
  15. 30.

    Captures the exact position and size of each element within

    the viewport <html> <head> <meta name="viewport" content="width=device-width,initial- scale=1"> <title>
 My application
 </title> </head> <body> <div style="width: 100%"> <div style="width: 50%">
 JavaScript Rocks!
 </div> </div> </body> </html> viewport size=device-width JavaScript Rocks!
  16. 31.

    After know what nodes are visible, and get their computed

    styles and geometry, becomes Paint stage.
  17. 32.
  18. 33.
  19. 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.
  20. 40.

    The goal of optimizing the critical rendering path is to

    allow the browser to paint the page as quickly as possible.
  21. 41.
  22. 42.
  23. 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.
  24. 44.

    <html> <head> <meta name="viewport" 
 content="width=device-width,initial-scale=1"> <title>Some Random Page</title> <link

    href="style.css" rel="stylesheet"> <script src="jquery.js"></script> </head> <body> <div><img src="polemic-photo.jpg"></div> <script src="main.js"></script> </body> </html>
  25. 45.
  26. 47.

    Once the HTML content becomes available, the browser has to

    parse the bytes, convert them into tokens, and build the DOM tree
  27. 50.

    1# Note: 
 JavaScript wait til CSS files are downloaded

    and parsed Even with inline scripts?
  28. 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
  29. 52.

    2# Note: 
 Images doesn’t block the initial render of

    the page (including domContentLoaded event).
  30. 53.

    When we talk about the critical rendering path we are

    typically talking about the HTML markup, CSS and JavaScript
  31. 57.

    Make critical assets as small as possible by minifying and

    compressing both the html and css (obfuscation process)
  32. 60.

    Specifies that the script will be executed asynchronously as soon

    as it is available 
 
 (only for external scripts)
  33. 61.

    <html> <head> <meta name="viewport" 
 content="width=device-width,initial-scale=1"> <title>Some Random Page</title> <link

    href="style.css" rel="stylesheet"> <script src="jquery.js"></script> </head> <body> <div><img src="polemic-photo.jpg"></div> <script src=“main.js"></script> </body> </html>
  34. 62.

    <html> <head> <meta name="viewport" 
 content="width=device-width,initial-scale=1"> <title>Some Random Page</title> <link

    href="style.css" rel="stylesheet"> <script src="jquery.js"></script> </head> <body> <div><img src="polemic-photo.jpg"></div> <script src=“main.js"></script> </body> </html>
  35. 63.

    <html> <head> <meta name="viewport" 
 content="width=device-width,initial-scale=1"> <title>Some Random Page</title> <link

    href="style.css" rel="stylesheet"> <script src="jquery.js"></script> </head> <body> <div><img src="polemic-photo.jpg"></div> <script src=“main.js"></script> </body> </html> DOMContentLoaded: 1.73s
  36. 64.

    <html> <head> <meta name="viewport" 
 content="width=device-width,initial-scale=1"> <title>Some Random Page</title> <link

    href="style.css" rel="stylesheet"> <script src="jquery.js"></script> </head> <body> <div><img src="polemic-photo.jpg"></div> <script src=“main.js” async></script> </body> </html>
  37. 65.

    <html> <head> <meta name="viewport" 
 content="width=device-width,initial-scale=1"> <title>Some Random Page</title> <link

    href="style.css" rel="stylesheet"> <script src="jquery.js"></script> </head> <body> <div><img src="polemic-photo.jpg"></div> <script src=“main.js” async></script> </body> </html>
  38. 66.

    <html> <head> <meta name="viewport" 
 content="width=device-width,initial-scale=1"> <title>Some Random Page</title> <link

    href="style.css" rel="stylesheet"> <script src="jquery.js"></script> </head> <body> <div><img src="polemic-photo.jpg"></div> <script src=“main.js"></script> </body> </html> DOMContentLoaded: 191ms
  39. 70.

    Pros: Specify which scripts will be loaded according to the

    interaction Better script dependencies management
  40. 73.

    A good approach is to inline only the critical css,

    and downloading the remaining css async
  41. 86.

    npm i fontfaceonload FontFaceOnload("My Custom Font Family", { success: function()

    { document.documentElement.className.add(“my-custom-font-family”); } });