Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web Performance Meetup 1 Web Performance 101 Jeremy

Similar presentations


Presentation on theme: "Web Performance Meetup 1 Web Performance 101 Jeremy"— Presentation transcript:

1 Web Performance Group @ Meetup 1 Web Performance 101 Jeremy Solarz @jeremysolarz

2 Web Performance Group @ Meetup 2 What next? What is Web Performance Money Performance? Experiments Where is the time? Follow the Rules! Toolbelt

3 Web Performance Group @ Meetup 3 What is performance for the JavaScript folks… Stoyan Stefanov, JSMentors http://velocityconf.com/velocity2010/public/schedule/detail/13019

4 Web Performance Group @ Meetup 4 What means slow Pain = slow, Study form User Interface Engineering http://www.uie.com/articles/download_time/ More on that at… http://www.phpied.com/psychology-of- performance/

5 Web Performance Group @ Meetup 5 Whats Good Performance 0.1 seconds, instantaneous response 1 second keeps the user's flow of thought seamless. 10 seconds keeps the user's attention. Compared to Blink of an eye: 0.3 – 0.4s http://www.useit.com/alertbox/response-times.html

6 Web Performance Group @ Meetup 6 Tip Progressive Rendering Part 1 Part 2 Part 3

7 Web Performance Group @ Meetup 7 Money Performance?

8 Web Performance Group @ Meetup 8 http://velocityconf.com/velocity2010/public/schedule/detail/13023

9 Web Performance Group @ Meetup 9 http://velocityconf.com/velocity2010/public/schedule/detail/13023

10 Web Performance Group @ Meetup 10 http://velocityconf.com/velocity2010/public/schedule/detail/13023

11 Web Performance Group @ Meetup 11 What does this mean? Losing Visitors Losing Sales Losing Ad-revenue Wasting SEO/SEM effort Much more $$$ on bandwidth and servers

12 Web Performance Group @ Meetup 12 Example A 1-second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions Aberdeen Group http://www.aberdeen.com/Aberdeen-Library/5136/RA-performance-web-application.aspx

13 Web Performance Group @ Meetup 13 What MS did.. Artificial 1s delay = 2.8% reduction in revenue/user (Bing) http://velocityconf.com/velocity2009/public/schedule/detail/8523

14 Web Performance Group @ Meetup 14 What Google did…

15 Web Performance Group @ Meetup 15 Where is the time? 80% of the page load time is spent outside the data centre!!! Steve Souders High-Performance Websites

16 Web Performance Group @ Meetup 16 The Building Blocks of #WebPerf http://www.slideshare.net/sthair/web-performance-101-ldn-webperf-steve-thair

17 Web Performance Group @ Meetup 17 Follow the Rules!

18 Web Performance Group @ Meetup 18 Gooles Rules Avoid bad requests Avoid CSS expressions Combine external CSS Combine external JavaScript Defer loading of JavaScript Enable compression Leverage browser caching Leverage proxy caching Minify CSS Minify HTML Minify JavaScript Minimize request size Minimize DNS lookups Minimize redirects Optimize images Optimize the order of styles and scripts Parallelize downloads across hostnames Put CSS in the document head Remove unused CSS Serve resources from a consistent URL Serve scaled images Serve static content from a cookieless domain Specify a character set early Specify image dimensions Use efficient CSS selectors http://code.google.com/speed/page-speed/docs/rules_intro.html

19 Web Performance Group @ Meetup 19 Yahoos Rules Minimize HTTP Requests Use a Content Delivery Network Add an Expires or a Cache- Control Header Gzip Components Put StyleSheets at the Top Put Scripts at the Bottom Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript and CSS Avoid Redirects Remove Duplicate Scripts Configure ETags Make AJAX Cacheable Use GET for AJAX Requests Reduce the Number of DOM Elements No 404s Reduce Cookie Size Use Cookie-Free Domains for Components Avoid Filters Do Not Scale Images in HTML Make favicon.ico Small & Cacheable http://developer.yahoo.com/yslow/help/#guidelines

20 Web Performance Group @ Meetup 20 What is important?! Reduce Page Size (<500Kb) Enable (Gzip) Compression, even behind Proxies, http://velocityconf.com/velocity2010/public/schedule/deta il/14334 http://velocityconf.com/velocity2010/public/schedule/deta il/14334 Reduce the number of roundtrips (<40 per page…) Structure the page (to improve render & download) –CSS First –Javascript last Lossy Images, http://www.phpied.com/overlooked- optimizations-images/http://www.phpied.com/overlooked- optimizations-images/ Cache, Cache, Cache

21 Web Performance Group @ Meetup 21 Impact? Your page download times will drop by ~50%

22 Web Performance Group @ Meetup 22 Toolbelt

23 Web Performance Group @ Meetup 23 Client-side ySlow (Firefox) PageSpeed (Firefox) Firebug (Firefox) HTTPWatch (Firefox & IE) Dynatrace Ajax Edition (IE only, Firefox)

24 Web Performance Group @ Meetup 24 Check first Analysis the waterfall graph –Look for render start time –Script blocking –# objects, http://mir.aculo.us/dom-monster/http://mir.aculo.us/dom-monster/ Headers –Not Gzipd –No Expires or Cache Control Headers –2 seconds Keep-Alive??

25 Web Performance Group @ Meetup 25 Online WebPageTest.org, http://www.webpagetest.org/http://www.webpagetest.org/ Showslow, http://www.showslow.com/http://www.showslow.com/ Pagespeed Online, http://pagespeed.googlelabs.com/pagespeed/ http://pagespeed.googlelabs.com/pagespeed/ Smush It (image analysis) - http://www.smushit.com/ysmush.it/ http://www.smushit.com/ysmush.it/ Browsermob, https://browsermob.com/performance-testing https://browsermob.com/performance-testing HTTP Archive, http://httparchive.org/http://httparchive.org/ GTMetrix - http://gtmetrix.com/http://gtmetrix.com/ Yottaa - http://www.yottaa.com/http://www.yottaa.com/ RedBot (cache analysis), http://redbot.org/http://redbot.org/

26 Web Performance Group @ Meetup 26 Out of the box Google Mod_pagespeed - http://code.google.com/speed/pagespeed/docs/ module.html Aptimize – www.aptimize.com Webo - http://www.webogroup.com/home/site- speedup/ Strangeloop - http://www.strangeloopnetworks.com/ Blaze IO - http://www.blaze.io/ DSA Dynamic Site Acceleration – Cotendo, Akamai, Limelight, CDNetworks etc

27 Web Performance Group @ Meetup 27 Reference Steve Souders blog, http://www.stevesouders.com/blog/http://www.stevesouders.com/blog/ http://www.phpied.com/category/performance/, Stoyan Stefanovhttp://www.phpied.com/category/performance/ WebPerformanceToday, http://www.webperformancetoday.com/http://www.webperformancetoday.com/ Performance Planet (WebPerf Blogs) - http://www.perfplanet.com/http://www.perfplanet.com/ Sergey Chernvshev, http://www.sergeychernyshev.com/talks/Web_Performance http://www.sergeychernyshev.com/talks/Web_Performance http://zoompf.com/blog, Billy Hoffmanhttp://zoompf.com/blog http://developer.yahoo.com/performance/ Yahoo Performance Teamhttp://developer.yahoo.com/performance/ http://velocityconf.com, Conference about performance => Velocity (awesome slides + videos for free…)http://velocityconf.com TheOpsMgr Blog - http://theopsmgr.seriticonsulting.com/http://theopsmgr.seriticonsulting.com/ UK Broadband stats - http://www.broadbandspeedchecker.co.uk/speed_ratings.aspx http://www.broadbandspeedchecker.co.uk/speed_ratings.aspx Browser Usage Stats - http://www.w3counter.com/globalstats.phphttp://www.w3counter.com/globalstats.php http://www.webperformancetoday.com/2010/06/15/everything-you-wanted- to-know-about-web-performance/, More stats about impact of Web Performancehttp://www.webperformancetoday.com/2010/06/15/everything-you-wanted- to-know-about-web-performance/

28 Web Performance Group @ Meetup 28 ?

29 Web Performance Group @ Meetup 29 Last words Please review the Meetup on Meetup.com Next Meetup => Thursday, Oktober 6 th 2011


Download ppt "Web Performance Meetup 1 Web Performance 101 Jeremy"

Similar presentations


Ads by Google