Download Making Your WebSite Faster Tutorial @ QCon 2011

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