• Save
Making your Website Faster
Upcoming SlideShare
Loading in...5
×
 

Making your Website Faster

on

  • 797 views

"What is fast and how much faster can we be?". Many typical industry leading sites can be sped up by up to 2 seconds following easy to implement best practices. 2 seconds that make a huge difference ...

"What is fast and how much faster can we be?". Many typical industry leading sites can be sped up by up to 2 seconds following easy to implement best practices. 2 seconds that make a huge difference in the competitive advantage.

In this tutorial we dig into "How the Web Works under the Hood", "What's going on in the Browser" and "How your Coding affects Load Time, Rendering Behavior and Page Interactivity". After digging into the architecture we look at "Key Web Performance Metrics", their importance and how to track and optimize them. We look at good and bad example web sites to learn how to best optimize our end-user perceived performance using free available tools for the major browsers.

Once optimized it is important to stay optimized. Automating performance anlysis is no rocket science. We learn how to implement an automated performance analysis environment to identify new problems as they appear

Key Takeaways

What are the top problems that make websites slow?
Which tools can I use to analyze my web site in different browsers?
What are some of the techniques to speed up my web site?

Presented by Andi Grabner, Technology Strategist, dynaTrace-Compuware Center of Excellence, at the QCon Conference, March 2011

Statistics

Views

Total Views
797
Views on SlideShare
797
Embed Views
0

Actions

Likes
3
Downloads
0
Comments
0

0 Embeds 0

No embeds

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

Making your Website Faster Making your Website Faster Presentation Transcript

  • Making Your WebSite FasterTutorial @ QCon 2011
  • Agenda• Tool Landscape• Web 2.0 Basics• Top Problems that make pages slow• What can I do to optimize my page• Automation
  • Browser Extensions• Internet Explorer • dynaTrace AJAX Edition • IE Developer Tools• Firefox • 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
  • The Web 2.0 Basics Datavolume Latency JavaScript DOM NetworkRendering AJAX/XHR Browser Calls Server Layouting 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 timeMore: 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 limitsMore: 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 Event handlers get when fully loaded executed by the browser JavaScript gets executedMore: 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 Serverside Server providing Data Cache Caching Information Cache per Client Server Proxy Cache Clients for Many Clients
  • 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 Resource Not Changed Browser Server 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 … * Combine with E-Tag for max-age:10 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 PurePathSee who calls itFilter onDOM 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 contentMore: 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 serverMore: 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
  • Analyze Performance across Builds
  • Integrate into CI• Automate Alerting on Regressions
  • Download the latest Application Performance almanac:Web | Cloud | DevOps | Mobile | Automation | Tuningwww.dynatrace.com/almanac
  • 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