Points.com webdev lunch and learn #2: Page performance. What makes websites slow, how to make them faster.

1. Webdev Best
Practices
Al Torreno

2. Website Peformance

3. Fast enough?
"Everyone is on High Speed"

4. From webperformancetoday.com

5. Shopzilla
• Reduced avg page load time from 6s to 1.2s, increased
revenue by 12% and page views by 25%

6. Amazon
• Increased revenue by 1% for every
100ms improvement

7. Yahoo!
• Increased traffic by 9% for
every 400ms improvement

9. • Bandwidth is NOT the only bottleneck to
website performance

10. • Bandwidth is NOT the only bottleneck to
website performance
• Improvements to performance = increased
traffic + revenue

11. Corp
AFKLM login: 20 requests, 960.7 KB, 1.68s
AA login: 24 requests, 951.7 KB, 1.94s

12. PdC
homepage: 45 requests, 802.8 KB, 2.08s
login page: 29 requests, 860.9 KB, 1.87s
landing page: 100 requests, 329.2 KB, 4.67s

13. eBGT
Hyatt Buy MV:50 requests, 544.1 KB, 2.8s
JetBlue Buy MV: 61 requests, 642.1 KB, 4.83s

14. How do we compare?

19. Homepage Requests Payload Load
Corp 20 960K 1.71s
eBGT 50 544K 2.8s
PdC 45 802K 2.1s
Amazon 45 288K 1.63s
Apple 43 1.1M 1.27s
Facebook 15 162K 0.772s
Google 8 157K 0.672s

20. Okay, but how?

21. Steve Souders
Web performance guru

22. optimize front-end performance first, that's
where 80% or more of the end-user response
time is spent.

25. Online Resources

26. Online Resources
• Google Page Speed

27. Online Resources
• Google Page Speed
• Yahoo Exceptional Performance

28. The Tools

29. Firebug net panel

30. Google Page Speed

31. Google Page Speed
• Plugin for FF and Chrome

32. Google Page Speed
• Plugin for FF and Chrome
• Analyzes and grades page

33. Google Page Speed
• Plugin for FF and Chrome
• Analyzes and grades page
• Checks against best practices

34. Google Page Speed
• Plugin for FF and Chrome
• Analyzes and grades page
• Checks against best practices
• Provides recommendations

37. Site Score (100)
Corp (AA) 74
PdC 63
eBGT (Hyatt) 83
Apple 80
Amazon 93
Facebook 98
Google 100

38. First, some
terminology

39. http Waterfall

40. Parallel loading
• According to the http 1.1 spec, a single-user
client SHOULD NOT maintain more than 2
connections with a single hostname.

41. Scripts block parallel downloads

42. Scripts block parallel downloads

43. http Waterfall

44. Minimize http requests

45. Minimize http requests

46. Minimize http requests
• Combine js into a single file

47. Minimize http requests
• Combine js into a single file
• Combine CSS into a single file

48. Minimize http requests
• Combine js into a single file
• Combine CSS into a single file
• Combine images into a sprite

49. Sprites

50. Sprites
<div class="error">Oh gawd</div>
<h1>Lorem Ipsum</h1>
.error{background:url(sprite.png)
no-repeat 0 -300px}
h1{background:url(sprite.png) no-
repeat 0 -250px}

53. Round up

54. Round up
• Minimize redirects

55. Round up
• Minimize redirects
• Remove bad requests (aka 404)

56. Questions?

57. Reduce payload

58. Reduce payload
• Minify js and css

59. Reduce payload
• Minify js and css
• gzip

60. Reduce payload
• Minify js and css
• gzip
• Optimize/compress graphics

61. Parallelize downloads
across multiple
domains

62. Parallel loading
• According to the http 1.1 spec, a single-user
client SHOULD NOT maintain more than 2
connections with a single hostname.

63. So, let's load assets
from multiple hosts

65. • dynamic content from buy.points.com

66. • dynamic content from buy.points.com
• images from static1.points.com and
static2.points.com

67. • dynamic content from buy.points.com
• images from static1.points.com and
static2.points.com
• in IE6, 6 parallel downloads

68. • dynamic content from buy.points.com
• images from static1.points.com and
static2.points.com
• in IE6, 6 parallel downloads
• in FF5, 18 parallel downloads

69. • dynamic content from buy.points.com
• images from static1.points.com and
static2.points.com
• in IE6, 6 parallel downloads
• in FF5, 18 parallel downloads
• FTW

70. Questions?

71. Optimize Caching

72. Optimize Caching
• Doesn't help us with speed of initial page
• Helps with speed of subsequent pages /
subsequent visits

73. Caching 101

74. Caching 101
• Homepage, first visit: Must request all static
resources.

75. Caching 101
• Homepage, first visit: Must request all static
resources.
• Images/CSS/JS/etc stored in browser cache

76. Caching 101
• Homepage, first visit: Must request all static
resources.
• Images/CSS/JS/etc stored in browser cache
• Subsequent visits: Browser (somehow)
determines whether to reuse cached version
or re-request asset

77. Conditional GET
• browser: "I've got this asset in my cache, is it
the most up-to-date?!"
• server: "yup, it's good (304)"
• Or
• server: "no, here's a more up-to-date version"

78. Response headers
Expires
Cache-Control:max-age
Last-modified
Etag

79. Gotcha

80. Gotcha
• If none of these response headers are set, the
browser must determine if it can use the
cached version

81. Gotcha
• If none of these response headers are set, the
browser must determine if it can use the
cached version
• Unnecessarily re-requesting static assets
makes website slower

82. Gotcha
• If none of these response headers are set, the
browser must determine if it can use the
cached version
• Unnecessarily re-requesting static assets
makes website slower
• Conditional GETs still take up http requests

83. Aggressively cache all
static resources

84. Response headers
Expires
Cache-Control:max-age
Last-modified
Etag

85. Use fingerprinting when a
static resource needs to
change

86. Fingerprinting
<script src="coolmenu.js"></script>

87. Fingerprinting
<script src="coolmenu_v2.js"></
script>

88. Scripts block
progressive rendering

97. Provides user
feedback
"Did this website crash my browser?"

98. Improves perceived speed

99. Scripts at the bottom

100. Stylesheets up top
Scripts at the bottom

101. <html>
<head>
</head>
<body>
</body>
</html>

102. <html>
<head>
</head>
<body>
</body>
</html>

103. <html>
<head>
</head>
<body>
</body>
</html>

104. No inline anything

105. No inline anything

106. No inline anything
• No inline styles

107. No inline anything
• No inline styles
• No inline scripts

108. No inline anything
• No inline styles
• No inline scripts
• blocks progressive rendering

109. No inline anything
• No inline styles
• No inline scripts
• blocks progressive rendering
• blocks parallel downloads

110. LABjs
• Framework for asynchronous load of
javascript
• Able to load js files in parallel
• Ensures proper execution order

111. LABjs in action

112. LABjs in action
• Onboarding for IcelandAir

113. LABjs in action
• Onboarding for IcelandAir
• Lots of javascript

114. LABjs in action
• Onboarding for IcelandAir
• Lots of javascript
• Their homepage: 32 requests, 795.6 KB,
12.42s

115. LABjs in action
• Onboarding for IcelandAir
• Lots of javascript
• Their homepage: 32 requests, 795.6 KB,
12.42s
• eBGT Buy MV: 30 requests, 721.4 KB, 2.69s

116. Evil
• css expressions
• iframes
• document.write()

117. Cookies 101
GET /resources/images/pdc/
signupLogin/Background_Shadow.gif
HTTP/1.1
Host: www.points.com
User-Agent: Mozilla/5.0 (Windows;
U; Windows NT 6.1; en-US;
Referer: https://www.points.com/

118. Gotcha
Cookies are sent with every http request

119. Serve static resources
from a cookieless
domain
e.g. images.points.com

120. Reduce DNS lookups
i.e. Don't go overboard

121. Reduce DNS lookups

122. Reduce DNS lookups
• ajax.googleapis.com

123. Reduce DNS lookups
• ajax.googleapis.com
• buy.points.com

124. Reduce DNS lookups
• ajax.googleapis.com
• buy.points.com
• images1.points.com

125. Reduce DNS lookups
• ajax.googleapis.com
• buy.points.com
• images1.points.com
• images2.points.com

126. Reduce DNS lookups
• ajax.googleapis.com
• buy.points.com
• images1.points.com
• images2.points.com
• s3.aws.amazon.com

127. DNS lookups are expensive

128. Resources
• Google page speed :
• code.google.com/speed/page-speed/
• Yahoo exceptional performance
• developer.yahoo.com/performance/
• Steve Souders blog
• stevesouders.com/blog/
• LABjs
• labjs.com