Web Performance Optimization @Develer

Web Performance
Optimization
aka how to speed up
your web site and
keep the user happy
Massimo Iacolare @iacoware
info@massimoiacolare.it
climber :-)
tech lead - web developer
linkedin.com/in/massimoiacolare
Tuesday, September 24, 13

WPO - What is it?
• Coined by Steve Souders in
2004
• Analyze end-to-end
performance instead of ﬁxate
only on server-side
performance

WPO - What is it?
• Coined by Steve Souders in
2004
• Analyze end-to-end
performance instead of ﬁxate
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

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

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

Does it matter?
features
Guess what...

Does it matter?
features
Guess what... Performance is one of them!

Speed plays a key role in
the much larger ﬁeld of
UX which drives online
user behaviors

Better UX
Happier users :-)
Higher conversion rates
Which depending on context could mean:
more length of stay
more e-commerce transactions
more tasks completed

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

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

I hope you got the
idea :-)

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

How fast is the web?
Desktop
Mean ~6.9s
Median ~2.7s
Mobile *
Mean ~10.2s
Median ~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?

The web today
# of requests ~95
# of hostnames ~17
Total size ~1.5MB
Cacheable reqs ~44%
Some stats taken from httparchive.org

Size by Content-Type
HTML
56KB
Other
143KB
Flash
88KB
CSS
43KB
Scripts
259KB
Images
965KB

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

Anatomy of a web page - 2
1. DNS resolution
2. TCP connection
3. Send request
4. Wait for response
5. Download response
6. Parse (DOM, CSSOM)
7. Request sub-resource
8. Execute JS/Apply CSS
9. Compose Layout
10. Render

1. DNS resolution
2. TCP connection
3. Send request
9. Compose Layout
10. Render
}

1. DNS resolution
2. TCP connection
3. Send request
9. Compose Layout
10. Render
}repeat for
~95
resources!

1. DNS resolution
2. TCP connection
3. Send request
8. Compose Layout
9. Render
Network
Server
Client

Server
Network
+
Client
~15%
~85%

Network
DNS 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"

DNS Resolution
• User DNS
• Which you don't control. Use NAMEBENCH
tool to determine the best DNS server for
your connection at home/oﬃce
• Authoritative DNS server
• Where you store a DNS record relative to
your domain

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

Content Download
Enable the damn GZIP
everywhere. That’s it!
httparchive.org says that as of today just 73% of
responses are compressed

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

C’mon, who cares?!
Networks become
faster every year...
True, but browsing
is latency bound!

PLT correlation
Bandwidth
As we increase bandwidth the page
load time decrease in a log scale
Going from 5Mbps to 10Mbps in
bandwidth decrease PLT just by 5%
Latency
Latency on the other hand as an
inverse linear relationship with
page load time
Latency the new web performance bottleneck

Latency deﬁnition
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 ﬁber optics

Latency - 2
Distance 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 - 2
We can’t beat the speed of light!

Latency - 2
Caution! These are theoretical data, real latency
is greatly aﬀected by last-mile segments and a ton
of other factors!
We can’t beat the speed of light!

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

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

Solution: Lay down a shorter cable (~ 300km) to
shave 5ms
$400M to gain 5ms. Reduce latency does cost a lot!

Latency & TCP slow start
TCP enable communication on heterogenous
transport medium which could have diﬀerent
capacity
TCP is designed to ﬁgure out how much
capacity can sustain a connection

TCP slow start ramp-up
We need multiple round-trips to reach full capacity
We pay the latency tax on each of them
slow start video

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

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

Network checklist, yay!
Aﬀects 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
Both
Impacts 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 Latency
23% 1 redirect 7% 3 redirects
13% 2 redirects ... 2% 7 redirects
Optimize images Bandwidth 60% of total size on average

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

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

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

We got our bytes on
the client, then what?
What happens next?

Life of a web page
Resource Loader
HTML Parser
CSSOM DOM Scripts
Render Tree

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
modiﬁes what comes
next!
Parser starts... parsing!
How a web page loads

Async scripts
defer 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

Evil dependencies
DOM
deciphering the critical rendering path

Evil dependencies
DOM JS
DOM construction can
be blocked by JS
download & execution

Evil dependencies
CSSDOM JS
DOM construction can
be blocked by JS
download & execution
JS execution can be
blocked by CSS
download & parsing

Evil dependencies - 2
Render Tree is also blocked by CSS
Browsers prefer to paint when they
have all informations available
Rule of
thumb
Scripts at the
bottom
CSS at the top

Evil dependencies - 2
Render Tree is also blocked by CSS
Browsers prefer to paint when they
have all informations available
Rule of
thumb
Scripts at the
bottom
CSS at the top
Now you know why :-)

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

Javascript is slow

Javascript is slow
DOM access is slow

Javascript is fast
DOM access is slow

Reflows & Repaints
Changing 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 repaints
Manipulating the DOM responsibly

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

CSS Transitions & Animations
• Oﬄoad to GPU
• Multithreaded :-)
• Subpixel rendering

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
reﬂow & repaints

Tools
Chrome Dev Tools
webpagetest.org
New Relic
Google Analitycs

Tools - 2
Development - Synthetic Monitoring - R.U.M.
Browsers Dev Tools
Webpagetest
NewRelic
Google 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

PLT != Perception
Page load time is just an indicator
Pay attention to what a user really see
Webpagetest SpeedIndex measure the
progress of page rendering over time
progress
time
Which one should we aim for?

Performance is a
journey not a
destination!

Books
2013? 2010 2009 2007

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-
proﬁles
• calendar.perfplanet.com-2012

Thanks!
Slides at
@iacoware
info@massimoiacolare.it
linkedin.com/in/massimoiacolare
slideshare.net/massimoiacolare/

Let’s play TDD
When:
Why:
Who:
Sabato, 28 Settembre
Where: 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

Web Performance Optimization @Develer

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (9)

Similaire à Web Performance Optimization @Develer

Similaire à Web Performance Optimization @Develer (20)

Plus de Massimo Iacolare

Plus de Massimo Iacolare (6)

Dernier

Dernier (20)

Web Performance Optimization @Develer