Your SlideShare is downloading. ×
Web performance optimization
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web performance optimization


Published on

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

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

Published in: Technology

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Web Performance Optimization aka how to speed up your web site and keep the user happy Massimo Iacolare #jsfull @iacoware www.dotnettoscana.orgTuesday, April 23, 13
  • 2. Thanks to our sponsorTuesday, 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 doesnt mean you can write crappy, slow code on the server. Look at the whole pictureTuesday, April 23, 13
  • 4. Does it matter? Working on performance would be cool BUT... our clients want more features BTW, “ 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 behaviorsTuesday, 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 completedTuesday, 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   Source2Tuesday, 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 algorithmTuesday, 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 # of requests ~88 # of hostnames ~15 Total size ~1.2MB Cacheable reqs ~41%Tuesday, April 23, 13
  • 12. Size by Content-TypeTuesday, 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 userTuesday, 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. RenderTuesday, 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. RenderTuesday, April 23, 13
  • 17. Server ~15% Network + ~85% ClientTuesday, 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 dont 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 domainTuesday, 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 300msTuesday, April 23, 13
  • 21. TCP Connect Establish a connection with a server involves a 3-way handshake Its expensive. Be sure keep-alive is enabled on your web serverTuesday, April 23, 13
  • 22. Content Download Enable the damn GZIP everywhere. That’s it! says that as of today just 73% of responses are compressedTuesday, 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 bottleneckTuesday, 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 opticsTuesday, 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 bottleneckTuesday, 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. Were close to the physical limit. Fiber optics is only 1.5 slower than vacuum. Only way is to have shorter routesTuesday, 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 bottleneckTuesday, 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 connectionTuesday, 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 videoTuesday, 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 tripTuesday, 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 happierTuesday, 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 averageTuesday, 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 SSLTuesday, 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 pointTuesday, 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 TreeTuesday, 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 loadsTuesday, April 23, 13
  • 39. Async scripts defer and async attributes are a way to promise the browser your script doesnt contain doc.write() <script defer="defer"> Very old spec. IE >= 10 Preserve order <script async="async"> HTML5 spec. IE >= 10 Doesnt preserve order dynamic script insertion Works everywhere, looks scarier (libraries like LABjs can help) Must use a library to preserve orderTuesday, 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 pathTuesday, 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 :-) bottomTuesday, 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 responsiblyTuesday, 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’ queueTuesday, April 23, 13
  • 44. CSS Transitions & Animations • Offload to GPU • Multithreaded :-) • Subpixel renderingTuesday, 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 & repaintsTuesday, April 23, 13
  • 46. Tools Chrome Dev Tools New Relic Google AnalitycsTuesday, 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 locationTuesday, 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 2007Tuesday, 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 •, April 23, 13
  • 52. Thanks! #jsfull Slides on:, April 23, 13