Optimizing Web Performance Through Understanding the Critical Rendering Path

Goal of the discussion
Sharing knowledge of
web performance
Determination of our
Goal

What is web performance really mean?
Performance is the art of avoiding work. Really??
Yep, only if no one complains against that performance.
ACTION Expected Time (ms)
Load Under 1000ms
Response Under 100ms
Animation Under 16ms
Idle Maximize. Script chunked should not be
larger than 50ms
Expected Performance

LOAD
1. Critical content should be loaded under 1000ms
2. Showing an update (e.g showing a loader) if it takes more than 1000ms
3. It includes network latency time
What is critical content?
Let's go through how browser process response from webserver
1. Document Object Model (DOM)
2. CSS Object Model (CSSOM)

Bytes
Browser receives
bytes from server
Characters
Convert bytes to
character based on
specified encoding
Tokens
Tokenize characters to
tokens <html>,
</html>, <head>,
</head>
Nodes
Tokens are converted
to node e.g head,
body, div
DOM
Constructs THE DOM
DOM

Bytes
Browser receives
bytes from server
Characters
Convert bytes to
character based on
specified encoding
Tokens
Tokenize characters to
tokens <html>,
</html>, <head>,
</head>
Nodes
Tokens are converted
to node e.g head,
body, div
CSSOM
Constructs THE
CSSOM
CSSOM

DOM vs CSSOM
1. DOM and CSSOM are independent data structures.
2. Chrome DevTools Timeline allows us to capture and inspect the construction and processing costs
of DOM and CSSOM.
3. DOM and CSSOM construct RENDER TREE together

Render Tree
1. The DOM and CSSOM trees are combined to form the render tree.
2. Render tree contains only the nodes required to render the page. For example, node with css
display:none does not include inside render tree

Layout and Paint
1. Layout computes the exact position and size of each object.
2. Finally comes to Paint step that takes in the final render tree and renders the pixels to the screen.
1. Process HTML markup and build the DOM tree.
2. Process CSS markup and build the CSSOM tree.
3. Combine the DOM and CSSOM into a render tree.
4. Run layout on the render tree to compute geometry (width, height, position
etc) of each node.
5. Paint the individual nodes to the screen.
Feel the browser pain again :(
This full process is called critical rendering path

Rendering blocks
1. HTML file
2. CSS file unless explicitly used media type. e.g. media=”print” does not block in case of browser view
3. Javascript file unless explicitly declared as async. Because Javascript can modify DOM and
CSSOM
4. In a words, browser stop rendering until final DOM and CSSOM is completed
Noted that images are not rending block resource
Browser events
domContentLoaded - Fire when render tree is ready
domComplete - Fire when all resources including images are loading completed

Finally “Load” comes to end
Let's define the vocabulary we’ll be using to describe the critical rendering path:
Critical Resource: resource that may block initial rendering of the page. Example, html, js, css file
Critical Path Length: number of network roundtrips, or the total time required to fetch all of the critical
resources.
Critical Bytes: total amount of bytes required to get to first render of the page
All should be completed under 1000ms

Optimization of “Load” Step
1. Good server-end
2. Prefer async JavaScript resources
3. Avoid synchronous server calls e.g sync ajax request
4. Avoid long running JavaScript
5. Put CSS in the document head
6. Avoid CSS imports

Response
1. Should be under 100ms with input latency
2. Should be under 16ms without input latency

Animation
Each frame should be ready under 16ms
Why?
1. Because most of the device refresh rate is 60 frames/Sec i.e 60 FPS
2. Human eye does not differentiate frame change in this rate
3. 60 frames/Sec, so each frame = 1000ms/60 = ~16.5ms
4. Browser have to ready each frame by 16ms
5. Normally we get 10ms for each frame because browser has some
housekeeping to make ready the frame before sending to display device

JavaScript Style Layout Paint Composite
The pixel Pipeline
1. Browser have to follow each step for each frame depending on the changes
2. Sometimes browsers need to calculate same steps several times
3. Performance depends on how less brower work to complete the pixel pipeline
4. Force synchronous layout is one of the culprit that cause longer frame. Forced synchronous
layout occurs when the browser runs layout inside a script, and then does something that
forces it to recalculate styles, thus requiring it to run layout again.
5. We should know which properties trigger which step. Ref: http://csstriggers.com/

Force Synchronous Layout
for(i=0;i<divs.length;i++) {
divs[i].width = p.width;
}
1. For DOM manipulation, read property first, then write.
2. Use requestAnimationFrame instead of setInterval or setTimeout when possible
3. Find alternative for animation instead of modifying DOM inside script
Solution
Following code forces to do layout again and again in every loop.

var pWidth = p.width;
for(i=0;i<divs.length;i++) {
divs[i].width = pWidth;
}
Following code is better than previous one because it saves forcing layout when width of P reads.

Why do frame missed?
Browser gives our work higher priority. We must hand over control to main thread as soon
as possible.
setTimeout/setInterval or long running script prohibits for completing frame on time
Poor optimization CSS (not browser friendly) takes time to complete style step in pixel
timeline. Good approach to follow BEM model. https://en.bem.info/

Idle
1. We have to maximize browser idle time but we often need idle time for preloading data or
processing other task.
2. We should handover control to main thread by 50ms
Tradeoff
There is always a tradeoff
Rich UI vs Paint Time
Composite layer vs Memory & CPU
Browser friendly CSS vs Load time
and so on...

Our Goal or TO DO
1. Keeping minimum frame rate 15/sec
2. Keeping average frame rate 55/sec
3. Using web worker to reduce pressure from main thread
4. Using of requestAnimationFrame instead of setInterval and setTimeout when possible
5. Optimized stylesheet or making brower friendly
6. Migrate some element to new composite layer

Optimizing Web Performance Through Understanding the Critical Rendering Path

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (10)

Similar to Optimizing Web Performance Through Understanding the Critical Rendering Path

Similar to Optimizing Web Performance Through Understanding the Critical Rendering Path (20)

Recently uploaded

Recently uploaded (20)

Optimizing Web Performance Through Understanding the Critical Rendering Path