Web Performance is a serious issues these days. 80% of web performance issues are in the client. Many developers either do not realize what they are leaving on the table and how that affects the success of their application. These are 10 things any web developer can do in about 30-60 minutes to drastically increase page load times and thus increase the application's profitability.

1. 10 Things You Can Do Today
To Speed Up Your Web
Application
Chris Love
@ChrisLove
Love2Dev.com

2. Who Am I
• ASP.NET MVP
• ASP Insider
• Internet Explorer User Agent
• Author
• Speaker
• Tweaker, Lover of Web, JavaScript, CSS & HTML5
• @ChrisLove
• Love2Dev.com

3. High Performance Single Page Web
Applications
• Responsive Design
• Touch
• Mobile First
• SPA
• Extensible, Scalable Architecture
• Web Build and Workflow
• Goes Really Fast!
• ~395 Pages
• 20 Chapters
• $9.99 http://amzn.to/1a55L89

4. Slide Deck & Source Code
• Slide Deck – slidesha.re/15YTrTT
• Source Code – http://GitHub.com/docluv

6. Annoying?

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

8. Matt Cutts
"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 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

9. Time is Money
• 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

10. WalMart
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. 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

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

12. 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

13. Web Sites Are Getting Fat
http://httpArchive.org
93 Files Requests - 1.7MB
17 JavaScript Files - 276KB
5.6 CSS Files – 48KB
53 Images - 1068KB
16 Domains
46% Cacheable

14. Web Sites Are Getting Larger

16. That's Great But I Work
in the Enterprise

17. Performance IS Relevant
• Do you really want to waste $$$
• You want to make co-workers hate you?
• And Possibly Throw a Phone at You
• Remember the Physiological Stats?
• Slow Web Apps Have Higher Data Entry Error Rates
• Oh And You Are Going Mobile

18. http://bit.ly/16zFCXL

19. Good Code Is Cheaper
• Performance Best Practices Lead To:
• Well Structured Code
• Smaller Code
• Easier Maintenance
• Fewer Bugs
• Encourages Development Best Practices
• Encourages Discipline

20. OK How Do I Figure
Out How to Fix
Things?

22. Southwest.com
• 89 File Requests
• 5 Domains
• 2 CSS
• 8 Documents
• 39 Images
• 24 JavaScript Files
• 4 AJAX Calls
• 1MB
• 336B Request Header
• 1KB Cookie
• 2034 DOM Elements

23. webpagetest.org
• Online Tool
• Identifies Common Performance Issues
• Must be Public URL
http://bit.ly/1dibffr

24. Southwest.com
http://bit.ly/1dibffr

25. http://bit.ly/1dibffr

26. F12 To the Rescue!!

27. Waterfall Chart

28. Examine A Http Request

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

30. 1. Add A Fav Icon – Eliminate 404s
“Most of your scaling
problems wont be
glamorous“
Mike Krieger
http://bit.ly/QeKZsO

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

32. 2.Use a CDN
• Globally Distributes Resources Closer to Client
• Was Expensive
• Amazon CloudFront cost pennies a month

33. 3. Far Future Expires Header
• Lets the Browser Cache Resources Locally
• Eliminates Future Http Requests
• The Fastest Http Request is the one not made
• Only Updates Resource if Changed on Server

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

35. AJAX Prefilter
• Checks localStorage Before Making AJAX Call
• Stores Data in localStorage with Expiration Value
• Radically Reduces Http Requests
• Radically Improves Performance

36. 5. Optimize Images
• Images are Too Large
• PNGCrush, Kraken.io
• Image Sprites
• Glyph Fonts
• Data URIs
• CSS Rules

37. 37
• CSS Sprites
• Consider Gyph/Icon Font
• CSS Gradients, Border Radius, Shadows
• Text
• This is a 30KB Image – Possible Change to 0KB*

38. 6. No More Cookies
• Cookies Add Weight
• Place Resources (img/css/js) on
Cookieless Domains
• CDNs Are Great For No Cookies
• Consider Local Storage Instead

39. SWA & Cookies
39

40. Impact of Cookies on Response Time
40

41. Is 78ms A Big Deal???
• Remember 95 Files
• 95 * 78ms = 7410ms or 7+ Seconds
• Does Cause Delay
• Parallel Downloads Help Overall Time
• Don’t Use 95 Files, Duh
41

42. 7. Bundle & Minify CSS & JavaScript
• Eliminate Excess HTTP Requests
• Reduces Data Footprint
• This is a Release or Production Version
• Shoot for a Single JS and a Single CSS file in Production

43. Use A Client Build System
• Bundling & Minification is OK
• Grunt Is Very Easy & Extensive
• Validate Scripts
• Combine & Minify Scripts
• Validate CSS
• Combine & Minify CSS
• Many Other Tasks
• http://bit.ly/1kcrpuo

44. Using Grunt JS
• Setup Using NPM
• npm install -g grunt-cli
• Add Grunt files
• package.json
• grunt.js

45. Common Contrib Extensions
• Uglify
• JSHint
• Handlebars
• HTMLMIN
• Jasmine
• Qunit
• Watch
• YuiDoc

46. Package.json
46
{
"name": “webmovies",
"version": "0.0.4",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-nodeunit": "~0.1.2",
"grunt-contrib": "~0.6.1"
}
}

47. Grunt.js

48. 8. Gzip Text Content
• Browsers Support Gzip & Deflate Algorithms
• Reduces Text Base Content Size
• Makes it Easier to Traverse Intertubes
• 14kb Critical Packet Size
• This is the Goal for Optimal Mobile Performance

49. Configure Gzip in IIS

50. Configure Gzip in Amazon S3 |
CloudFront

51. 9. CSS @ Top – JavaScript @ Bottom
• CSS is Read & Evaluated to Build CSSOM
• Late CSS causes Browser to ‘Start All Over’
• JavaScript is a Blocking Action
• Browser Stops Everything
• Script Must Be Loaded
• Script Must Be Evaluated
• Use Async & Defer Attributes

52. 10. External CSS & JavaScript
• Allows Resources to be Cached Independently of Markup
• Reduces Page Weight
• Reduces Chance of Duplicate Code
• Can Be Bundled & Minified

53. Critical Rendering Path

54. Bonus – Use AppCache
• <html lang="en-US" manifest="ie11WebSite.appcache">
• Stores Resources Locally in a Sandbox Cache for the Domain
• Available Offline
• Has an Event API

55. Bonus – Use AppCache
CACHE MANIFEST
# version 0.07
CACHE:
#images
favicon.ico
img/purple-bkg.jpg
#css
css/site.min.css
#js
js/applib.js
NETWORK:
#http://example.com/api/
#http://api.rottentomatoes.com/api/public/v1.0/
FALLBACK:
#http://content9.flixster.com/movie/*.jpg /img/offline-poster.png