Web Performance is extremely important to user experience and an important component of today's modern web applications. This session reviews why's and how's to make your modern web application perform better.

1. Web Performance Optimization
for Modern Web Applications
Chris Love
@ChrisLove
ProfessionalASPNET.com

2. Slide Deck & Source Code
Slide Deck – http://slidesha.re/SzoqKs
Source Code – http://GitHub.com/docluv

3. Web Performance Optimization Resources
High Performance Web Sites - http://bitly.com/U7GStY
Even Faster Web Sites - http://amzn.to/WTiDFM
Web Performance Daybook - http://amzn.to/VV4Grz
High Performance JavaScript - http://amzn.to/Sq9IFC
Steve Souders - http://www.stevesouders.com/

4. Web performance optimization, WPO, or website
optimization involves ongoing monitoring and
Web testing of websites to achieve optimum
Performance performance under given constraints. Usually
optimization is restricted due to lack of complete
Optimization information and metrics to evaluate the
performance of a website.
http://bit.ly/SWEh6E

5. "Also take a step back for a minute and consider
the intent of this change: a faster web is great for
everyone, but especially for users. Lots of
websites have demonstrated that speeding up the
Matt Cutts user experience results in more usage. So
speeding up your website isn’t just something that
can affect your search rankings–it’s a fantastic
idea for your users."
http://bit.ly/SPPB4k

6. Time === $$$$
Faster Sites Have Higher Conversion Rates
WalMart - http://bit.ly/S1fHSZ
Google – http://bit.ly/WajJbB
Amazon – http://bit.ly/S3UoAj
ShopZilla - http://bit.ly/RIQMDM

7. Folks at Walmart knew their pages were slow. As a for
instance, initial measurement showed that an item page
took about 24 seconds to load for the slowest 5% of users.
WalMart Why? The usual culprits: too many page elements, slow
third-party scripts, multiple hosts (25% of page content is
served by partners, affiliates, and Marketplace), and various
best practice no-nos
http://bit.ly/WajJbB

10. Half a second delay caused a 20% drop in traffic.
½ Second Half a second delay killed user satisfaction.
Delay The lesson, Marissa said, is that speed matters.
People do not like to wait. Do not make them.
http://bit.ly/TPPhUp

11. WPO Fast Facts
• 57% Will Abandon a Slow Site After 3 Seconds
• We Have to Concentrate 50% Harder For Slow Sites
• 78% Have Felt Stress or Anger With Slow Sites
• 44% Say Slow Sites Make Them Anxious
• 4% Have Thrown Their Phone
http://bit.ly/SuBLDR

12. Web Sites/Apps Are Getting Larger
86 Files Requests 53 Images
1.25MB 750KB
15 JavaScript Files 14 Domains
214KB
http://bit.ly/PVlLOC

13. Web Sites/Apps Are Getting Larger

14. We Are Getting More Mobile

15. Assume Everyone is on Sprint 3G
http://bit.ly/WebIqD

16. And Is Using Android
http://bit.ly/ZGMm4A

17. YSlow Rules
1. Minimize HTTP Requests 13. Remove Duplicate Scripts
2. Use a Content Delivery Network 14. Configure ETags
3. Avoid empty src or href 15. Make AJAX Cacheable
4. Add an Expires or a Cache-Control Header 16. Use GET for AJAX Requests
5. Gzip Components 17. Reduce the Number of DOM Elements
6. Put StyleSheets at the Top 18. No 404s
7. Put Scripts at the Bottom 19. Reduce Cookie Size
8. Avoid CSS Expressions 20. Use Cookie-Free Domains for Components
9. Make JavaScript and CSS External 21. Avoid Filters
10. Reduce DNS Lookups 22. Do Not Scale Images in HTML
11. Minify JavaScript and CSS 23. Make favicon.ico Small and Cacheable
12. Avoid Redirects
http://yhoo.it/W7BFIw

18. YSlow Rules – That Will Play A Part Today 
1. Minimize HTTP Requests 13.Remove Duplicate Scripts
2. Use a Content Delivery Network 14. Configure ETags
3. Avoid empty src or href 15. Make AJAX Cacheable
4. Add an Expires or a Cache-Control Header 16. Use GET for AJAX Requests
5. Gzip Components 17.Reduce the Number of DOM Elements
6. Put StyleSheets at the Top 18.No 404s
7. Put Scripts at the Bottom 19.Reduce Cookie Size
8. Avoid CSS Expressions 20.Use Cookie-Free Domains for Components
9. Make JavaScript and CSS External 21. Avoid Filters
10.Reduce DNS Lookups 22. Do Not Scale Images in HTML
11.Minify JavaScript and CSS 23.Make favicon.ico Small and Cacheable
12. Avoid Redirects
http://yhoo.it/W7BFIw

19. “Most of your scaling problems wont be
Mike Krieger glamorous"
http://bit.ly/QeKZsO

20. Make FavIcon Small and Cacheable
Don’t Return 404
Make Sure Its Compatible
PNG/ICO
It Carries Cookie Weight
Instagram Lesson #1
http://bit.ly/RUXEiL

21. Speaking Of Cookies
• Cookies Add Weight
• Place Resources (img/css/js) on
Cookieless Domains
• Consider Local Storage Instead

22. Impact of Cookies on Response Time

23. Use LocalStorage For Storage & Caching
• Allows You to Keep Data Locally in a Hash Table
• localStorage
• sessionStorage
• Approximately 5MB
• Replace Cookies
• Great For Caching

24. Let’s Examine Southwest.com
• 95 File Requests
• 6 Domains
• 2 CSS
• 17 Documents
• 49 Images
• 30 JavaScript Files
• 4 AJAX Calls
• 786 KB – 1.25MB
• 2042 KB Request Header
• 16.5KB Cookie
• 1430 DOM Elements

25. Combine 19 JavaScript Files

26. Combine 19 JavaScript Files
• Eliminated 18 file Requests
• 42.6KB Header Data
• Eliminated 18 Gzip Decompress
Operations
• Probably Shave ~ 1 Second

27. Southwest.com Page Structure
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<link rel="shortcut icon" href="/assets/images/favicon.ico"/>
<style> … </style>
<script> … </script> - 22 Times
Script References in the HEAD – Should be at the Bottom

28. Southwest.com Improvements
Over the past few months I have been analyzing
Southwest.com and have seen some tremendous
improvements. Data transfer size has been cut in half
this week alone. I have seen the complete load time
reduced around 2 seconds in the past few weeks. The
number of file requests has been reduced. So many be
we will be privileged to a new WPO case study soon ;)

29. Let’s Look at Some Code!

30. Asynchronous Script Loading
• Allows You to lazy Load Scripts
• Great Way to Isolate 3rd Party Scripts
• Helps Avoid Single Points of Failure
• Check For Existing Script Reference
• Creates New Element
• Executes a Callback When the Document is loaded
• Appends the Script to the BODY
http://bit.ly/TKdo6C

31. Image Optimization Tricks
• CSS Sprites
• Data URIs
<img src="data:image/png;base64,iVBORw0KGHAAAD…Zw4PIXZORK5CYII="/>
• CSS3 Features
• Rounded Corners
• Gradients

32. Use Native Selectors Instead of jQuery
http://bit.ly/S0bwby

33. Optimize CSS
• Good Structure
• Size
• Colors
• Views/Controls
• Languages
• Avoid ID References #