How to speed up your web site/app and make users happier

1. Web Performance
Optimization
aka how to speed up your web site and
keep the user happy
Massimo Iacolare #jsfull
@iacoware
info@massimoiacolare.it www.dotnettoscana.org
Tuesday, April 23, 13

2. Thanks to our sponsor
Tuesday, April 23, 13

3. 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, April 23, 13

4. 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
Guess what... Performance is one of them!
Tuesday, April 23, 13

5. Speed plays a key role in
the much larger field of
UX which drives online
user behaviors
Tuesday, April 23, 13

6. Better UX
Happier users :-)
Higher conversion rates
Which depending on context could mean:
more length of stay
more e-commerce transactions
more tasks completed
Tuesday, April 23, 13

7. 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
+13.25% faster plus -50%
Netflix just by adopting gzip
outbound bandwidth traffic
Source1 Source2
Tuesday, April 23, 13

8. 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, April 23, 13

9. I hope you got the
idea :-)
Tuesday, April 23, 13

10. 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, April 23, 13

11. The web today
Some stats taken from httparchive.org
# of requests ~88
# of hostnames ~15
Total size ~1.2MB
Cacheable reqs ~41%
Tuesday, April 23, 13

12. Size by Content-Type
Tuesday, April 23, 13

13. How fast is the web?
Desktop
Mean ~6.9s
Median ~2.7s
Mobile * * based on latest Android devices which
means newer hardware, faster connection,
Mean ~10.2s etc
Median ~4.8s Reality is that on mobile we are 2-3 times
slower than on desktop
How Fast Are Websites Around The World?
Tuesday, April 23, 13

14. 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, April 23, 13

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

16. Anatomy of a web page - 3
1. DNS resolution
2. TCP connection
Network
3. Send request
4. Wait for response
5. Download response Server
6. Parse (DOM, CSSOM)
7. Execute JS/Apply CSS
8. Compose Layout Client
9. Render
Tuesday, April 23, 13

17. Server ~15%
Network
+ ~85%
Client
Tuesday, April 23, 13

18. Network
DNS TCP connect SSL Server Content download
Resolve hostnames to IP
DNS resolution addresses
Establish a connection with a
TCP connect server
Verify server identity and
SSL negotiation (optional) exchange a simmetric key used
for data encryption
Time spent to get the response
Content download through the "pipes"
Tuesday, April 23, 13

19. 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, April 23, 13

20. DNS Resolution - 2
• Google found that avg time spent on
DNS is 130ms (surprisingly they aren’t
well maintained)
• ~ 5% of request fail due to packet loss/
timeout, bringing the average close to
300ms
Tuesday, April 23, 13

21. 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, April 23, 13

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

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

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

25. 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, April 23, 13

26. 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
We can’t beat the speed of light!
Caution! These are theoretical data, real latency
is greatly affected by last-mile segments and a ton
of other factors!
Latency the new web performance bottleneck
Tuesday, April 23, 13

27. 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, April 23, 13

28. Side note: Hiberia 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, April 23, 13

29. 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 has a connection
Tuesday, April 23, 13

30. 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
Tuesday, April 23, 13

31. 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, April 23, 13

32. Boost ICW
Linux kernel >= 3.0 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, April 23, 13

33. 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
Impacts only second time visits. Use a far away
Cache static
Both expire date & rev. your resources to force
resources browsers to update them
Close to the user but deploy become more
Use a CDN Latency
complicated
Avoid redirects Latency
Optimize images Bandwidth 60% of total size on average
Tuesday, April 23, 13

34. A quick look at the future
SPDY is an application-layer protocol designed
with latency in mind by Google. Features:
• Multiple streams on a single connection
• Request prioritization
• Header compression
• Server push
• Enforce SSL
Tuesday, April 23, 13

35. 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 (first draft already published) use
SPDY as a start point
Tuesday, April 23, 13

36. We got our bytes on
the client, then what?
What happens next?
Tuesday, April 23, 13

37. Life of a web page
Resource Loader
HTML Parser
CSSOM DOM Scripts
Render Tree
Tuesday, April 23, 13

38. Script traps
<!DOCTYPE HTML> Parser starts... parsing!
<html>
<head>
<title>Nice page</title>
</head>
<body>
<p>The answer is 42</p> Sorry, my world has
<script src="/my-script.js"> been suspended...
...
...
Scripts may contain a
doc.write() call which
modifies what comes
next!
How a web page loads
Tuesday, April 23, 13

39. 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
Tuesday, April 23, 13

40. Evil dependencies
DOM JS CSSOM
DOM construction can JS execution can be
be blocked by JS blocked by CSSOM
download & execution construction
deciphering the critical rendering path
Tuesday, April 23, 13

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

42. Reflows & Repaints
Changing a property of a
Render Tree node could trigger
Reflow Imply Repaint
resize window, font color, visibility,
changes, height, outline
scrollTop, etc.
Rendering, repaint, reflow Reflows repaints
Manipulating the DOM responsibly
Tuesday, April 23, 13

43. Reflow & Repaints - 2
Reflow and repaints are expensive. So much
that browsers try to batch them
This trigger a reflow. But you’re querying for a computed
Normally a browser property causing an immediate
would try to queue it flush of the changes’ queue
Tuesday, April 23, 13

44. CSS Transitions & Animations
• Offload to GPU
• Multithreaded :-)
• Subpixel rendering
Tuesday, April 23, 13

45. 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 Use a server-side framework
CSS Transition &
Leverage the GPU
Animations
Pay attention to
reflow & repaints
Tuesday, April 23, 13

46. Tools
Chrome Dev Tools
New Relic
webpagetest.org
Google Analitycs
Tuesday, April 23, 13

47. Tools - 2
Development - Synthetic Monitoring - R.U.M.
Browsers Dev Tools NewRelic
Webpagetest Google Analytics
• Good enough to plot an • How fast is your web site/app to
optimization strategy real users around the world
• Instantly verify results as you • Let in all issues we have in
tweak a page connectivity & browsers
• Easier to segment by geographic
location
Tuesday, April 23, 13

48. 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?
Tuesday, April 23, 13

49. Performance is a
journey not a
destination!
Tuesday, April 23, 13

50. Books
2013? 2010 2009 2007
Tuesday, April 23, 13

51. References
• Ilya Grigorik - perf geek, one of the best
• Crash course on web performance
• Steve Souders - father of WPO
• web-performance-101-developers
• perf-metrics-velocity2012
• performance-optimisation-with-timeline-
profiles
• calendar.perfplanet.com-2012
Tuesday, April 23, 13

52. Thanks!
#jsfull
Slides on:
www.dotnettoscana.org/javascript-full-immersion.aspx
Tuesday, April 23, 13