Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Making Your WebSite Faster Tutorial @ QCon 2011 Agenda • Tool Landscape • Web 2.0 Under the Hood • Top Problems that make pages slow • What I can do to optimize my page • Automation Browser Extensions • Internet Explorer • dynaTrace AJAX Edition • IE Developer Tools • Firefox • dynaTrace AJAX Edition • Firebug • YSlow and PageSpeed • Chrome • SpeedTracer • PageSpeed Network Analysis • Proxy Approach • HTTPWatch - http://www.httpwatch.com/ • Fiddler - http://www.fiddler2.com/fiddler2/ • Testing Services • webpagetest.org • Showslow.com Hands-On • Download and Install Tools Web 2.0 Under the Hood Latency DOM JavaScript Network Rendering Layouting Datavolume Browser AJAX/XHR Calls Server Caching Loading a Web Page Loading a Web Page – High Level KPIs • • • Page Characteristics • Number of Requests • Number of XHR Requests • Page Size Page Loading • First Impression • onLoad Time • Fully Loaded Network • • DNS, Connect, Network and Wait Time Client vs. Server • Time Spent in JavaScript vs. Server Download time More: https://community.dynatrace.com/community/display/PUB/Best+Practices+on+Web+Site+Performance+Optimization Loading a Web Page - Network Waterfall influenced by time of resource reference and connection limits More: https://community.dynatrace.com/community/display/PUB/Best+Practices+on+Network+Requests+and+Roundtrips Loading a Web Page - JavaScript • JavaScript gets executed • After a JavaScript file got loaded • When certain events trigger, e.g: onLoad, Mouse or Keyboard, Navigation, AJAX Completed, … Script gets executed when fully loaded Event handlers get executed by the browser JavaScript gets executed More: https://community.dynatrace.com/community/display/PUB/Best+Practices+on+JavaScript+and+AJAX+Performance Loading a Web Page - Rendering • Rendering happens mostly asynchronously • Rendering tasks get into a Queue • Browser processes the Queue • When certain objects get downloaded (HTML Document, Images, CSS) • When there is time • When it is necessary (somebody needs layout information) More: http://blog.dynatrace.com/2009/12/12/understanding-internet-explorer-rendering-behaviour/ Hands-On • Analyze Load Activities of www.weather.com #1 Problem – Overloaded Web Sites • Too many resources, • Unoptimizied content 13 #2 JavaScript Executions • Not optimized for specific browsers 14 #3 Caching • No Caching or Wrong usage of CDNs 15 #4 Slow External Content • Ads, Banners, Social Network Plugins, … 16 Proactive Performance Optimization • Leverage Browser Caching • Reduce Network Roundtrips • Optimize JavaScript • Optimize DOM Manipulations • Analyze external Content • Optimize AJAX Usage • Analyze Rendering Leverage Client-Side Caching • Instruct Browser and Proxy to Cache Content • To be used for static content • Enhance Browsing Experience for re-visiting users (Browser Cache) • Enhance Browsing Experience for users on same Proxy • Reduces Network Roundtrips • Reduces Bandwidth Requirements • Reduces load on server Server providing Caching Information Cache per Client Server Clients Proxy Cache for Many Clients Serverside Data Cache Leverage Browser Caching • HTTP Protocol defines Cache Headers • Date • defines the timestamp of the resource download • Expires • Defines how long this resource is valid • E-Tag • Uniquely identifies a resource • Cache-Control • Defines caching strategy • Last-Modified • Defines when the resource was last modified Leverage Browser Caching • E-Tag and Last-Modified Resource Changed Browser Server Resource Not Changed Browser Server If-Modified-Since If-Modified-Since If-None-Match If-None-Match 200 OK 304 Not Modified … we still have wait/DNS/connect/request/server time Leverage Browser Caching • max-age (Cache-Control) and Expires Browser Server GET … max-age:10 * Combine with E-Tag for even more performance No download for 10 seconds Leverage Browser Caching • Analyze HTTP Response Headers • Which resources are not cached at all • Which resources are not correctly cached (short expiration, exp in the past, …) Leverage Browser Caching • Use Content Delivery Networks (CDN) • E.g.: Akamai, … • Advantage • Brings content closer to the end-user • Disadvantage • Requires End User Monitoring Hands-On • Analyze Caching Behavior Reduce Network Roundtrips • # Requests increases Wait/Connect Time • Merge Resources • Use Spriting • Content Size increases Transfer/Wait Time • Minify Content • Compress Content • Payload vs. Markup Reduce Network Roundtrips • Merge Resources • Merge JavaScript and CSS Files • Use Sprites for Images - http://spriteme.org/ Reduce Network Roundtrips • Reduze Content Size • Optimize JavaScript Files -> http://code.google.com/closure/ • Use Styles in CSS files instead of inline Style definitions • Optimize CSS -> http://developer.yahoo.com/yui/compressor/css.html • „Smush“ Images -> www.smushit.com Hands-On • Analyze Network Roundtrips Optimize JavaScript • JavaScript Engine is the new Client Application Runtime • Engines get better with every browser version • Similar problems as on Server-Side • Too many calls • Excessive String concatination • Memory Leaks Optimize JavaScript • Identify Long Running Event Handlers • Look at PurePaths with long JS Execution Time Optimize JavaScript • Identify Hotspot Methods • Use Hotspots View to identify long running and often called methods Optimize JavaScript – Analyze in AJAX Edition Hands-On • Analyze JavaScript Executions Optimize DOM Manipulations • DOM Changes allow dynamic modification of the page, e.g.: • Popup menus when moving the mouse over • Load additional content dynamically through AJAX and display • Highlight table rows you move the mouse over • Display input verification errors, e.g: incorrect phone number format • DOM Changes can be very costly as it requires the browser to • recalculate the layout information • Repaint the page Optimize DOM Manipulations • Analyze DOM Manipulations • Search for DOM Activities and backtrace to the caller • Drill to Browser PurePath See who calls it Filter on DOM API Hands-On • Analyze DOM Manipulations Analyze external Content • Use Timeline to see download times of external content • Also analyze JavaScript executions of external content • Action: Delay Load external content More: http://blog.dynatrace.com/2010/08/12/ajax-best-practices-reduce-and-aggregate-similar-xhr-calls/ Optimize AJAX Usage • AJAX is great to load dynamic content • Too many AJAX Calls put pressure on network and server More: http://blog.dynatrace.com/2010/08/12/ajax-best-practices-reduce-and-aggregate-similar-xhr-calls/ Hands-On • Analyze usage of AJAX Analyze Rendering • Analyze Rendering Activities • There is expected rendering (drawing images, initial layouting, …) • There is dynamic rendering when modifying the DOM • Identify what triggers Rendering and where it happens Analyze Rendering • Rendering Hotspots • Which JavaScript/DOM Calls trigger Rendering activities Tips & Tricks • Clear Browser Cache when Testing Load Time • Different load behavior depending on Network Time • Test in different browsers • IE 6, 7 & 8 have different behavior • Use IE Compatibility Mode • Use WinXP Mode in Win7 or any other virtualized environment • Test from different Locations • www.webpagetest.org to test sites from around the world (including dynaTrace Session Tracking) How to automate web performance • Integrate with your Testing Framework • Selenium, WebDriver, Silk, QTP, … • Browser Extensions record activity during test • Data can be sent to a result repository, e.g.: showslow.org Hands-On • A simple test with Selenium and WebDriver • http://seleniumhq.org/ Analyze Performance across Builds Integrate into CI • Automate Alerting on Regressions Additional Resources • Steve Souders • www.stevesouders.org • And his two books on Web Site Performance • Best Practices • http://developer.yahoo.com/performance/rules.html • http://code.google.com/speed/page-speed/docs/rules_intro.html • https://community.dynatrace.com/community/display/PUB/Best+Practice s+on+Web+Site+Performance+Optimization • Blogs • blog.dynatrace.com • www.ajaxian.com • www.dzone.com – AJAX and Web 2.0 Tags … and while you are here, bag yourself: Web 2.0 Visit dynaTrace booth