HAR Diff
GTmetrix uses Jan Odvarko's HAR Viewer to give our users a way to visualize page loads via elegant waterfall graphs. Today, we're happy to announce HAR Diff, an add-on we wrote for HAR Viewer to allow the comparison of 2 waterfall graphs side-by-side!
Compare two sites and try it for yourself or take a look at our sample comparison comparing Slashdot from our Vancouver, Canada and Sydney, Australia test regions.
Differences in loading elements are classified by colours:
Color key:
- White: The resource status, size, or timings haven't changed significantly (small timing changes are ignored).
- Orange: The resource status, size, or timings have changed. Bolded orange text indiciates what has changed.
- Green: The resource was added in the second waterfall.
- Red: The resource was missing in the second waterfall.
- Blue: The resource is present in both waterfalls, but was loaded in a different order.
You can enlarge the HAR Diff by clicking on "View Larger Version", or open it in a new window to view the waterfalls in a full window.
We have submitted some patches to the HAR Viewer project (which have already been accepted) and will be releasing the rest of the HAR Diff code soon, so you can also add HAR Diffs to your project!
New Test Server Regions
We're pleased to announce new test server regions to analyze your URLs. In addition to our main Vancouver test region, you can now test your URL in Dallas, London or Sydney. Like the other test options, log in to access this new functionality.
Once in a report, you can compare the URL's performance to another region (using the same page settings).
A comparison will be generated with the 2 reports.
You can also change the default Test Server Region in your User Settings on the Dashboard. GTmetrix will use this selection whenever you analyze a new page.
Performance History graphs improvements
In this round of updates, we've added 2 major features to GTmetrix and fixed some bugs.
Complete History Viewing
Previously, you could only view the last 30 days of your reports in the "History" tab. We've now made it so you can view your entire report history. Some new UI elements are added to facilitate that process:
This is the date range selector. Click on the calendar to select the start date and end date of your range, and the graphs will regenerate to display all the reports within that range.
This is the zoom panel. You can select how close you would like to see your range of reports. From 1 day, to 1 year, to All. When zoomed in, you are also able to pan left and right using the arrows.
Another way to zoom is to click and drag a range on your graph. You'll zoom in on your defined range; use the Pan arrows to move left and right.
Averaged graph points
When there are several reports in close proximity within a range, they are averaged into a single point. You can zoom into that range by clicking on the "Zoom in" option in the tooltip.
Annotations
You can now add notes and comments on your graph to help track changes.
In the History tab, click on the "Add Note" button, then move the cursor over the graph. You'll notice the pointer replaced with a crosshair. Click where you want to add the note. After a note has been added, it is indicated at the top of the graph with a speech bubble and a vertical blue line.
Bug Fixes
- Report data points are now aligned vertically across graphs
- Report times displayed on tooltip now correspond to the reports
Added Session Cookies and IPv6 support
Advanced users can now analyze logged-in pages (like Facebook profiles) by specifying cookies. This will simulate a logged in session and generate a GTmetrix report for that page. Read more in the FAQ
GTmetrix can now analyze IPv6 enabled websites:
http://gtmetrix.com/reports/ipv6.gossamer-threads.com/475PwjAb
Let's make the future of the web faster, too. Test your IPv6 enabled site today!
Added HTTP Authentication support
Page that are protected using an authentication mechanism (eg. Apache's htpasswd) can now be analyzed using GTmetrix! Just enter the username and password in the Advanced Options box and analyze the page as usual. Read more in the FAQ
New "History" Tab and Waterfall Graph Functionality
In this latest update, we've made some changes to the Breakdown section of the reports page to allow for a more streamlined user experience.
Changes Overview
- The "Performance History" tab and "Report History" tab have been combined under a new tab called "History"
- A new tab has been added called "Timeline." This contains tab contains the waterfall graph.
The new "History" tab
The "History" tab contains all of the graphs that were previously under the "Performance History" tab. We've added tool tips to the nodes that allow you to:
- View the highlighted report (if you're not already viewing it)
- Compare the highlighted report to the currently viewed report
- Delete the highlighted report
This provides our users with a more visual way of keeping track of past reports.
The new "Timeline" tab
GTmetrix now generates a waterfall graph for each report. You can easily see how your site elements load and troubleshoot any problem areas that you may see. You can view a full version of the graph by clicking "View Larger Version" on the top right-hand corner of the graph.
Read more about how to read waterfall graphs here.