Exploring Critical Rendering Path
0 likes271 views
The document discusses the critical rendering path in web development, explaining how the browser transforms HTML and CSS into the DOM and CSSOM, constructs the render tree, and optimizes layout and paint for performance. It emphasizes techniques to minimize render time by prioritizing content loading and using asynchronous strategies for scripts and assets. The document also provides practical tips for improving performance through minification, caching, and optimizing image loading.
![Probably
you can’t reduce a
specific element
render time*
[*] depends on case by case](https://image.slidesharecdn.com/critical-rendering-path-161008185037/85/Exploring-Critical-Rendering-Path-37-320.jpg)
Exploring Critical Rendering Path
- 1. ~ Exploring Critical Rendering Path Why Performance Matters @raphamundi's
- 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
- 3. We write the markup. . . Then a page comes out on the screen.
- 4. But how does the browser rendering engine work?
- 6. HTML markup is transformed into a Document Object Model (DOM)
- 7. HTML markup is transformed into a Document Object Model (DOM) CSS markup is transformed into a CSS Object Model (CSSOM)
- 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
- 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
- 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?
- 12. Tokenizing <html><head>…</head>…</html> StartTag: html StartTag: head EndTag: head EndTag: html
- 13. Lexing StartTag: html StartTag: head EndTag: head EndTag: html html head *NodeType p body meta
- 15. While browser was mounting the DOM. It encountered a link tag in the head section referencing an external CSS
- 16. Then the Browser make a request for this resource.
- 17. We repeat the HTML process, but for CSS instead of HTML: Bytes ! characters ! tokens ! nodes ! CSSOM
- 19. The DOM and CSSOM trees are combined to form the render tree
- 20. The DOM and CSSOM trees are combined to form the render tree Render tree contains only the nodes required to render the page
- 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
- 22. Captures all the visible DOM content on the page and all the CSSOM style information for each node
- 24. p img body CSSOM color: black background: #FFF color: black *font-size: 14px *user agent styles *font-weight: normal padding: 10px
- 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…”
- 27. Layout Calculate nodes exact position and size within the viewport of the device
- 28. Then all of the relative measurements are converted to absolute pixels on the screen
- 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>
- 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!
- 31. After know what nodes are visible, and get their computed styles and geometry, becomes Paint stage.
- 32. Paint Converts each node in the render tree to actual pixels on the screen
- 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.
- 35. rendering Document Object Model(DOM) CSS object model(CSSOM) Render Tree Layout & Paint In resume:
- 36. "I want to reduce my render time."
- 37. Probably you can’t reduce a specific element render time* [*] depends on case by case
- 38. However you can prioritize the display of content that relates to the current user action
- 40. The goal of optimizing the critical rendering path is to allow the browser to paint the page as quickly as possible.
- 42. Optimizing which resources are loaded and in which order we can minimize the blank screen time.
- 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.
- 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>
- 46. The HTML file took ~111ms to download
- 47. Once the HTML content becomes available, the browser has to parse the bytes, convert them into tokens, and build the DOM tree
- 48. After the DOMContentLoaded trigger, the browser starts to build the DOM tree
- 49. 1# Note: JavaScript wait til CSS files are downloaded and parsed
- 50. 1# Note: JavaScript wait til CSS files are downloaded and parsed Even with inline scripts?
- 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
- 52. 2# Note: Images doesn’t block the initial render of the page (including domContentLoaded event).
- 53. When we talk about the critical rendering path we are typically talking about the HTML markup, CSS and JavaScript
- 54. More critical content is related with above the fold, page-loaded and server-side rendered.
- 55. Less critical content is related with below the fold, lazy-loaded and client-side rendered.
- 57. Make critical assets as small as possible by minifying and compressing both the html and css (obfuscation process)
- 58. Asynchronous strategies to unblock the parser
- 59. Async keyword
- 60. Specifies that the script will be executed asynchronously as soon as it is available (only for external scripts)
- 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>
- 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>
- 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
- 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>
- 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>
- 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
- 67. Script Loaders or Defer all of JavaScript
- 68. Script Loaders E.g: Requirejs, Yepnope.js, LABjs and Nautilus.js
- 69. Pros: Specify which scripts will be loaded according to the interaction
- 70. Pros: Specify which scripts will be loaded according to the interaction Better script dependencies management
- 71. Who use it? The Guardian (best perf case) - Requirejs g1.globo.com - Nautilusjs
- 73. A good approach is to inline only the critical css, and downloading the remaining css async
- 74. Concatenate and minify, always.
- 78. Optimize Images
- 80. Inline Images
- 81. Remove a request by inlining a base64 image
- 82. Be Careful: Data URIs are slow on mobile devices!
- 84. Load fonts asynchronous Use a fallback while fonts load "Unlimited" Cache Use fewer fonts, Avoid repaints
- 86. npm i fontfaceonload FontFaceOnload("My Custom Font Family", { success: function() { document.documentElement.className.add(“my-custom-font-family”); } });
- 87. Optimize HTTP
- 89. GZip all the text
- 90. For god sake: Make less requests!
- 91. Optimize TCP
- 92. Increase initial TCP cwnd size
- 94. For god sake: Make less requests!
- 98. webpagetest.org
- 99. webpagetest.org