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.
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
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
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
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.
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.
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.
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.