Upload
brameshmadhav-s
View
352
Download
1
Embed Size (px)
Citation preview
Optimizing the Critical Rendering PathBrameshmadhav Srinivasan
Oh! My Chrome
Impact of Poor Performance
How Late is Too Late
Delay User reaction0 - 100 ms Instant100 - 300 ms Slight visible delay300 - 1000 ms Visible delay
1 s+ That other real important thing comes to mind
5 s+ Forget it…
To keep the user engaged, page must load within 1 second.
Speed is a feature.
HTML
CSS
DOM
CSSOM
JavaScript Render Tree Layout Paint
Network
Critical rendering path2
1 Latency and 3G / 4G architecture and constraints
Networking constraints...4G will make all things fast... Will it ?01
Outbound Data Flow
LTE HSPA+ HSPA EDGE GPRSNetwork Latency 40-50 ms 50-200
ms150-400
ms600-750
ms600-750
ms
The Life of a web request
● (Worst case) DNS lookup to resolve the hostname to IP address● (Worst case) New TCP connection requiring a full roundtrip to the server● (Worst case) TLS handshake with up to two extra server roundtrips!
● HTTP request requiring a full roundtrip to the server● Server processing time
The Life of Our 1000ms budget
3G (200 ms RTT)
4G(100 ms RTT)
Control plane (200-2500 ms) (50-100 ms)
DNS lookup 200 ms 100 msTCP Connection 200 ms 100 msTLS handshake (200-400 ms) (100-200 ms)
HTTP request 200 ms 100 msLeftover budget 0-400 ms 300-700 ms
Fetching 40kb over a new TCP Connection
● 5 Mbps connection● 200 ms round trip time ● 100 ms server processing
time● IW10 means ~14KB in first
RTT
plus DNS and TLS round trips ...
3 roundtrips
What's the critical rendering path?To answer that, we need to peek inside the browser...02
Let’s try a simple example
<!doctype html><meta charset=utf-8><title>Performance!</title>
<link href=styles.css rel=stylesheet />
<p>Hello <span>world!</span></p>
● Simple (valid) HTML file● External CSS stylesheet
What could be simpler, right?
p { font-weight: bold; } span { display: none; }
index.html styles.css
HTML bytes are arriving on the wire...
<!doctype html><meta charset=utf-8><title>Performance!</title>
<link href=styles.css rel=stylesheet />
<p>Hello <span>world!</span></p>
● first response packet with index.html bytes
● we have not discovered the CSS yet...
p { font-weight: bold; } span { display: none; }
index.html
styles.css CSS
DOM
CSSOM
Render Tree
Network
HTML
We're splitting packets for convenience...
DOM construction is complete... waiting on CSS!
<!doctype html><meta charset=utf-8><title>Performance!</title>
<link href=styles.css rel=stylesheet />
<p>Hello <span>world!</span></p>
p { font-weight: bold; } span { display: none; }
index.html
styles.css CSS
DOM
CSSOM
Render Tree
Network
HTML DOM
● screen is blank, blocked on CSS , otherwise, flash of unstyled content
● <link> discovered, network request sent
● DOM construction complete!
First CSS bytes arrive... still waiting on CSS!
<!doctype html><meta charset=utf-8><title>Performance!</title>
<link href=styles.css rel=stylesheet />
<p>Hello <span>world!</span></p>
p { font-weight: bold; } span { display: none; }
index.html
styles.css
● Unlike HTML parsing, CSS is not incremental
● First CSS bytes arrive
● But, we must wait for the entire file...
DOM
CSSOM
Render Tree
Network
HTML DOM
CSS
Finally, we can construct the CSSOM!
<!doctype html><meta charset=utf-8><title>Performance!</title>
<link href=styles.css rel=stylesheet />
<p>Hello <span>world!</span></p>
p { font-weight: bold; } span { display: none; }
index.html
styles.css
● CSS download’s done - yay!
● We can now construct the CSSOM
DOM
CSSOM
Render Tree
Network
HTML DOM
CSS CSSOM
still blank
HTML
CSS
DOM
CSSOM
Render Tree Layout PaintNetwork
Critical rendering path
Hello
● Once render tree is ready, perform layout o aka, compute size of all the
nodes, etc
● Once layout is complete...o Render pixels on the CPUo Transfer bitmaps to GPUo Display page! (yay)
~100 ms
JavaScript... our friend and foe.
DOM
Network
<!doctype html><meta charset=utf-8><title>Performance!</title>
<script src=application.js></script><link href=styles.css rel=stylesheet />
<p>Hello <span>world!</span></p>
p { font-weight: bold; } span { display: none; }
index.html
styles.css
HTML DOM
In some ways, JS is similar to CSS, except ...
CSS CSSOM
JavaScript
elem.style.width = "500px"
JavaScript can query (and modify) DOM, CSSOM!
CSSOM
JavaScript performance pitfalls...
● JavaScript can query CSSOM
● JavaScript can block on CSS
● JavaScript can modify CSSOM
● JavaScript can query DOM
● JavaScript can block DOM construction
● JavaScript can modify DOM
<script> var old_width = elem.style.width; elem.style.width = "300px";
document.write("I'm awesome")
</script>
application.js
Measure First ; Then Optimize
Analyze Web Performance – a Chromium Extension
Fast as Lightning (Less than 2 secs)
Fast as Horse (2 – 5 secs)
Slow as a Turtle (5 – 8) secs
Slow as snail(more than 8 secs)
03Recipe for Instant Mobile SiteLet’s pull it all together now…
1. One RTT render for above the fold!2. No redirects + fast server response
(<200 ms)3. Must optimize critical rendering path
a. Inline critical CSSb. Remove blocking JavaScript
We don't need to render the entire page...
We need to render above the fold content!
<html>
<head> <link rel="stylesheet" href="all.css"> <script src="application.js"></script></head>
<body> <div class="main"> Here is my content. </div> <div class="leftnav"> Perhaps there is a left nav bar here. </div> ...</body></html>
1. Split all.css, inline ATF styles
2. Do you need the JS at all?o Progressive
enhancemento Inline ATF JS codeo Defer the rest
<html><head>
<style> .main { ... } .leftnav { ... } /* ... any other styles needed for the initial render here ... */ </style>
<script> // Any script needed for initial render here. // Ideally, there should be no JS needed for the initial render </script>
</head><body> <div class="main”> Here is my content.</div> <div class="leftnav”> Perhaps there is a left nav bar here.</div> <script> function run_after_onload() {
load('stylesheet', 'remainder.css') load('javascript', 'remainder.js') } </script>
</body></html>
Above the fold CSS
Above the fold JS(ideally, none)
Paint the above the fold, then load the rest.
Identify critical CSS via an Audit (Manual)
DevTools > Audits > Web Page Performance
Inline the critical styles...
prioritize_critical_css
original
First render @ 4.1s
First render @ 1.3s
Key Take-aways
1. ~50% of the budget is in network latency overhead
100-200 ms RTT's, must account for TCP slow start (~14KB).
2. Best case scenario: one RTT render *
Focus on delivering the above the fold content in first RTT!
3. Inline the above the fold CSS and JavaScript
Not everything! Just the critical ATF content.
4. Defer non-critical assets
Eliminate JavaScript from the critical rendering path.
5. Watch out for extra round-trips!
And especially new connections: DNS, TCP, TLS, ...
Thank You