10 things you can do to speed up your web app today stir trek edition
Download as PPTX, PDF1 like1,334 views
This document outlines strategies for optimizing web application performance to enhance user experience and increase conversion rates. It emphasizes the importance of speed, providing various actionable steps such as minimizing HTTP requests, utilizing content delivery networks, and optimizing images to improve load times. Additionally, it suggests measuring performance and implementing coding best practices for ongoing improvement.
10 things you can do to speed up your web app today stir trek edition
- 1. StirTrek Edition 10 Things You Can Do Today To Speed Up Your Web Application & Make More $$$$ Today! 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?
- 8. 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
- 9. 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
- 10. SEO & Web Performance • Faster Sites Rank Higher • Faster is Better User Experience • http://bit.ly/1Ezmko6 • Mobile First Web Applications Rank Higher • Call Mobilegeddon • http://bit.ly/1JFpsmE
- 11. 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
- 12. 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
- 13. 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
- 14. 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
- 15. Web Sites Are Getting Fat and Out of Shape http://httpArchive.org 99 Files Requests – 2+MB 18 JavaScript Files - 318KB 6.4 CSS Files – 61KB 53 Images – 1.3MB 38 TCP Connections 17 Domains 46% Cacheable
- 16. Web Sites Are Getting Larger
- 18. That's Great But I Work in the Enterprise
- 19. 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 • Due to Increase Cognitive Load • Oh And You Are Going Mobile • And You Already Have, Even If You and Your Boss Does Not Acknowledge It
- 21. Good Code Is Cheaper •Performance Best Practices Lead To: •Well Structured Code •Smaller Code • Easier Maintenance • Fewer Bugs •Encourages Development Best Practices •Encourages Discipline
- 22. OK How Do I Figure Out How to Fix Things?
- 23. Measure •Load Time •Page Speed Index •Rendering •Run-Time Performance
- 24. Set A Performance Budget •Tim Kadlec •http://bit.ly/1CUAfGx •Typically Load Time • Shoot for < 2 Seconds Over Broadband • < 1 Second My Standard • Page Weight • What Doe My Web Site Cost? - http://whatdoesmysitecost.com/ • HTTP Chattiness
- 25. webpagetest.org • Online Tool • Identifies Common Performance Issues • Must be Public URL http://bit.ly/1dibffr
- 27. webpagetest.org – film strip view
- 28. 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
- 29. 1. Add A Fav Icon – Eliminate 404s “Most of your scaling problems wont be glamorous“ Mike Krieger http://bit.ly/QeKZsO
- 30. 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
- 31. 2.Use a CDN • Globally Distributes Resources Closer to Client • Was Expensive • Amazon CloudFront & Azure cost pennies a month
- 32. 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
- 33. 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 • Use IndexDB for Larger Data Sets
- 34. AJAX Caching • Checks localStorage Before Making AJAX Call • Stores Data in localStorage with Expiration Value • Radically Reduces Http Requests • Radically Improves Performance • The Fastest AJAX Request is the One That is Never Made.
- 35. 5. No More Cookies • Cookies Add Weight • Place Resources (img/css/js) on Cookieless Domains • CDNs Are Great For No Cookies • Consider Local Storage Instead
- 36. SWA & Cookies 36
- 37. Impact of Cookies on Response Time
- 38. Is 78ms A Big Deal??? • Remember 95 Files • 95 * 78ms = 7410ms or 7+ Seconds • 1248ms when considering 6 parallel connections • Does Cause Delay • Parallel Downloads Help Overall Time • Don’t Use 95 Files, Duh
- 39. 6. Optimize Images • Images are Too Large • PNGCrush, Kraken.io • Image Sprites • Glyph Fonts • Data URIs • CSS Rules
- 40. • CSS Sprites • Consider Gyph/Icon Font • CSS Gradients, Border Radius, Shadows • Text • This is a 30KB Image – Possible Change to 0KB*
- 41. 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
- 42. 7a. Inline Critical CSS & Remove Unused CSS • Inlining Critical CSS Enables Instant Rendering Experience • Remove Unused CSS • UNCSS Module • Identify Critical CSS • Example: Most Bootstrap Sites Use <10% of Bootstrap • Bootstrap Adds up to 600kb to Page Weight
- 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 • Critical CSS • UNCSS • Many Other Tasks • Gulp, Broccoli are also good tools • http://bit.ly/1kcrpuo
- 44. Grunt.js
- 45. 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 due to HTTP’s Slow Start • This is the Goal for Optimal Mobile Performance
- 46. Configure Gzip in IIS
- 47. Configure Gzip in Amazon S3 | CloudFront
- 48. 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
- 49. 10. External CSS & JavaScript • Allows Resources to be Cached Independently of Markup • Reduces Page Weight • Reduces Chance of Duplicate Code • Can Be Bundled & Minified
- 51. 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
- 52. 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