1. WEB PERFORMANCE
WHY IT MATTERS
ENRICO FOSCHI
skillpages.com/enrico.foschi - @enricofoschi

2. WHY IS IT IMPORTANT?
-
HOW IS IT AFFECTING
YOUR BUSINESS?
-
HOW CAN YOU
IMPROVE IT?

4. 10 years web development
experience
6 years as a Front End
development team
leader
USERS FIRST kind of guy

5. 2007

7. 0 to 2 MILLION USERS
...
IN 10 MONTHS!

8. I AM A BIT OF A
WEB PERFORMANCE FREAK

9. HERE’S A STORY
EVERYBODY LOVES A GOOD STORY

12. EVEN IF THEY ARE
EXTREMELY SLOW!
(HE’S A VINTAGE TYPE OF GUY)

17. JOHN IS
A LOYAL USER

18. BUT
PADDY IS YOUR
AVERAGE USER

19. AND NOW?

20. THE TRUTH IS

22. SOME INTERESTING
FACTS...

23. Users tolerance of page load time (in s)
study from University of Nebraska
8
7
6
5
4
3
2
1
Tolerance
0
1999 2006 2009

24. > 4 SECONDS

25. FOR EVERY
EXTRA SECOND

26. EXTRA 400 ms

27. FOR EVERY
EXTRA 100 ms

28. EXTRA 500 ms

29. AS AN EXAMPLE,
WHAT WOULD
HAPPEN ON A SLOW
E-COMMERCE SITE?

30. 79

31. 64

32. 46

33. 44

34. 27

35. FASTER WEBSITE
MEANS
MORE USERS

36. IF THAT
WASN’T ENOUGH!

38. Site speed is now a core part of search
ranking algorithms
Google Webmasters Blog

39. FASTER WEBSITE
MEANS
BETTER RANKING
AND, BACK TO THE ORIGINAL POINT…

40. BETTER RANKING
MEANS
MORE USERS

41. WHAT NOW?

44. 1. MEASURE
2. IMPROVE
3. MONITOR

45. MEASURE

49. BUT CONSIDER
THAT…

51. USERS ARE HAPPY
WHEN THEY CAN
INTERACT
EVEN IF THE PAGE IS NOT FULLY LOADED

53. IMPROVE

54. BACK END
{
DATA /
BUSINESS DOWNLOADING CONTENT
LOGIC
FRONT END

56. > 80% MAIN
PERFORMANCE ISSUES
ARE IN THE FRONT END

57. FRONT END
PERFORMANCE
IMPROVEMENTS ARE:

61. CAUTION
THE NEXT SLIDES
ARE SLIGHTLY
TECHNICAL

62. LOAD LESS STUFF
USE SPRITES

63. LOAD LESS STUFF
CSS / JAVASCRIPT
CONCATENATION

64. LOAD SMALLER STUFF
COMPRESS
CONTENT FILES

65. LOAD SMALLER STUFF
MINIFY JAVASCRIPT,
CSS, HTML

66. DON’T RELOAD
THE SAME STUFF
CACHE CONTENT
UNTIL IT CHANGES

67. PROPERLY LOAD
YOUR STUFF
USE A CONTENT
DELIVERY NETWORK
(CDN)

68. LOAD YOUR STUFF
FASTER
USE MULTIPLE DOMAINS

69. LOAD GOOD STUFF
AVOID 404 ERRORS

70. MONITOR

71. SHOWSLOW
www.showslow.com

72. WEBPAGETEST.org
CAN MEASURE “TIME TO INTERACT”

74. REMEMBER TO
MEASURE

75. COMPARE EACH
VERSION WITH THE
PREVIOUS ONE

76. ANALYSE GAINS
AND LOSSES

77. OTHERWISE…

79. TO TAKE HOME:
1. WEB PERFORMANCE IS KEY
2. FASTER WEBSITE MEANS MORE USERS
3. MEASURE YOUR WEBSITE
4. IMPROVE YOUR FRONT END PERFORMANCE
6. KEEP MONITORING

81. INVEST IN GOOD
FRONT END DEVELOPERS

82. “If it is fast and ugly, they will
use it and curse you; if it is
slow, they will not use it.”
David Cheriton

83. Email: enrico.foschi@skillpages.com
Web: skillpages.com/enrico.foschi
Twitter: @enricofoschi
SLIDES: bit.ly/wsperf2011

84. http://www.flickr.com/photos/p0psicle/5206181863/
http://www.flickr.com/photos/meer/2658968648
http://www.flickr.com/photos/twinleaves/298592419
http://www.flickr.com/photos/tigerpixel/3185410319/
http://www.flickr.com/photos/drewleavy/3394892584/
http://www.flickr.com/photos/61417318@N00/3182666361
http://www.flickr.com/photos/gettysgirl/4241911286
http://www.flickr.com/photos/feldore/5610695978
http://www.flickr.com/photos/jamesjustin/3624616802
http://www.flickr.com/photos/davepatten/2440867482
http://www.flickr.com/photos/ahans/4055645909/
http://www.flickr.com/photos/pagedooley/2121472112
http://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/