Your SlideShare is downloading. ×
0
Web Performance Optimizationfor Modern Web ApplicationsChris Love@ChrisLoveProfessionalASPNET.com
Slide Deck & Source CodeSlide Deck – http://slidesha.re/SzoqKsSource Code – http://GitHub.com/docluv
Web Performance Optimization ResourcesHigh Performance Web Sites - http://bitly.com/U7GStYEven Faster Web Sites - http://a...
Web performance optimization, WPO, or website               optimization involves ongoing monitoring andWeb            tes...
"Also take a step back for a minute and consider             the intent of this change: a faster web is great for         ...
Time === $$$$Faster Sites Have Higher Conversion RatesWalMart - http://bit.ly/S1fHSZGoogle – http://bit.ly/WajJbBAmazon – ...
Folks at Walmart knew their pages were slow. As a for          instance, initial measurement showed that an item page     ...
Half a second delay caused a 20% drop in traffic.½ Second   Half a second delay killed user satisfaction.Delay      The le...
WPO Fast Facts • 57% Will Abandon a Slow Site After 3 Seconds • We Have to Concentrate 50% Harder For Slow Sites • 78% Hav...
Web Sites/Apps Are Getting Larger86 Files Requests         53 Images1.25MB                    750KB15 JavaScript Files    ...
Web Sites/Apps Are Getting Larger
We Are Getting More Mobile
Assume Everyone is on Sprint 3G                                  http://bit.ly/WebIqD
And Is Using Android                       http://bit.ly/ZGMm4A
YSlow Rules1. Minimize HTTP Requests                     13. Remove Duplicate Scripts2. Use a Content Delivery Network    ...
YSlow Rules – That Will Play A Part Today 1. Minimize HTTP Requests                     13.Remove Duplicate Scripts2. Use...
“Most of your scaling problems wont beMike Krieger   glamorous"                                           http://bit.ly/Qe...
Make FavIcon Small and CacheableDon’t Return 404Make Sure Its Compatible       PNG/ICOIt Carries Cookie WeightInstagram Le...
Speaking Of Cookies • Cookies Add Weight • Place Resources (img/css/js) on   Cookieless Domains • Consider Local Storage I...
Impact of Cookies on Response Time
Use LocalStorage For Storage & Caching• Allows You to Keep Data Locally in a Hash Table   • localStorage   • sessionStorag...
Let’s Examine Southwest.com                       • 95 File Requests                       • 6 Domains                    ...
Combine 19 JavaScript Files
Combine 19 JavaScript Files • Eliminated 18 file Requests • 42.6KB Header Data • Eliminated 18 Gzip Decompress   Operation...
Southwest.com Page Structure <meta http-equiv="X-UA-Compatible"       content="IE=EmulateIE7"/> <link rel="shortcut icon" ...
Southwest.com Improvements Over the past few months I have been analyzing Southwest.com and have seen some tremendous impr...
Let’s Look at Some Code!
Asynchronous Script Loading  • Allows You to lazy Load Scripts  • Great Way to Isolate 3rd Party Scripts  • Helps Avoid Si...
Image Optimization Tricks • CSS Sprites • Data URIs       <img src="data:image/png;base64,iVBORw0KGHAAAD…Zw4PIXZORK5CYII="...
Use Native Selectors Instead of jQuery                             http://bit.ly/S0bwby
Optimize CSS• Good Structure    • Size    • Colors    • Views/Controls    • Languages• Avoid ID References #
Web performance optimization for modern web applications
Web performance optimization for modern web applications
Upcoming SlideShare
Loading in...5
×

Web performance optimization for modern web applications

1,680

Published on

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.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,680
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
32
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • In Slide Show mode, click the arrow to enter the PowerPoint Getting Started Center.
  • In Slide Show mode, click the arrow to enter the PowerPoint Getting Started Center.
  • In Slide Show mode, click the arrow to enter the PowerPoint Getting Started Center.
  • Transcript of "Web performance optimization for modern web applications"

    1. 1. Web Performance Optimizationfor Modern Web ApplicationsChris Love@ChrisLoveProfessionalASPNET.com
    2. 2. Slide Deck & Source CodeSlide Deck – http://slidesha.re/SzoqKsSource Code – http://GitHub.com/docluv
    3. 3. Web Performance Optimization ResourcesHigh Performance Web Sites - http://bitly.com/U7GStYEven Faster Web Sites - http://amzn.to/WTiDFMWeb Performance Daybook - http://amzn.to/VV4GrzHigh Performance JavaScript - http://amzn.to/Sq9IFCSteve Souders - http://www.stevesouders.com/
    4. 4. Web performance optimization, WPO, or website optimization involves ongoing monitoring andWeb testing of websites to achieve optimumPerformance performance under given constraints. Usually optimization is restricted due to lack of completeOptimization information and metrics to evaluate the performance of a website. http://bit.ly/SWEh6E
    5. 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 theMatt 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. 6. Time === $$$$Faster Sites Have Higher Conversion RatesWalMart - http://bit.ly/S1fHSZGoogle – http://bit.ly/WajJbBAmazon – http://bit.ly/S3UoAjShopZilla - http://bit.ly/RIQMDM
    7. 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
    8. 8. 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
    9. 9. 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
    10. 10. Web Sites/Apps Are Getting Larger86 Files Requests 53 Images1.25MB 750KB15 JavaScript Files 14 Domains214KB http://bit.ly/PVlLOC
    11. 11. Web Sites/Apps Are Getting Larger
    12. 12. We Are Getting More Mobile
    13. 13. Assume Everyone is on Sprint 3G http://bit.ly/WebIqD
    14. 14. And Is Using Android http://bit.ly/ZGMm4A
    15. 15. YSlow Rules1. Minimize HTTP Requests 13. Remove Duplicate Scripts2. Use a Content Delivery Network 14. Configure ETags3. Avoid empty src or href 15. Make AJAX Cacheable4. Add an Expires or a Cache-Control Header 16. Use GET for AJAX Requests5. Gzip Components 17. Reduce the Number of DOM Elements6. Put StyleSheets at the Top 18. No 404s7. Put Scripts at the Bottom 19. Reduce Cookie Size8. Avoid CSS Expressions 20. Use Cookie-Free Domains for Components9. Make JavaScript and CSS External 21. Avoid Filters10. Reduce DNS Lookups 22. Do Not Scale Images in HTML11. Minify JavaScript and CSS 23. Make favicon.ico Small and Cacheable12. Avoid Redirects http://yhoo.it/W7BFIw
    16. 16. YSlow Rules – That Will Play A Part Today 1. Minimize HTTP Requests 13.Remove Duplicate Scripts2. Use a Content Delivery Network 14. Configure ETags3. Avoid empty src or href 15. Make AJAX Cacheable4. Add an Expires or a Cache-Control Header 16. Use GET for AJAX Requests5. Gzip Components 17.Reduce the Number of DOM Elements6. Put StyleSheets at the Top 18.No 404s7. Put Scripts at the Bottom 19.Reduce Cookie Size8. Avoid CSS Expressions 20.Use Cookie-Free Domains for Components9. Make JavaScript and CSS External 21. Avoid Filters10.Reduce DNS Lookups 22. Do Not Scale Images in HTML11.Minify JavaScript and CSS 23.Make favicon.ico Small and Cacheable12. Avoid Redirects http://yhoo.it/W7BFIw
    17. 17. “Most of your scaling problems wont beMike Krieger glamorous" http://bit.ly/QeKZsO
    18. 18. Make FavIcon Small and CacheableDon’t Return 404Make Sure Its Compatible PNG/ICOIt Carries Cookie WeightInstagram Lesson #1http://bit.ly/RUXEiL
    19. 19. Speaking Of Cookies • Cookies Add Weight • Place Resources (img/css/js) on Cookieless Domains • Consider Local Storage Instead
    20. 20. Impact of Cookies on Response Time
    21. 21. Use LocalStorage For Storage & Caching• Allows You to Keep Data Locally in a Hash Table • localStorage • sessionStorage• Approximately 5MB• Replace Cookies• Great For Caching
    22. 22. 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
    23. 23. Combine 19 JavaScript Files
    24. 24. Combine 19 JavaScript Files • Eliminated 18 file Requests • 42.6KB Header Data • Eliminated 18 Gzip Decompress Operations • Probably Shave ~ 1 Second
    25. 25. 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
    26. 26. 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 ;)
    27. 27. Let’s Look at Some Code!
    28. 28. 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
    29. 29. Image Optimization Tricks • CSS Sprites • Data URIs <img src="data:image/png;base64,iVBORw0KGHAAAD…Zw4PIXZORK5CYII="/> • CSS3 Features • Rounded Corners • Gradients
    30. 30. Use Native Selectors Instead of jQuery http://bit.ly/S0bwby
    31. 31. Optimize CSS• Good Structure • Size • Colors • Views/Controls • Languages• Avoid ID References #
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×