Web Performance - Why it matters

Embed Size (px)

Citation preview

  • 1. WEB PERFORMANCEWHY IT MATTERSENRICO FOSCHIskillpages.com/enrico.foschi - @enricofoschi

2. WHY IS IT IMPORTANT? -HOW IS IT AFFECTINGYOUR BUSINESS? -HOW CAN YOU IMPROVE IT? 3. 10 years web developmentexperience 6 years as a Front Enddevelopment team leader USERS FIRST kind of guy 4. 2007 5. 0 to 2 MILLION USERS... IN 10 MONTHS! 6. I AM A BIT OF AWEB PERFORMANCE FREAK 7. HERES A STORYEVERYBODY LOVES A GOOD STORY 8. EVEN IF THEY AREEXTREMELY SLOW!(HES A VINTAGE TYPE OF GUY) 9. JOHN ISA LOYAL USER 10. BUTPADDY IS YOURAVERAGE USER 11. AND NOW? 12. THE TRUTH IS 13. SOME INTERESTINGFACTS... 14. Users tolerance of page load time (in s)study from University of Nebraska87654321 Tolerance0199920062009 15. > 4 SECONDS 16. FOR EVERYEXTRA SECOND 17. EXTRA 400 ms 18. FOR EVERYEXTRA 100 ms 19. EXTRA 500 ms 20. AS AN EXAMPLE,WHAT WOULDHAPPEN ON A SLOWE-COMMERCE SITE? 21. 79 22. 64 23. 46 24. 44 25. 27 26. FASTER WEBSITE MEANS MORE USERS 27. IF THATWASNT ENOUGH! 28. Site speed is now a core part of searchranking algorithmsGoogle Webmasters Blog 29. FASTER WEBSITE MEANSBETTER RANKING AND, BACK TO THE ORIGINAL POINT 30. BETTER RANKING MEANS MORE USERS 31. WHAT NOW? 32. 1. MEASURE2. IMPROVE3. MONITOR 33. MEASURE 34. BUT CONSIDERTHAT 35. USERS ARE HAPPYWHEN THEY CAN INTERACT EVEN IF THE PAGE IS NOT FULLY LOADED 36. IMPROVE 37. BACK END{ DATA /BUSINESS DOWNLOADING CONTENT LOGIC FRONT END 38. > 80% MAINPERFORMANCE ISSUESARE IN THE FRONT END 39. FRONT ENDPERFORMANCEIMPROVEMENTS ARE: 40. CAUTIONTHE NEXT SLIDES ARE SLIGHTLYTECHNICAL 41. LOAD LESS STUFFUSE SPRITES 42. LOAD LESS STUFFCSS / JAVASCRIPTCONCATENATION 43. LOAD SMALLER STUFFCOMPRESS CONTENT FILES 44. LOAD SMALLER STUFFMINIFY JAVASCRIPT,CSS, HTML 45. DONT RELOADTHE SAME STUFFCACHE CONTENTUNTIL IT CHANGES 46. PROPERLY LOADYOUR STUFF USE A CONTENTDELIVERY NETWORK(CDN) 47. LOAD YOUR STUFFFASTERUSE MULTIPLE DOMAINS 48. LOAD GOOD STUFF AVOID 404 ERRORS 49. MONITOR 50. SHOWSLOWwww.showslow.com 51. WEBPAGETEST.org CAN MEASURE TIME TO INTERACT 52. REMEMBER TOMEASURE 53. COMPARE EACHVERSION WITH THEPREVIOUS ONE 54. ANALYSE GAINS AND LOSSES 55. OTHERWISE 56. TO TAKE HOME:1. WEB PERFORMANCE IS KEY2. FASTER WEBSITE MEANS MORE USERS 3. MEASURE YOUR WEBSITE4. IMPROVE YOUR FRONT END PERFORMANCE6. KEEP MONITORING 57. INVEST IN GOODFRONT END DEVELOPERS 58. If it is fast and ugly, they willuse it and curse you; if it isslow, they will not use it.David Cheriton 59. Email: [email protected]: skillpages.com/enrico.foschiTwitter: @enricofoschiSLIDES: bit.ly/wsperf2011 60. http://www.flickr.com/photos/p0psicle/5206181863/http://www.flickr.com/photos/meer/2658968648http://www.flickr.com/photos/twinleaves/298592419http://www.flickr.com/photos/tigerpixel/3185410319/http://www.flickr.com/photos/drewleavy/3394892584/http://www.flickr.com/photos/61417318@N00/3182666361http://www.flickr.com/photos/gettysgirl/4241911286http://www.flickr.com/photos/feldore/5610695978http://www.flickr.com/photos/jamesjustin/3624616802http://www.flickr.com/photos/davepatten/2440867482http://www.flickr.com/photos/ahans/4055645909/http://www.flickr.com/photos/pagedooley/2121472112http://www.flickr.com/photos/spackletoe/90811910/http://www.flickr.com/photos/teotwawki/51513468/http://www.flickr.com/photos/alancleaver/2638883650/http://www.flickr.com/photos/travelingtribe/2661115098/