Web Performance Optimization

aka how to speed up your web site and keep the user happy

Massimo Iacolare @iacowareinfo@massimoiacolare.it

climber :-)tech lead - web developer

linkedin.com/in/massimoiacolareTuesday, September 24, 13

WPO - What is it?• Coined by Steve Souders in

2004

• Analyze end-to-end performance instead of fixate only on server-side performance

Tuesday, September 24, 13

WPO - What is it?• Coined by Steve Souders in

2004

• Analyze end-to-end performance instead of fixate only on server-side performance

• I said only. It doesn't mean you can write crappy, slow code on the server. Look at the whole picture

Tuesday, September 24, 13

Does it matter?Working on performance would be cool BUT... our clients want more features

Tuesday, September 24, 13

Does it matter?Working on performance would be cool BUT... our clients want more features

BTW, “...software projects often fail because they can’t meet quality requirements...” - F. Cirillo

Tuesday, September 24, 13

Does it matter?Working on performance would be cool BUT... our clients want more features

Guess what...

BTW, “...software projects often fail because they can’t meet quality requirements...” - F. Cirillo

Tuesday, September 24, 13

Does it matter?Working on performance would be cool BUT... our clients want more features

Guess what... Performance is one of them!

BTW, “...software projects often fail because they can’t meet quality requirements...” - F. Cirillo

Tuesday, September 24, 13

Speed plays a key role in   the much larger field of UX which drives online

user behaviors

Tuesday, September 24, 13

Better UX

Happier users :-)

Higher conversion rates

Which depending on context could mean:

more length of staymore e-commerce transactionsmore tasks completed

Tuesday, September 24, 13

You want proof, right?

Google 400ms delay 0.59% searches drop

Bing 2s delay 4.3% revenue drop

Yahoo 400ms delay 5-9% traffic drop

Shopzilla from 6-9s to 1.2s +7-12% revenue

Mozilla 2.2s less on landing +15.4% downloads

Netflix just by adopting gzip+13.25% faster plus -50% outbound bandwidth traffic

Source1   Source2

Tuesday, September 24, 13

Speed has gained a lot of popularity outside the development world

It’s increasingly being used as a KPI to predict startup success

Speed is a factor of PageRank algorithm

Tuesday, September 24, 13

I hope you got the idea :-)

Tuesday, September 24, 13

How fast is fast?!?

< 100ms feels instantaneous

< 300ms noticeable but still fast

< 1000ms computer is working

+1s mental context switch start

+10s I’ve got better things to do...

Tuesday, September 24, 13

How fast is the web?

DesktopMean ~6.9sMedian ~2.7s

Mobile *Mean ~10.2sMedian ~4.8s

* based on latest Android devices which means newer hardware, faster connection, etc

Reality is that on mobile we are 2-3 times slower than on desktop

How Fast Are Websites Around The World?

Tuesday, September 24, 13

The web today

# of requests ~95

# of hostnames ~17

Total size ~1.5MB

Cacheable reqs ~44%

Some stats taken from httparchive.org

Tuesday, September 24, 13

Size by Content-TypeHTML56KB

Other143KB

Flash88KBCSS

43KB

Scripts259KB

Images965KB

Tuesday, September 24, 13

Anatomy of a web page

A set of resources to fetch from the server

A browser does its job (magic happens)

Display the result to the user

+

+

Tuesday, September 24, 13

Anatomy of a web page - 21. DNS resolution2. TCP connection3. Send request4. Wait for response5. Download response6. Parse (DOM, CSSOM)7. Request sub-resource8. Execute JS/Apply CSS9. Compose Layout10. Render

Tuesday, September 24, 13

Anatomy of a web page - 21. DNS resolution2. TCP connection3. Send request4. Wait for response5. Download response6. Parse (DOM, CSSOM)7. Request sub-resource8. Execute JS/Apply CSS9. Compose Layout10. Render

}Tuesday, September 24, 13

Anatomy of a web page - 21. DNS resolution2. TCP connection3. Send request4. Wait for response5. Download response6. Parse (DOM, CSSOM)7. Request sub-resource8. Execute JS/Apply CSS9. Compose Layout10. Render

}repeat for ~95

resources!

Tuesday, September 24, 13

Anatomy of a web page - 31. DNS resolution2. TCP connection3. Send request4. Wait for response5. Download response6. Parse (DOM, CSSOM)7. Execute JS/Apply CSS8. Compose Layout9. Render

Network

Server

Client

Tuesday, September 24, 13

Server

Network+

Client

~15%

~85%

Tuesday, September 24, 13

NetworkDNS TCP connect SSL Server Content download

DNS resolution Resolve hostnames to IP addresses

TCP connect Establish a connection with a server

SSL negotiation (optional)Verify server identity and exchange a simmetric key used  for data encryption

Content download Time spent to get the response through the "pipes"

Tuesday, September 24, 13

DNS Resolution

• User DNS

• Which you don't control. Use NAMEBENCH tool to determine the best DNS server for your connection at home/office

• Authoritative DNS server

• Where you store a DNS record relative to your domain

Tuesday, September 24, 13

TCP Connect

Establish a connection with a server involves a 3-way handshake

It's expensive. Be sure keep-alive is enabled on your web server

Tuesday, September 24, 13

Content Download

Enable the damn GZIP everywhere. That’s it!

httparchive.org says that as of today just 73% of responses are compressed

Tuesday, September 24, 13

C’mon, who cares?!Networks become faster every year...

Tuesday, September 24, 13

C’mon, who cares?!Networks become faster every year...

True, but browsing is latency bound!

Tuesday, September 24, 13

PLT correlation

BandwidthAs we increase bandwidth the page load time decrease in a log scale

Going from 5Mbps to 10Mbps in bandwidth decrease PLT just by 5%

LatencyLatency on the other hand as an inverse linear relationship with page load time

Latency the new web performance bottleneck

Tuesday, September 24, 13

Latency definition

Time required for a packet to reach destination and bounce back aka RTT time / PING time

Depends on transport medium and its refraction index. Best is fiber optics

Tuesday, September 24, 13

Latency - 2Distance RTT Vacuum RTT Fiber Ideal

Milan-London ~1000 km 7 ms 10 ms

Milan-New York ~6.500 km 44 ms 67 ms

Milan-Sidney ~15.000 km 100 ms 152 ms

Latency the new web performance bottleneck

Tuesday, September 24, 13

Latency - 2Distance RTT Vacuum RTT Fiber Ideal

Milan-London ~1000 km 7 ms 10 ms

Milan-New York ~6.500 km 44 ms 67 ms

Milan-Sidney ~15.000 km 100 ms 152 ms

We can’t beat the speed of light!

Latency the new web performance bottleneck

Tuesday, September 24, 13

Latency - 2Distance RTT Vacuum RTT Fiber Ideal

Milan-London ~1000 km 7 ms 10 ms

Milan-New York ~6.500 km 44 ms 67 ms

Milan-Sidney ~15.000 km 100 ms 152 ms

Caution! These are theoretical data, real latency is greatly affected by last-mile segments and a ton of other factors!

We can’t beat the speed of light!

Latency the new web performance bottleneck

Tuesday, September 24, 13

Latency - one more gotcha

Increase bandwidth is relatively easy. Upgrade HW infrastructure or lay down new cables

Reduce latency is hard. We're close to the physical limit. Fiber optics is only 1.5 slower than vacuum. Only way is to have shorter routes

Tuesday, September 24, 13

Side note: Hibernia express project

Problem: Trading between New York and London must happen in real-time (kinda). Latency impacts greatly here. Ideas?

Latency the new web performance bottleneck

Tuesday, September 24, 13

Side note: Hibernia express project

Problem: Trading between New York and London must happen in real-time (kinda). Latency impacts greatly here. Ideas?

Solution: Lay down a shorter cable (~ 300km) to shave 5ms

Latency the new web performance bottleneck

Tuesday, September 24, 13

Side note: Hibernia express project

Problem: Trading between New York and London must happen in real-time (kinda). Latency impacts greatly here. Ideas?

Solution: Lay down a shorter cable (~ 300km) to shave 5ms

$400M to gain 5ms. Reduce latency does cost a lot!

Latency the new web performance bottleneck

Tuesday, September 24, 13

Latency & TCP slow start

TCP enable communication on heterogenous transport medium which could have different capacity

TCP is designed to figure out how much capacity can sustain a connection

Tuesday, September 24, 13

TCP slow start ramp-up7&3�&RQJHVWLRQ�&RQWURO��$YRLGDQFH���

Ɣ 7&3�LV�GHVLJQHG�WR�SUREH�WKH��QHWZRUN�WR�ILJXUH�RXW�WKH�DYDLODEOH�FDSDFLW\Ɣ 7&3�6ORZ�6WDUW���IHDWXUH��QRW�D�EXJ

([SRQHQWLDO�JURZWK

3DFNHW�/RVV

#LJULJRULN

7&3�&RQJHVWLRQ�&RQWURO��$YRLGDQFH���

Ɣ 7&3�LV�GHVLJQHG�WR�SUREH�WKH��QHWZRUN�WR�ILJXUH�RXW�WKH�DYDLODEOH�FDSDFLW\Ɣ 7&3�6ORZ�6WDUW���IHDWXUH��QRW�D�EXJ

([SRQHQWLDO�JURZWK

3DFNHW�/RVV

#LJULJRULNWe need multiple round-trips to reach full capacity

We pay the latency tax on each of themslow start video

Tuesday, September 24, 13

TCP slow start & ICW

Default Initial Congestion Window is 3 segments, about ~4KB of data

Change ICW to 10 segments would get the avg resource of 14KB in just one round trip

Tuesday, September 24, 13

Boost ICW

Linux kernel >= 2.6.39 default value has been set to 10

On Windows 2008 R2 must install KB2472264. Detailed instructions on Increasing TCP ICW on W2008 R2

Why upgrading your linux kernel will make your customers much happier

Tuesday, September 24, 13

Network checklist, yay!Affects Notes

GZIP Bandwidth Easy

Minify CSS & JS Bandwidth Use a server-side framework

Combine CSS & JS Latency Use a server-side framework

Cache static resources

BothImpacts only second time visits. Use a far away expire date & rev. your resources to force browsers to update them

Use a CDN Latency Edge proxies are closer to the user but deploy may become more complicated

Avoid redirects Latency23% 1 redirect 7% 3 redirects13% 2 redirects ... 2% 7 redirects

Optimize images Bandwidth 60% of total size on average

Tuesday, September 24, 13

A quick look at the futureSPDY is an application-layer protocol designed with latency in mind by Google

Tuesday, September 24, 13

A quick look at the future

• Multiple streams on a single connection

• Request prioritization

• Header compression

• Server push

• Enforce SSL

SPDY is an application-layer protocol designed with latency in mind by Google

Tuesday, September 24, 13

SPDY & HTTP 2.0

• SPDY is already used by: Google apps, Twitter, Facebook, Wordpress

• Browser support: Chrome, Firefox, Opera (desktop & mobile), IE11

• HTTP 2.0 (we are at draft 06) use SPDY as a start point

Tuesday, September 24, 13

We got our bytes on the client, then what?

What happens next?

Tuesday, September 24, 13

Life of a web pageResource Loader

HTML Parser

CSSOM DOM Scripts

Render Tree

Tuesday, September 24, 13

Script traps<!DOCTYPE HTML><html> <head>

<title>Nice page</title> </head> <body>

<p>The answer is 42</p><script src="/my-script.js">

... ...

Sorry, my world has been suspended...

Scripts may contain a doc.write() call which modifies what comes next!

Parser starts... parsing!

How a web page loads

Tuesday, September 24, 13

Async scriptsdefer and async attributes are a way to promise the browser your script doesn't contain doc.write()

<script defer="defer"> Very old spec. IE >= 10 Preserve order

<script async="async"> HTML5 spec. IE >= 10 Doesn't preserve order

dynamic script insertion Works everywhere, looks scarier (libraries like LABjs can help)Must use a library to preserve order

scripts at the bottom Works everywhere. Easy to achieve. Not always doable

Deep dive into murky waters of script loading

Tuesday, September 24, 13

Evil dependencies

DOM

deciphering the critical rendering path

Tuesday, September 24, 13

Evil dependencies

DOM JS

DOM construction can be blocked by JS

download & execution

deciphering the critical rendering path

Tuesday, September 24, 13

Evil dependencies

CSSDOM JS

DOM construction can be blocked by JS

download & execution

JS execution can be blocked by CSS

download & parsing

deciphering the critical rendering path

Tuesday, September 24, 13

Evil dependencies - 2Render Tree is also blocked by CSSBrowsers prefer to paint when they

have all informations available

Rule of thumb

Scripts at the bottom

CSS at the top

Tuesday, September 24, 13

Evil dependencies - 2Render Tree is also blocked by CSSBrowsers prefer to paint when they

have all informations available

Rule of thumb

Scripts at the bottom

CSS at the top

Now you know why :-)

Tuesday, September 24, 13

Not al JS is created equal

1. HEAD: avoid if possible (almost always it’s avoidable ;-)

2. BOTTOM OF BODY: scripts which are vital for page rendering or primary interactions

3. ON WINDOW.LOAD: secondary interactions can usually be attached later(eg: autocomplete).

Tuesday, September 24, 13

Javascript is slow

Tuesday, September 24, 13

Javascript is slow

Tuesday, September 24, 13

Javascript is slow

DOM access is slow

Tuesday, September 24, 13

Javascript is fast

DOM access is slow

Tuesday, September 24, 13

Reflows & RepaintsChanging a property of a

Render Tree node could trigger

Reflow

resize window, font changes, height,

scrollTop, etc.

color, visibility, outline

RepaintImply

Rendering, repaint, reflow   Reflows repaintsManipulating the DOM responsibly

Tuesday, September 24, 13

Reflow & Repaints - 2

Reflow and repaints are expensive. So much that browsers try to batch them

This trigger a reflow. Normally a browser would try to queue it

But you’re querying for a computed property causing an immediate

flush of changes’ queue

Tuesday, September 24, 13

CSS Transitions & Animations

• Offload to GPU

• Multithreaded :-)

• Subpixel rendering

Tuesday, September 24, 13

Client checklist, yay!

Stylesheet at the top Give them to the browser as soon as possible

Scripts at the bottom At the bottom there’s nothing else to parse...

Async script loading

CSS Transition & Animations

Leverage the GPU

Pay attention to reflow & repaints

Tuesday, September 24, 13

Tools

Chrome Dev Tools

webpagetest.org

New Relic

Google Analitycs

Tuesday, September 24, 13

Tools - 2Development - Synthetic Monitoring - R.U.M.

Browsers Dev ToolsWebpagetest

NewRelicGoogle Analytics

• Good enough to plot an optimization strategy

• Instantly verify results as you tweak a page

• How fast is your web site/app to real users around the world

• Let in all issues we have in connectivity & browsers

• Easier to segment by geographic location

Tuesday, September 24, 13

PLT != PerceptionPage load time is just an indicator

Pay attention to what a user really see

Webpagetest SpeedIndex measure the progress of page rendering over time

prog

ress

time

Which one should we aim for?Tuesday, September 24, 13

Performance is a journey not a destination!

Tuesday, September 24, 13

Books2013? 2010 2009 2007

Tuesday, September 24, 13

References• Ilya Grigorik - perf geek, one of the best

• Crash course on web performance

• Steve Souders - father of WPO• www.webperformancetoday.com• web-performance-101-developers• perf-metrics-velocity2012• performance-optimisation-with-timeline-

profiles• calendar.perfplanet.com-2012

Tuesday, September 24, 13

Thanks!

Slides at

@iacoware

info@massimoiacolare.it

linkedin.com/in/massimoiacolare

slideshare.net/massimoiacolare/

Tuesday, September 24, 13

Let’s play TDD

When:

Why:

Who:

Sabato, 28 SettembreWhere: Pisa (sede Genesy)

Praticare TDD in pair senza lo stress di ottenere risultati ;-)

Tu, il tuo portatile ed il tuo linguaggio preferito

cr2013coderstug.eventbrite.com

Tuesday, September 24, 13