10 things you can do to speed up your web app today
DESCRIPTION
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.TRANSCRIPT
![Page 1: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/1.jpg)
10 Things You Can Do Today To Speed Up Your
Web Application
Chris Love
@ChrisLove
Love2Dev.com
![Page 2: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/2.jpg)
Who Am I
• ASP.NET MVP• ASP Insider• Internet Explorer User Agent• Author• Speaker• Tweaker, Lover of Web, JavaScript, CSS & HTML5• @ChrisLove• Love2Dev.com
![Page 3: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/3.jpg)
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
BUY NOW!
![Page 4: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/4.jpg)
Slide Deck & Source Code
• Slide Deck – slidesha.re/15YTrTT• Source Code – http://GitHub.com/docluv
![Page 5: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/5.jpg)
![Page 6: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/6.jpg)
Annoying?
![Page 7: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/7.jpg)
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
![Page 8: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/8.jpg)
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
![Page 9: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/9.jpg)
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
![Page 10: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/10.jpg)
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
![Page 11: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/11.jpg)
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
![Page 12: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/12.jpg)
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
![Page 13: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/13.jpg)
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
![Page 14: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/14.jpg)
Web Sites Are Getting Larger
![Page 15: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/15.jpg)
![Page 16: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/16.jpg)
That's Great But I Work in the Enterprise
![Page 17: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/17.jpg)
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
![Page 18: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/18.jpg)
http://bit.ly/16zFCXL
![Page 19: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/19.jpg)
Good Code Is Cheaper
• Performance Best Practices Lead To:• Well Structured Code• Smaller Code
• Easier Maintenance• Fewer Bugs
• Encourages Development Best Practices• Encourages Discipline
![Page 20: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/20.jpg)
OK How Do I Figure Out How to Fix Things?
![Page 21: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/21.jpg)
![Page 22: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/22.jpg)
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
![Page 23: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/23.jpg)
webpagetest.org
• Online Tool• Identifies Common Performance Issues• Must be Public URL
http://bit.ly/1dibffr
![Page 24: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/24.jpg)
Southwest.com
http://bit.ly/1dibffr
![Page 25: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/25.jpg)
http://bit.ly/1dibffr
![Page 26: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/26.jpg)
F12 To the Rescue!!
![Page 27: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/27.jpg)
Waterfall Chart
![Page 28: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/28.jpg)
Examine A Http Request
![Page 29: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/29.jpg)
YSlow Rules
1. Minimize HTTP Requests2. Use a Content Delivery Network3. Avoid empty src or href4. Add an Expires or a Cache-Control Header5. Gzip Components6. Put StyleSheets at the Top7. Put Scripts at the Bottom8. Avoid CSS Expressions9. Make JavaScript and CSS External10. Reduce DNS Lookups11. Minify JavaScript and CSS12. Avoid Redirects13. Remove Duplicate Scripts14. Configure ETags15. Make AJAX Cacheable
16. Use GET for AJAX Requests17. Reduce the Number of DOM Elements18. No 404s19. Reduce Cookie Size20. Use Cookie-Free Domains for
Components21. Avoid Filters22. Do Not Scale Images in HTML23. Make favicon.ico Small and Cacheable
http://yhoo.it/W7BFIw
![Page 30: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/30.jpg)
1. Add A Fav Icon – Eliminate 404s
“Most of your scaling problems wont be glamorous“
Mike Kriegerhttp://bit.ly/QeKZsO
![Page 31: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/31.jpg)
Make FavIcon Small and Cacheable
• Don’t Return 404• YSlow Rule #18
• Make Sure Its Compatible• PNG/ICO
• It Carries Cookie Weight
• Instagram Lesson #1http://bit.ly/RUXEiL
![Page 32: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/32.jpg)
2.Use a CDN
• Globally Distributes Resources Closer to Client• Was Expensive• Amazon CloudFront cost pennies a month
![Page 33: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/33.jpg)
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
![Page 34: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/34.jpg)
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
![Page 35: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/35.jpg)
AJAX Prefilter
• Checks localStorage Before Making AJAX Call• Stores Data in localStorage with Expiration Value• Radically Reduces Http Requests• Radically Improves Performance
![Page 36: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/36.jpg)
5. Optimize Images
• Images are Too Large• PNGCrush, Kraken.io• Image Sprites• Glyph Fonts• Data URIs• CSS Rules
![Page 37: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/37.jpg)
37
• CSS Sprites• Consider Gyph/Icon Font• CSS Gradients, Border Radius, Shadows• Text• This is a 30KB Image – Possible Change to 0KB*
![Page 38: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/38.jpg)
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
![Page 39: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/39.jpg)
39
SWA & Cookies
![Page 40: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/40.jpg)
40
Impact of Cookies on Response Time
![Page 41: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/41.jpg)
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
![Page 42: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/42.jpg)
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
![Page 43: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/43.jpg)
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
![Page 44: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/44.jpg)
Using Grunt JS
• Setup Using NPM• npm install -g grunt-cli
• Add Grunt files• package.json• grunt.js
![Page 45: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/45.jpg)
Common Contrib Extensions
• Uglify• JSHint• Handlebars• HTMLMIN• Jasmine• Qunit• Watch• YuiDoc
![Page 46: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/46.jpg)
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" }}
![Page 47: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/47.jpg)
Grunt.js
![Page 48: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/48.jpg)
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
![Page 49: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/49.jpg)
Configure Gzip in IIS
![Page 50: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/50.jpg)
Configure Gzip in Amazon S3 | CloudFront
![Page 51: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/51.jpg)
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
![Page 52: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/52.jpg)
10. External CSS & JavaScript
• Allows Resources to be Cached Independently of Markup• Reduces Page Weight
• Reduces Chance of Duplicate Code• Can Be Bundled & Minified
![Page 53: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/53.jpg)
Critical Rendering Path
![Page 54: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/54.jpg)
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
![Page 55: 10 Things You Can Do to Speed Up Your Web App Today](https://reader034.vdocuments.site/reader034/viewer/2022052618/554bbb85b4c90594278b4d3e/html5/thumbnails/55.jpg)
Bonus – Use AppCacheCACHE 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