Slide 1
Slide 1 text
~ Exploring
Critical
Rendering
Path
Why Performance Matters
@raphamundi's
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
We write the
markup. . .
Then a page comes
out on the screen.
Slide 4
Slide 4 text
But how does
the browser
rendering
engine work?
Slide 5
Slide 5 text
1#
Constructing
the Object
Model
Slide 6
Slide 6 text
HTML markup is transformed into a
Document Object Model (DOM)
Slide 7
Slide 7 text
HTML markup is transformed into a
Document Object Model (DOM)
CSS markup is transformed into a CSS
Object Model (CSSOM)
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
The Astronaut
Neil Armstrong
Slide 11
Slide 11 text
3c68746d6c3ea20203c686561643ea202020203c6d65746120636861727365743d201c75746
62d38223ea202020203c6d657461206e616d653d2276696577706f72742220a20636f6e7465
6e743d2277696474683d6465766963652d77696474682c696e697469616c2d7363616c653d3
1223ea202020203c7469746c653e54686520417374726f6e6175743c2f7469746c653ea2020
20203c212d2d205374796c657368656574202d2d3e2020a202020203c6c696e6b2068726566
3d227374796c652e637373222072656c3d227374796c657368656574223ea20203c2f686561
643ea20203c626f64793ea202020203c703e4e65696c2041726d7374726f6e673c2f703ea20
2020203c703e3c696d67207372633d201c6a7573742d612d6e65696c2d706963747572652e6
a7067201d3e3c2f703ea20203c2f626f64793ea3c2f68746d6c3e
……
Conversion
Slide 12
Slide 12 text
Tokenizing
……
StartTag: html StartTag: head
EndTag: head EndTag: html
Slide 13
Slide 13 text
Lexing
StartTag: html StartTag: head
EndTag: head EndTag: html
html head
*NodeType
p body
meta
Slide 14
Slide 14 text
DOM Mount
head
p
body
meta
html
link
“Neil Arm…” img
Slide 15
Slide 15 text
While browser was mounting the DOM.
It encountered a link tag in the head
section referencing an external CSS
Slide 16
Slide 16 text
Then the Browser make a request for
this resource.
Slide 17
Slide 17 text
We repeat the HTML process, but for
CSS instead of HTML:
Bytes ! characters ! tokens ! nodes ! CSSOM
Slide 18
Slide 18 text
2#
Render-tree
Construction
Slide 19
Slide 19 text
The DOM and CSSOM trees are combined
to form the render tree
Slide 20
Slide 20 text
The DOM and CSSOM trees are combined
to form the render tree
Render tree contains only the nodes
required to render the page
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Captures all the visible DOM content
on the page and all the CSSOM style
information for each node
Slide 23
Slide 23 text
head
p
body
meta
html
link
“Neil Arm…” img
DOM
Slide 24
Slide 24 text
p img
body
CSSOM
color: black
background: #FFF
color: black
*font-size: 14px
*user agent styles
*font-weight: normal
padding: 10px
Slide 25
Slide 25 text
img
body
Render Tree
color: black
background: #FFF
color: black
*font-size: 14px
*user agent styles
*font-weight: normal
padding: 10px
p
“Neil Arm…”
Slide 26
Slide 26 text
3#
Layout
&
Paint
Slide 27
Slide 27 text
Layout
Calculate nodes exact position and
size within the viewport of the device
Slide 28
Slide 28 text
Then all of the relative measurements are
converted to absolute pixels on the screen
Slide 29
Slide 29 text
Captures the exact position and size
of each element within the viewport
My application
JavaScript Rocks!
Slide 30
Slide 30 text
Captures the exact position and size
of each element within the viewport
My application
viewport size=device-width
JavaScript
Rocks!
JavaScript Rocks!
Slide 31
Slide 31 text
After know what nodes are visible, and get their
computed styles and geometry, becomes Paint stage.
Slide 32
Slide 32 text
Paint
Converts each node in the render tree
to actual pixels on the screen
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
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.
Slide 35
Slide 35 text
rendering Document Object Model(DOM)
CSS object model(CSSOM)
Render Tree
Layout & Paint
In resume:
Slide 36
Slide 36 text
"I want to
reduce my
render time."
Slide 37
Slide 37 text
Probably
you can’t reduce a
specific element
render time*
[*] depends on case by case
Slide 38
Slide 38 text
However you can
prioritize the
display of content
that relates to the
current user action
Slide 39
Slide 39 text
Critical
Rendering
Path
Slide 40
Slide 40 text
The goal of optimizing the critical
rendering path is to allow the browser to
paint the page as quickly as possible.
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Optimizing which resources are loaded and
in which order we can minimize the blank
screen time.
Slide 43
Slide 43 text
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.
Slide 44
Slide 44 text
Some Random Page
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
The HTML file took ~111ms to download
Slide 47
Slide 47 text
Once the HTML content becomes available, the
browser has to parse the bytes, convert them
into tokens, and build the DOM tree
Slide 48
Slide 48 text
After the DOMContentLoaded trigger, the
browser starts to build the DOM tree
Slide 49
Slide 49 text
1# Note:
JavaScript wait til CSS files are downloaded
and parsed
Slide 50
Slide 50 text
1# Note:
JavaScript wait til CSS files are downloaded
and parsed
Even with inline scripts?
Slide 51
Slide 51 text
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
Slide 52
Slide 52 text
2# Note:
Images doesn’t block the initial render of the
page (including domContentLoaded event).
Slide 53
Slide 53 text
When we talk about the critical rendering path
we are typically talking about the HTML
markup, CSS and JavaScript
Slide 54
Slide 54 text
More critical content is related with above
the fold, page-loaded and server-side
rendered.
Slide 55
Slide 55 text
Less critical content is related with below
the fold, lazy-loaded and client-side
rendered.
Slide 56
Slide 56 text
How I
improve it?
Slide 57
Slide 57 text
Make critical assets as small as possible by
minifying and compressing both the html and
css (obfuscation process)
Slide 58
Slide 58 text
Asynchronous strategies to unblock the parser
Slide 59
Slide 59 text
Async keyword
Slide 60
Slide 60 text
Specifies that the script will be executed
asynchronously as soon as it is available
(only for external scripts)
Slide 61
Slide 61 text
Some Random Page
Slide 62
Slide 62 text
Some Random Page
Slide 63
Slide 63 text
Some Random Page
DOMContentLoaded: 1.73s
Slide 64
Slide 64 text
Some Random Page
Slide 65
Slide 65 text
Some Random Page
Slide 66
Slide 66 text
Some Random Page
DOMContentLoaded: 191ms
Slide 67
Slide 67 text
Script
Loaders
or Defer all of JavaScript
Slide 68
Slide 68 text
Script Loaders
E.g: Requirejs, Yepnope.js, LABjs and Nautilus.js
Slide 69
Slide 69 text
Pros:
Specify which scripts will be loaded
according to the interaction
Slide 70
Slide 70 text
Pros:
Specify which scripts will be loaded
according to the interaction
Better script dependencies management
Slide 71
Slide 71 text
Who use it?
The Guardian (best perf case) - Requirejs
g1.globo.com - Nautilusjs
Slide 72
Slide 72 text
Inline
Critical CSS
Slide 73
Slide 73 text
A good approach is to inline only the
critical css, and downloading the
remaining css async
Slide 74
Slide 74 text
Concatenate and minify, always.
Slide 75
Slide 75 text
github.com/filamentgroup/loadCSS
Slide 76
Slide 76 text
Remove
Unused CSS
Slide 77
Slide 77 text
github.com/giakki/uncss
Slide 78
Slide 78 text
Optimize
Images
Slide 79
Slide 79 text
github.com/imagemin/imagemin
Slide 80
Slide 80 text
Inline
Images
Slide 81
Slide 81 text
Remove a request by inlining
a base64 image
Slide 82
Slide 82 text
Be Careful: Data URIs are
slow on mobile devices!
Slide 83
Slide 83 text
Load fonts
asynchronously
Slide 84
Slide 84 text
Load fonts
asynchronous
Use a fallback while fonts load
"Unlimited" Cache
Use fewer fonts, Avoid repaints
Slide 85
Slide 85 text
npm i fontfaceonload
Slide 86
Slide 86 text
npm i fontfaceonload
FontFaceOnload("My Custom Font Family", {
success: function() {
document.documentElement.className.add(“my-custom-font-family”);
}
});
Slide 87
Slide 87 text
Optimize
HTTP
Slide 88
Slide 88 text
Turn on keep-alive
Slide 89
Slide 89 text
GZip all the text
Slide 90
Slide 90 text
For god sake:
Make less requests!
Slide 91
Slide 91 text
Optimize
TCP
Slide 92
Slide 92 text
Increase initial TCP
cwnd size
Slide 93
Slide 93 text
Disable slow-start
restart (SSR)
Slide 94
Slide 94 text
For god sake:
Make less requests!
Slide 95
Slide 95 text
Measure
your
metrics
Slide 96
Slide 96 text
developers.google.com/speed/pagespeed/insights
Slide 97
Slide 97 text
developers.google.com/speed/pagespeed/insights
Slide 98
Slide 98 text
webpagetest.org
Slide 99
Slide 99 text
webpagetest.org
Slide 100
Slide 100 text
Thank
You
@raphamundi
Slide 101
Slide 101 text
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