Web performance optimization for modern web applications
Download as PPTX, PDF4 likes1,840 views
The document focuses on web performance optimization (WPO) for modern web applications, emphasizing the importance of monitoring and testing to improve website speed and user experience. It highlights key findings such as the negative impact of slow websites on user satisfaction and conversion rates, and outlines several best practices and strategies for optimizing web performance. Additionally, it provides insights into case studies and specific optimization techniques to enhance loading times and reduce unnecessary file requests.
Web performance optimization for modern web applications
- 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 #