Web Performance Meetup 1 Web Performance 101 Jeremy

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

Web Performance Meetup 3 What is performance for the JavaScript folks… Stoyan Stefanov, JSMentors

Web Performance Meetup 4 What means slow Pain = slow, Study form User Interface Engineering More on that at… performance/

Web Performance 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

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

Web Performance Meetup 7 Money Performance?

Web Performance Meetup 8

Web Performance Meetup 9

Web Performance Meetup 10

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

Web Performance 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

Web Performance Meetup 13 What MS did.. Artificial 1s delay = 2.8% reduction in revenue/user (Bing)

Web Performance Meetup 14 What Google did…

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

Web Performance Meetup 16 The Building Blocks of #WebPerf

Web Performance Meetup 17 Follow the Rules!

Web Performance 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

Web Performance 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

Web Performance Meetup 20 What is important?! Reduce Page Size (<500Kb) Enable (Gzip) Compression, even behind Proxies, il/ il/14334 Reduce the number of roundtrips (<40 per page…) Structure the page (to improve render & download) –CSS First –Javascript last Lossy Images, optimizations-images/ optimizations-images/ Cache, Cache, Cache

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

Web Performance Meetup 22 Toolbelt

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

Web Performance Meetup 24 Check first Analysis the waterfall graph –Look for render start time –Script blocking –# objects, Headers –Not Gzipd –No Expires or Cache Control Headers –2 seconds Keep-Alive??

Web Performance Meetup 25 Online WebPageTest.org, Showslow, Pagespeed Online, Smush It (image analysis) Browsermob, HTTP Archive, GTMetrix - Yottaa - RedBot (cache analysis),

Web Performance Meetup 26 Out of the box Google Mod_pagespeed - module.html Aptimize – Webo - speedup/ Strangeloop - Blaze IO - DSA Dynamic Site Acceleration – Cotendo, Akamai, Limelight, CDNetworks etc

Web Performance Meetup 27 Reference Steve Souders blog, Stoyan Stefanovhttp:// WebPerformanceToday, Performance Planet (WebPerf Blogs) - Sergey Chernvshev, Billy Hoffmanhttp://zoompf.com/blog Yahoo Performance Teamhttp://developer.yahoo.com/performance/ Conference about performance => Velocity (awesome slides + videos for free…) TheOpsMgr Blog - UK Broadband stats Browser Usage Stats to-know-about-web-performance/, More stats about impact of Web Performancehttp:// to-know-about-web-performance/

Web Performance Meetup 28 ?

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