Web performance optimization for modern web applications
Upcoming SlideShare
Loading in...5
×
 

Web performance optimization for modern web applications

on

  • 1,635 views

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

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.

Statistics

Views

Total Views
1,635
Views on SlideShare
1,027
Embed Views
608

Actions

Likes
0
Downloads
28
Comments
0

4 Embeds 608

http://chuvash.eu 405
http://sharepointkunskap.wordpress.com 201
http://translate.googleusercontent.com 1
http://www.scoop.it 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.

Web performance optimization for modern web applications Web performance optimization for modern web applications Presentation Transcript

  • 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://amzn.to/WTiDFMWeb Performance Daybook - http://amzn.to/VV4GrzHigh Performance JavaScript - http://amzn.to/Sq9IFCSteve Souders - http://www.stevesouders.com/ View slide
  • 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 View slide
  • "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
  • Time === $$$$Faster Sites Have Higher Conversion RatesWalMart - http://bit.ly/S1fHSZGoogle – http://bit.ly/WajJbBAmazon – http://bit.ly/S3UoAjShopZilla - http://bit.ly/RIQMDM
  • 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
  • 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
  • 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
  • Web Sites/Apps Are Getting Larger86 Files Requests 53 Images1.25MB 750KB15 JavaScript Files 14 Domains214KB http://bit.ly/PVlLOC
  • 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 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
  • 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
  • “Most of your scaling problems wont beMike Krieger glamorous" http://bit.ly/QeKZsO
  • Make FavIcon Small and CacheableDon’t Return 404Make Sure Its Compatible PNG/ICOIt Carries Cookie WeightInstagram Lesson #1http://bit.ly/RUXEiL
  • Speaking Of Cookies • Cookies Add Weight • Place Resources (img/css/js) on Cookieless Domains • Consider Local Storage Instead
  • Impact of Cookies on Response Time
  • Use LocalStorage For Storage & Caching• Allows You to Keep Data Locally in a Hash Table • localStorage • sessionStorage• Approximately 5MB• Replace Cookies• Great For Caching
  • 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
  • Combine 19 JavaScript Files
  • Combine 19 JavaScript Files • Eliminated 18 file Requests • 42.6KB Header Data • Eliminated 18 Gzip Decompress Operations • Probably Shave ~ 1 Second
  • 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
  • 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 ;)
  • Let’s Look at Some Code!
  • 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
  • Image Optimization Tricks • CSS Sprites • Data URIs <img src="data:image/png;base64,iVBORw0KGHAAAD…Zw4PIXZORK5CYII="/> • CSS3 Features • Rounded Corners • Gradients
  • Use Native Selectors Instead of jQuery http://bit.ly/S0bwby
  • Optimize CSS• Good Structure • Size • Colors • Views/Controls • Languages• Avoid ID References #