Web Performance
Optimization
aka how to speed up
your web site and
keep the user happy
Massimo Iacolare @iacoware
info@mas...
WPO - What is it?
• Coined by Steve Souders in
2004
• Analyze end-to-end
performance instead of fixate
only on server-side
...
WPO - What is it?
• Coined by Steve Souders in
2004
• Analyze end-to-end
performance instead of fixate
only on server-side
...
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 ofte...
Does it matter?
Working on performance would be
cool BUT... our clients want more
features
Guess what...
BTW, “...software...
Does it matter?
Working on performance would be
cool BUT... our clients want more
features
Guess what... Performance is on...
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 stay
more e-comm...
You want proof, right?
Google 400ms delay 0.59% searches drop
Bing 2s delay 4.3% revenue drop
Yahoo 400ms delay 5-9% traffic...
Speed has gained a lot of popularity
outside the development world
It’s increasingly being used as a KPI to
predict startu...
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 ...
How fast is the web?
Desktop
Mean ~6.9s
Median ~2.7s
Mobile *
Mean ~10.2s
Median ~4.8s
* based on latest Android devices w...
The web today
# of requests ~95
# of hostnames ~17
Total size ~1.5MB
Cacheable reqs ~44%
Some stats taken from httparchive...
Size by Content-Type
HTML
56KB
Other
143KB
Flash
88KB
CSS
43KB
Scripts
259KB
Images
965KB
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 resul...
Anatomy of a web page - 2
1. DNS resolution
2. TCP connection
3. Send request
4. Wait for response
5. Download response
6....
Anatomy of a web page - 2
1. DNS resolution
2. TCP connection
3. Send request
4. Wait for response
5. Download response
6....
Anatomy of a web page - 2
1. DNS resolution
2. TCP connection
3. Send request
4. Wait for response
5. Download response
6....
Anatomy of a web page - 3
1. DNS resolution
2. TCP connection
3. Send request
4. Wait for response
5. Download response
6....
Server
Network
+
Client
~15%
~85%
Tuesday, September 24, 13
Network
DNS TCP connect SSL Server Content download
DNS resolution
Resolve hostnames to IP
addresses
TCP connect
Establish...
DNS Resolution
• User DNS
• Which you don't control. Use NAMEBENCH
tool to determine the best DNS server for
your connecti...
TCP Connect
Establish a connection
with a server involves a
3-way handshake
It's expensive. Be sure
keep-alive is enabled ...
Content Download
Enable the damn GZIP
everywhere. That’s it!
httparchive.org says that as of today just 73% of
responses a...
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
Bandwidth
As we increase bandwidth the page
load time decrease in a log scale
Going from 5Mbps to 10Mbps i...
Latency definition
Time required for a packet to reach
destination and bounce back
aka RTT time / PING time
Depends on tran...
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
Mila...
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
Mila...
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
Mila...
Latency - one more gotcha
Increase bandwidth is relatively easy.
Upgrade HW infrastructure or lay down new
cables
Reduce l...
Side note: Hibernia express project
Problem: Trading between New York and London
must happen in real-time (kinda). Latency...
Side note: Hibernia express project
Problem: Trading between New York and London
must happen in real-time (kinda). Latency...
Side note: Hibernia express project
Problem: Trading between New York and London
must happen in real-time (kinda). Latency...
Latency & TCP slow start
TCP enable communication on heterogenous
transport medium which could have different
capacity
TCP ...
TCP slow start ramp-up
We need multiple round-trips to reach full capacity
We pay the latency tax on each of them
slow sta...
TCP slow start & ICW
Default Initial Congestion Window is 3
segments, about ~4KB of data
Change ICW to 10 segments would g...
Boost ICW
Linux kernel >= 2.6.39 default value
has been set to 10
On Windows 2008 R2 must install
KB2472264. Detailed inst...
Network checklist, yay!
Affects Notes
GZIP Bandwidth Easy
Minify CSS & JS Bandwidth Use a server-side framework
Combine CSS...
A quick look at the future
SPDY is an application-layer protocol designed
with latency in mind by Google
Tuesday, Septembe...
A quick look at the future
• Multiple streams on a single connection
• Request prioritization
• Header compression
• Serve...
SPDY & HTTP 2.0
• SPDY is already used by: Google apps,
Twitter, Facebook, Wordpress
• Browser support: Chrome, Firefox, O...
We got our bytes on
the client, then what?
What happens next?
Tuesday, September 24, 13
Life of a web page
Resource 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="/m...
Async scripts
defer and async attributes are a way to promise the
browser your script doesn't contain doc.write()
<script ...
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 pat...
Evil dependencies
CSSDOM JS
DOM construction can
be blocked by JS
download & execution
JS execution can be
blocked by CSS
...
Evil dependencies - 2
Render Tree is also blocked by CSS
Browsers prefer to paint when they
have all informations availabl...
Evil dependencies - 2
Render Tree is also blocked by CSS
Browsers prefer to paint when they
have all informations availabl...
Not al JS is created equal
1. HEAD: avoid if possible (almost always it’s
avoidable ;-)
2. BOTTOM OF BODY: scripts which a...
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 & Repaints
Changing a property of a
Render Tree node could trigger
Reflow
resize window, font
changes, height,
scrol...
Reflow & Repaints - 2
Reflow and repaints are expensive. So much
that browsers try to batch them
This trigger a reflow.
Norma...
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 bot...
Tools
Chrome Dev Tools
webpagetest.org
New Relic
Google Analitycs
Tuesday, September 24, 13
Tools - 2
Development - Synthetic Monitoring - R.U.M.
Browsers Dev Tools
Webpagetest
NewRelic
Google Analytics
• Good enou...
PLT != Perception
Page load time is just an indicator
Pay attention to what a user really see
Webpagetest SpeedIndex measu...
Performance is a
journey not a
destination!
Tuesday, September 24, 13
Books
2013? 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
...
Thanks!
Slides at
@iacoware
info@massimoiacolare.it
linkedin.com/in/massimoiacolare
slideshare.net/massimoiacolare/
Tuesda...
Let’s play TDD
When:
Why:
Who:
Sabato, 28 Settembre
Where: Pisa (sede Genesy)
Praticare TDD in pair senza lo
stress di ott...
Nächste SlideShare
Wird geladen in …5
×

Web Performance Optimization @Develer

1.400 Aufrufe
1.196 Aufrufe

Veröffentlicht am

Web performance optimization - How to speed up your web site and make your users happier

Veröffentlicht in: Technologie
0 Kommentare
8 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.400
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
78
Aktionen
Geteilt
0
Downloads
34
Kommentare
0
Gefällt mir
8
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Web Performance Optimization @Develer

  1. 1. 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
  2. 2. 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
  3. 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, September 24, 13
  4. 4. Does it matter? Working on performance would be cool BUT... our clients want more features Tuesday, September 24, 13
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. Speed plays a key role in    the much larger field of UX which drives online user behaviors Tuesday, September 24, 13
  9. 9. 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, September 24, 13
  10. 10. 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
  11. 11. 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
  12. 12. I hope you got the idea :-) Tuesday, September 24, 13
  13. 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
  14. 14. 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? Tuesday, September 24, 13
  15. 15. 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
  16. 16. Size by Content-Type HTML 56KB Other 143KB Flash 88KB CSS 43KB Scripts 259KB Images 965KB Tuesday, September 24, 13
  17. 17. 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
  18. 18. 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 Tuesday, September 24, 13
  19. 19. 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 } Tuesday, September 24, 13
  20. 20. 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 }repeat for ~95 resources! Tuesday, September 24, 13
  21. 21. Anatomy of a web page - 3 1. DNS resolution 2. TCP connection 3. Send request 4. Wait for response 5. Download response 6. Parse (DOM, CSSOM) 7. Execute JS/Apply CSS 8. Compose Layout 9. Render Network Server Client Tuesday, September 24, 13
  22. 22. Server Network + Client ~15% ~85% Tuesday, September 24, 13
  23. 23. 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" Tuesday, September 24, 13
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. C’mon, who cares?! Networks become faster every year... Tuesday, September 24, 13
  28. 28. C’mon, who cares?! Networks become faster every year... True, but browsing is latency bound! Tuesday, September 24, 13
  29. 29. 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 Tuesday, September 24, 13
  30. 30. 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
  31. 31. 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 the new web performance bottleneck Tuesday, September 24, 13
  32. 32. 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! Latency the new web performance bottleneck Tuesday, September 24, 13
  33. 33. 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 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 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, September 24, 13
  40. 40. 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
  41. 41. 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
  42. 42. 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 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 Tuesday, September 24, 13
  43. 43. A quick look at the future SPDY is an application-layer protocol designed with latency in mind by Google Tuesday, September 24, 13
  44. 44. 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
  45. 45. 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
  46. 46. We got our bytes on the client, then what? What happens next? Tuesday, September 24, 13
  47. 47. Life of a web page Resource Loader HTML Parser CSSOM DOM Scripts Render Tree Tuesday, September 24, 13
  48. 48. 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
  49. 49. 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 Tuesday, September 24, 13
  50. 50. Evil dependencies DOM deciphering the critical rendering path Tuesday, September 24, 13
  51. 51. Evil dependencies DOM JS DOM construction can be blocked by JS download & execution deciphering the critical rendering path Tuesday, September 24, 13
  52. 52. 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
  53. 53. 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 Tuesday, September 24, 13
  54. 54. 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 :-) Tuesday, September 24, 13
  55. 55. 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
  56. 56. Javascript is slow Tuesday, September 24, 13
  57. 57. Javascript is slow Tuesday, September 24, 13
  58. 58. Javascript is slow DOM access is slow Tuesday, September 24, 13
  59. 59. Javascript is fast DOM access is slow Tuesday, September 24, 13
  60. 60. 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 Tuesday, September 24, 13
  61. 61. 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
  62. 62. CSS Transitions & Animations • Offload to GPU • Multithreaded :-) • Subpixel rendering Tuesday, September 24, 13
  63. 63. 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
  64. 64. Tools Chrome Dev Tools webpagetest.org New Relic Google Analitycs Tuesday, September 24, 13
  65. 65. 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 Tuesday, September 24, 13
  66. 66. 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, September 24, 13
  67. 67. Performance is a journey not a destination! Tuesday, September 24, 13
  68. 68. Books 2013? 2010 2009 2007 Tuesday, September 24, 13
  69. 69. 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
  70. 70. Thanks! Slides at @iacoware info@massimoiacolare.it linkedin.com/in/massimoiacolare slideshare.net/massimoiacolare/ Tuesday, September 24, 13
  71. 71. 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 Tuesday, September 24, 13

×