Web performance in one slide...

Thanks. Questions?

The why

Smartphones dominate retail traffic, doubling in one year.

goo.gl/MBIkyJ

web.burza projects

25% of customers leave within 4 seconds, > 50% after 8 seconds if waiting

goo.gl/qEcjDu

One second faster = 27% increase in conversions

goo.gl/qEcjDu

Website response time

goo.gl/PuYB9

Bandwidth
+
Latency
≈
Performance

Components of an HTTP request

Latency

Wire latency

Wireless Radio latency

More Bandwidth Doesn’t Matter (Much)

goo.gl/C3LQN9

The critical rendering path

Let's try a simple example...

HTML bytes are arriving on the wire...

The HTML5 parser at work...

DOM construction is complete... waiting on CSS!

First CSS bytes arrive... still waiting on CSS!

Finally, we can construct the CSSOM!

DOM + CSSOM = Render Tree(s)

DOM + CSSOM = Render Tree(s)

Layout & paint

Err, wait. Did we forget something?

JavaScript... our friend and foe.

The how

1. Eliminate JavaScript from the critical rendering path

Synchronous

Asynchronous

2. Inline just the required resources for above the fold

What’s in your critical CSS?

Before

After

3. Load images (everything) on demand

4. Dynamically load the appropriate image source based on image size in layout and/or screen density (DPI)

5. Server setup

• Gzip
• Keep alive - reuse tcp connection
• Expire headers - cache
• CDN (Content delivery network)

Let's recap

1. Eliminate JavaScript from the critical rendering path
2. Inline just the required resources for above the fold
3. Load images (everything) on demand
4. Dynamically load the appropriate image source based on image size in layout and/or screen density (DPI)
5. Server setup

The results

Homepage
(38% Improvement)

Product page
(71% Improvement)

Article
(34% Improvement)

Baby homepage
(77% Improvement)

Thanks. Questions?