Hide Notes 

Slide 1: Please Don’t Touch the Slow Parts francesco.fullone@ideato.it http://www.ideato.it/ federico.galassi@gmail.com http://federico.galassi.net/ Saturday, May 8, 2010
Slide 2: Saturday, May 8, 2010
Slide 3: er st fa Saturday, May 8, 2010
Slide 4: er WEB st fa Saturday, May 8, 2010
Slide 5: Faster == Better? Saturday, May 8, 2010
Slide 6: We have to wait Saturday, May 8, 2010
Slide 7: ... All the time Saturday, May 8, 2010
Slide 8: “Savings in time feels like simplicity” Saturday, May 8, 2010
Slide 9: “Time is the only commodity that matters” Saturday, May 8, 2010
Slide 10: Faster web, more clicks http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/ Saturday, May 8, 2010
Slide 11: Faster web, better SEO http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html Saturday, May 8, 2010
Slide 12: Faster web is hot Saturday, May 8, 2010
Slide 13: Say web, Say browser Saturday, May 8, 2010
Slide 14: How browsers work Saturday, May 8, 2010
Slide 15: User clicks on a link Saturday, May 8, 2010
Slide 16: Browser resolves domain name UDP www.google.com DNS 72.14.234.104 domain Saturday, May 8, 2010
Slide 17: Browser connects to web server WEB TCP/IP 72.14.234.104 domain Saturday, May 8, 2010 connect
Slide 18: Browser sends a request for a page WEB HTTP GET /language_tools?hl=en Host: www.google.com domain Saturday, May 8, 2010 connect send
Slide 19: Browser receives a response with the page WEB HTTP 200 OK domain Saturday, May 8, 2010 connect send receive
Slide 20: Browser renders the new page domain Saturday, May 8, 2010 connect send receive render
Slide 21: Rendering is complex parse + paint render Saturday, May 8, 2010
Slide 22: Rendering really complex parse + paint + resources render css css img img javascript javascript flash Saturday, May 8, 2010
Slide 23: Each resource is another web request render Saturday, May 8, 2010
Slide 24: Requests are processed in parallel render Saturday, May 8, 2010
Slide 25: Once upon a time... Static pages Few resources Less javascript Saturday, May 8, 2010
Slide 26: Most time on server domain connect send receive render Saturday, May 8, 2010
Slide 27: Solution is faster serverside domain connect send receive render Saturday, May 8, 2010
Slide 28: Ajax revolution Saturday, May 8, 2010
Slide 29: Most time on browser domain connect send receive render Saturday, May 8, 2010
Slide 30: Golden rule of faster web 80% of the end user response time is spent on the front-end Saturday, May 8, 2010
Slide 31: Golden rule of faster web Start there. Saturday, May 8, 2010
Slide 32: Why web slow parts? Saturday, May 8, 2010
Slide 33: Easy to understand Saturday, May 8, 2010
Slide 34: Each part has its rules Saturday, May 8, 2010
Slide 35: Which parts are slow? Saturday, May 8, 2010
Slide 36: Network is slow Saturday, May 8, 2010
Slide 37: Less stuff Fewer requests Pages have too many resources Concatenate js/css Css sprites Less dns requests Saturday, May 8, 2010
Slide 38: Less stuff Cache requests Browser download resources repeatedly Expires header Revving Files External js/css Remove etags Saturday, May 8, 2010
Slide 39: Smaller stuff Compress responses Resources are too big Content-Encoding Gzip Deflate Saturday, May 8, 2010
Slide 40: Smaller stuff Minify responses Resources are too big js, css, html remove formatting remove comments use tools Saturday, May 8, 2010
Slide 41: Closer stuff Use a CDN Resources are too far reduce latency Saturday, May 8, 2010
Slide 42: Browser is slow Saturday, May 8, 2010
Slide 43: Scripts block loading html javascript css img javascript img flash Saturday, May 8, 2010 document.write location.href scripts order
Slide 44: Put scripts at bottom html css img img flash javascript javascript Saturday, May 8, 2010
Slide 45: Unloaded styles block page rendering html img img flash css Saturday, May 8, 2010
Slide 46: Put styles at top html css img img flash Saturday, May 8, 2010
Slide 47: Scripts and styles side effects dom reflows css expression reflows Saturday, May 8, 2010
Slide 48: All that glitters is not gold Saturday, May 8, 2010
Slide 49: Everything is a tradeoff Saturday, May 8, 2010
Slide 50: performance brings complexity Saturday, May 8, 2010
Slide 51: know the rules but... Saturday, May 8, 2010
Slide 52: leave complexity to computers Saturday, May 8, 2010
Slide 53: use libraries during development Saturday, May 8, 2010
Slide 54: Use tools at build time Saturday, May 8, 2010
Slide 55: http://abetterbrowser.org/ Saturday, May 8, 2010
Slide 56: Questions? Saturday, May 8, 2010