We are excited to introduce user experience monitoring for Rigor. User experience monitoring allows you to augment measuring the timing of browser events like page loads by measuring visual metrics about how the page is shown to a visitor. Specifically, Rigor now allows you to measure, alert, and trend on the Start Render time, Visually Complete time, and Speed Index for a web page. You can even download a collection of screenshots showing you exactly what a user would experience when viewing your site.
Let’s talk about these new metrics in more detail.
Understanding Start Render
Start Render is the amount of the time it takes until the the first piece of page content is drawn in the browser window. In other words, how long the user waits before they start to see any part of the page.
The benefits of start render are very apparent, as shown in the example below:
Here we see two pages, both of which have a load time of 4 seconds. However, the user experience of these pages is very different. Page A starts rendering content at 1 second, whereas Page B doesn’t draw any content until 3 seconds. Until that time, the user is looking at a blank white screen, wondering if the site is working or if they did something wrong. It is clear that Page B has a worse user experience than page A, and unless you are monitoring user experience metrics like the Start Render time, this poor experience would go unnoticed.
Understanding Visually Complete
Visually Complete is the amount of time it takes for the above the fold content to finish rendering. Visually Complete is a great metric since it specifically looks at above the fold content, which is all the content the user sees in their browser without scrolling. If the content the user is looking at loads quickly, the page feels fast, even if content below the fold is still being downloaded or if an event like
window.onload has yet to fire. A user can see all the content above the fold which means they can immediately start reading or looking for the item with which they want to interact.
Lets look at an example:
Here we see that both Page A and Page B started rendering at 1 second. But we can see that Page A is Visually Complete by 2 seconds. In this instance, the user can see all the above the fold content and nothing else is going to be loaded in or overlaid on top. Meanwhile Page B isn’t fully Visually Complete until 4 seconds.
Understanding Speed Index
We’ve seen that both when a page starts rendering and when a page has completed rendering above the fold content impact the user experience, and thus whether a user feels that a site is slow or fast. There is another metric, Speed Index, which also helps quantify the user’s experience.
Speed Index attempts to measure the rate at which page content appears. This is not as basic as a specific time, such as when a page starts or finishes rendering. But don’t worry. While the theory and math behind Speed Index is complex (I hope you remember Calculus!), Speed Index itself is pretty easy to understand with an example. Let’s dive in.
In this example, Page A and Page B both have an identical Start Render time of 1 second. They both have an identical Visually Complete time of 4 seconds. But look at how quickly content appears on each page. For Page A, content first appears at 1 second, and more content is steadily filled in, until the page is Visually Complete at 4 seconds. Compare that with Page B. Content first appears at 1 second, but then the page kind of stalls. Nothing new appears until the very end, when everything pops in at once.
Page A and Page B have the same Start Render time, and Visually Complete time, but Page A provides a drastically better user experience. Speed Index, through some rather complicated math, quantifies the user experience into a number. The Speed Index number, usually between 1,000 and 6,000 (lower is better) enables you to compare and rank what pages have a “better” user experience in terms of how quickly the content renders.
Screenshots of the Page Rendering
In addition to collecting metrics on the user experience, Rigor also now allows you to download screenshots of what the page looked like while it was loading. This enables you to understand exactly what was going on if your page had performance problems and identify additional ways to speed up your site.
For example, consider this capture of CNN.com loading:
CNN has largely finished loading their page by 7.79 seconds. Then, at 8.22 seconds, a big black box slides down and takes over a third of the screen. This black box stays there, with no content, an entire second. At 9.19 seconds, some content for an ad begins to display, but it is not until over a half a second later, at 9.75 seconds, that the ad is rendered. It takes a full 1.5 seconds to display the ad, during which the user experience is significantly disrupted.
If CNN had been using Rigor Monitoring in pre-production they could have tested the performance impact of this ad on the user experience, identified ad providers that are causing a poor user experience, and proactively taken steps to address it.
Improving Your Numbers with Optimization
Since you can now use Rigor to measure your site’s Start Render time, Visually Complete time, and Speed Index, the next logical step is to make them faster! Luckily Rigor has your covered. Our Rigor Optimization product identifies 300 different performance issues that are slowing down your site, including those related to user experience metrics, such as unoptimized resources or unneeded requests that are delaying the rendering of your page.
Excited to see how your site is performing? Want to start tracking KPIs? See for yourself how Rigor can help you monitor improve your user experience. Sign up for your free trial today!
E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online. However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...Read More
Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design for an...Read More
Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...Read More
Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will...Read More