optimizing the critical rendering path meta refresh 2015

30
Optimizing the Critical Rendering Path Brameshmadhav Srinivasan

Upload: brameshmadhav-s

Post on 13-Apr-2017

349 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Optimizing the critical rendering path   meta refresh 2015

Optimizing the Critical Rendering PathBrameshmadhav Srinivasan

Page 2: Optimizing the critical rendering path   meta refresh 2015

Oh! My Chrome

Page 3: Optimizing the critical rendering path   meta refresh 2015

Impact of Poor Performance

Page 4: Optimizing the critical rendering path   meta refresh 2015

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.

Page 5: Optimizing the critical rendering path   meta refresh 2015

Speed is a feature.

Page 6: Optimizing the critical rendering path   meta refresh 2015

HTML

CSS

DOM

CSSOM

JavaScript Render Tree Layout Paint

Network

Critical rendering path2

1 Latency and 3G / 4G architecture and constraints

Page 7: Optimizing the critical rendering path   meta refresh 2015

Networking constraints...4G will make all things fast... Will it ?01

Page 8: Optimizing the critical rendering path   meta refresh 2015

Outbound Data Flow

LTE HSPA+ HSPA EDGE GPRSNetwork Latency 40-50 ms 50-200

ms150-400

ms600-750

ms600-750

ms

Page 9: Optimizing the critical rendering path   meta refresh 2015

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

Page 10: Optimizing the critical rendering path   meta refresh 2015

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

Page 11: Optimizing the critical rendering path   meta refresh 2015

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

Page 12: Optimizing the critical rendering path   meta refresh 2015

What's the critical rendering path?To answer that, we need to peek inside the browser...02

Page 13: Optimizing the critical rendering path   meta refresh 2015

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

Page 14: Optimizing the critical rendering path   meta refresh 2015

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

Page 15: Optimizing the critical rendering path   meta refresh 2015

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!

Page 16: Optimizing the critical rendering path   meta refresh 2015

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

Page 17: Optimizing the critical rendering path   meta refresh 2015

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

Page 18: Optimizing the critical rendering path   meta refresh 2015

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

Page 19: Optimizing the critical rendering path   meta refresh 2015

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

Page 20: Optimizing the critical rendering path   meta refresh 2015

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

Page 21: Optimizing the critical rendering path   meta refresh 2015

Measure First ; Then Optimize

Page 22: Optimizing the critical rendering path   meta refresh 2015

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)

Page 23: Optimizing the critical rendering path   meta refresh 2015

03Recipe for Instant Mobile SiteLet’s pull it all together now…

Page 24: Optimizing the critical rendering path   meta refresh 2015

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!

Page 25: Optimizing the critical rendering path   meta refresh 2015

<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

Page 26: Optimizing the critical rendering path   meta refresh 2015

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

Page 27: Optimizing the critical rendering path   meta refresh 2015

Identify critical CSS via an Audit (Manual)

DevTools > Audits > Web Page Performance

Inline the critical styles...

Page 28: Optimizing the critical rendering path   meta refresh 2015

prioritize_critical_css

original

First render @ 4.1s

First render @ 1.3s

Page 29: Optimizing the critical rendering path   meta refresh 2015

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

Page 30: Optimizing the critical rendering path   meta refresh 2015

Thank You