Optimizing the critical rendering path meta refresh 2015
-
Upload
brameshmadhav-s -
Category
Technology
-
view
349 -
download
1
Transcript of Optimizing the critical rendering path meta refresh 2015
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