Download as PDF, PPTX
![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)
Uploaded byRaphael Amorim
Exploring Critical Rendering Path
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.
More Related Content
Similar to Exploring Critical Rendering Path
Exploring Critical Rendering Path
- 1. ~ Exploring Critical Rendering Path Why PerformanceMatters @raphamundi's
- 2. Raphael Amorim This guyseems 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 thebrowser rendering engine work?
- 5.
- 6. HTML markup istransformed into a Document Object Model (DOM)
- 7. HTML markup istransformed into a Document Object Model (DOM) CSS markup is transformed into a CSS Object Model (CSSOM)
- 8. HTML markup istransformed 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 istransformed 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>TheAstronaut</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?
- 11.
- 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
- 14.
- 15. While browser wasmounting the DOM. It encountered a link tag in the head section referencing an external CSS
- 16. Then the Browsermake a request for this resource.
- 17. We repeat theHTML process, but for CSS instead of HTML: Bytes ! characters ! tokens ! nodes ! CSSOM
- 18.
- 19. The DOM andCSSOM trees are combined to form the render tree
- 20. The DOM andCSSOM trees are combined to form the render tree Render tree contains only the nodes required to render the page
- 21. The DOM andCSSOM 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 thevisible DOM content on the page and all the CSSOM style information for each node
- 23.
- 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…”
- 26.
- 27. Layout Calculate nodesexact position and size within the viewport of the device
- 28. Then all ofthe relative measurements are converted to absolute pixels on the screen
- 29. Captures the exactposition 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 exactposition 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 whatnodes are visible, and get their computed styles and geometry, becomes Paint stage.
- 32. Paint Converts eachnode in the render tree to actual pixels on the screen
- 34. Time required toperform 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 ObjectModel(DOM) CSS object model(CSSOM) Render Tree Layout & Paint In resume:
- 36. "I want to reducemy render time."
- 37. Probably you can’treduce a specific element render time* [*] depends on case by case
- 38. However you can prioritizethe display of content that relates to the current user action
- 39.
- 40. The goal ofoptimizing the critical rendering path is to allow the browser to paint the page as quickly as possible.
- 42. Optimizing which resourcesare loaded and in which order we can minimize the blank screen time.
- 43. Let’s dive ina 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>SomeRandom 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 filetook ~111ms to download
- 47. Once the HTMLcontent becomes available, the browser has to parse the bytes, convert them into tokens, and build the DOM tree
- 48. After the DOMContentLoadedtrigger, the browser starts to build the DOM tree
- 49. 1# Note: JavaScriptwait til CSS files are downloaded and parsed
- 50. 1# Note: JavaScriptwait til CSS files are downloaded and parsed Even with inline scripts?
- 51. 1# Note: JavaScriptwait 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: Imagesdoesn’t block the initial render of the page (including domContentLoaded event).
- 53. When we talkabout the critical rendering path we are typically talking about the HTML markup, CSS and JavaScript
- 54. More critical contentis related with above the fold, page-loaded and server-side rendered.
- 55. Less critical contentis related with below the fold, lazy-loaded and client-side rendered.
- 56.
- 57. Make critical assetsas small as possible by minifying and compressing both the html and css (obfuscation process)
- 58. Asynchronous strategies tounblock the parser
- 59.
- 60. Specifies that thescript 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>SomeRandom 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>SomeRandom 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>SomeRandom 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>SomeRandom 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>SomeRandom 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>SomeRandom 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 allof JavaScript
- 68. Script Loaders E.g: Requirejs,Yepnope.js, LABjs and Nautilus.js
- 69. Pros: Specify which scriptswill be loaded according to the interaction
- 70. Pros: Specify which scriptswill be loaded according to the interaction Better script dependencies management
- 71. Who use it? TheGuardian (best perf case) - Requirejs g1.globo.com - Nautilusjs
- 72.
- 73. A good approachis to inline only the critical css, and downloading the remaining css async
- 74. Concatenate and minify,always.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81. Remove a requestby inlining a base64 image
- 82. Be Careful: DataURIs are slow on mobile devices!
- 83.
- 84. Load fonts asynchronous Use afallback while fonts load "Unlimited" Cache Use fewer fonts, Avoid repaints
- 85.
- 86. npm i fontfaceonload FontFaceOnload("MyCustom Font Family", { success: function() { document.documentElement.className.add(“my-custom-font-family”); } });
- 87.
- 88.
- 89. GZip all thetext
- 90. For god sake: Makeless requests!
- 91.
- 92.
- 93.
- 94. For god sake: Makeless requests!
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.