Here at Adactus we’re quite into web performance, after all we’re official Site Confidence partners and members of the performance alliance group in the UK.
Most of our development team are aware of some of the tools to hand such as Yahoo’s YSlow and Google’s PageSpeed add-ons for FireBug but after a recent training session with web performance evangelist Stephen Thair we decided to share some of the lessons learnt with the rest of the team.
One tool Stephen introduced us to was dynaTrace AJAX Edition which records your user journey through out a website and gives full performance analysis helping you tune your pages.
The idea of this blog post is to introduce you to dynaTrace application and give a gentle introduction to the analysis available – what makes this tool so good is its ease of use and the external web links provided to help you investigate potential performance bottle necks in your web app.
User Journey
Recording a user journey is straight forward and simple but before jumping straight in you first need to plan your route. When analysing websites and their performance it’s important to know your end users and the key journey points in your website. For example a generic ecommerce site would have a home page, category page, product page, profile login/registration, basket and checkout process.
By analysing your existing website statistics you can work out your key pages.
Once you’ve planned your journey open dynaTrace and click the FireFox icon near the top right – if it’s the first time you’ve run dynaTrace it’ll prompt you to create a new Run Configuration.
For this demo I’ve set the Name to Adactus Ltd and the URL to our web address.
Once done FireFox will open with the specified URL and it’s at this point your pre-planned site journey comes into action – browse your site to your planned journey and when complete close FireFox.
You’ll notice the Cockpit panel in dynaTrace will now list your journey:
Performance Report
If your familiar with YSlow you’ll instantly understand the Performance Report section.
It’s a great overview of the performance recorded during your user journey ranked from A (best / green) to F (worst / red) for the following sections:
- Summary
- Caching
- Network
- Server-Side
- JavaScript / AJAX
- Timeline
- Key Performance Indicators
The first bit of data you’ll see is the summary tab which provides a great overview of your site’s performance. First up is the speed rank which rates your site from A (great) to F (poor) in a set of pre-defined groups. If you’re familiar with YSlow you’ll feel instantly at home!
As already mentioned there are sub sections within the Performance Report, I’m not going to go into a lot of detail for these as they’re relatively self-explanatory and each tab has a useful link out to help decipher and interpret the results.
Caching
This tab will help identify any missing caching settings in your site.
For example the Adactus site was found to have five resources with no past date cache settings which the tool estimates a saving of 64.72kb in transfer and 1942.73ms download time.
Network
I see this as an overview to the number of HTTP calls with the more calls made the slower the site performance. For example we did a full performance report for one client who ended up with no less than 13 different CSS files and 7 JavaScript files creating a massive performance hit. If you ever find yourself in this situation look into minification and combing files (or give Adactus a call!).
Server-Side
By server side we mean the time to generate dynamic content which is typically database driven. There is a good top 10 article by dynaTrace listing the most common foibles experienced by websites:
http://blog.dynatrace.com/2010/06/15/top-10-performance-problems-taken-from-zappos-monster-and-co/
JavaScript / AJAX
Get a break down of your JavaScript calls and handlers – it’ll give you a breakdown of the call, the number of invocations and the total time in milliseconds.
Timeline
This is one of my favourite sections as it shows the time taken (in ms) for the page to render along with your computer’s CPU count. When completing your user journey the dynaTace application records every single page event be it mouse click, move, key events and more – these are all displayed in the timeline as shown in the example below. You can also drill into a specific section by clicking and dragging a time zone to investigate.
So what can we determine from the timeline?
- First up is the CPU counter – note this is based on your own personal computer – which is rated from the usual to 0 to 100%
- JavaScript shows the load time for specific resources and states the start time and duration to load and process
- Rendering is the canvas draw events on the web page along with the first render event the end user sees
- Network shows the external HTTP calls, i.e. Google Analytics or tracking tags etc
- Events shows the load event time, first impression and fully loaded times by simply hovering over the icons shown on the timeline
Another good feature is the ability to double click on a block to drill down into the specific event – dynaTrace have called this PurePaths which we’ll go into later.
KPI’s
This covers key performance indicators such as time to first impression (when the end user sees something on the web page), onLoad and fully loaded.
Timeline
This is similar to the timeline section covered above except it shows it for each page in your user journey.
PurePaths
There are two ways of getting to the PurePaths – first off you can double click an object or event in the timelines already discussed. Alternatively you can get a list of resources and their associated times by double clicking the PurePaths option in the Cockpit panel within the dynaTrace application.
Network
This report lists all the resources, whether the item was in the local cache, status, times, size [bytes] and more. It provides a great way of identifying slow resources or large scaled images on your site.
Hot Spots
This view shows the JavaScript and rending events from the browser and again dynaTrace allows you to drill down into a specific event by double clicking it.
For example if we double clicked the second event _default(*) the report will show you both the forward and backward traces. The back trace shows which JavaScript or DOM caused the browser to draw or alter the page layout helping you identify expensive layout calls. Another good feature is the applications ability to show you the code in question – perfect for performance overviews and suggestions.
Next Steps
Like I said, this is a quick blog overview but it’s worth trying out and reading the help sections on the dynaTrace community section.
You may know of some other tips and tricks, why not share them with us by posting your tips below.
It’s also worth following industry experts such as Stephen Thair and Joshua Bixby or your local performance group.
