Visual Metrics Alone Paint Only Half The Picture

Measuring and optimizing for user experience is the future of web performance. Existing metrics like DOM Content Loaded and Onload Time are giving way to user-centric metrics such as visual timings and user timings.

But do they ‘paint’ the whole picture?

The older metrics and methods provide some useful insight, but to better serve users on the modern web we have to start looking at page ‘interactivity’. Interactivity metrics can provide insight and uncover blind spots not yet realized and are a valuable addition to your metrics arsenal.

Let’s explore further.

 

The Importance of Engagement and Interactivity Metrics

In the simplest terms, interactivity is a measurement of the readiness of your browser to serve the desired content and the ability of a user to take that desired action on your site.

Visual metrics, like Time to First Paint, can provide insight into how and when content initially appears on a site, however that’s only part of the story.

Visual metrics will tell you when something appears, for example a user could see a “add to cart” button appear on the page. However, if the browser is busy doing other tasks such as, downloading files, parsing JavaScript, or rendering other parts of the page, it is possible that the user could “click” on that button, but nothing would happen.

The missing dimension here is evidenced by the delay between the appearance of the content and the browsers readiness to function as requested by the users interaction. Well optimized sites allow users to quickly interact with them. Interactivity timings were designed to help performance professionals optimize for this delta.

By looking at the time at which a user was able to interact with a page combined with other valuable visual metrics a more complete picture emerges, telling a much more powerful and insightful story.

 

Introducing First Interactive Metrics

At Rigor, we not only understand the importance of visual metrics but we are just as focused on metrics that add additional dimensions and value to the user experience picture.

Our recently released metric “First Interactive Time” works in conjunction with visual metrics to help customers capture, measure and optimize yet another aspect of the user experience.

 

First Interactive Metrics In Action

In the scenario below, we’ve used the Rigor Digital Experience Lifecycle Management platform to help illustrate the value of the new First Interactive dimension and the insights that you can glean to help you better optimize your users digital experiences with your sites.

To better illustrate the value and understand the added dimension that an interactive metric provides, we’ll explore a situational scenario through the lens of visual metrics only, surface questionable blind spots and identify the best path forward.

Scenario: Through the Lens of Visual Metrics Alone

Emily is the VP of Engineering for UGG, an American footwear and activewear retail company. Working in collaboration with the VP of Commerce, Emily’s team has been tasked with holiday readiness and optimizing the mobile site for performance ahead of the anticipated Black Friday and Cyber Five spikes in volume.

User Experience Metrics Ugg Homepage
UGG Website Homepage
UGG Product Page
UGG Product Page

Emily understands that performance metrics are closely tied to checkout rates and cart size, so she has started monitoring her site for performance.

As expected, Emily monitors visual metrics like the Start Render time (when page content first appears on the screen) and Visually Complete time (when all the above the fold content appears).

Visual metrics are important because they provide clear insight into the user experience that ensures the product images appear quickly on the page. Additionally, she monitors all the “Add to Cart” and “Select A Color and Size” buttons to make sure they are all appearing quickly as well, to make it easy for visitors to become customers.

Leveraging a digital performance solution like Rigor, Emily may monitor key performance metrics with a view like this:

UGG Rigor Performance Metrics
UGG Metrics In Rigor

From this view, we can see that Emily’s site is loading relatively quickly.

A 66 ms Start Render time indicates shoppers will quickly see the desired products and is considered fairly optimal and performant.

To see when a specific “Select A Color And Size” button appears, Emily may access a video recording or filmstrip of the user experience, illustrating exactly how the page progressively draws in content from the perspective of the visitor.

In the view below, we can see that at 659 ms, the button to select the product actually appears on the page.

UGG Rigor Time To First Paint
UGG Product Page Viewed via Rigor Filmstrip

Aligned with her baseline timings, in this scenario, Emily is thrilled to see her page performant to her expectations. The page is loading quickly, her content is rapidly shown to the user and the “Select A Color and Size” button readily appears on the page.

Through the lens of visual metrics only, this is a success story… or is it?!

The Missing Dimension Is Key

While it’s certainly important to track visual metrics, what Emily has been directed to do is optimize the shoppers user experience to maximize potential revenue generated from the site.  While serving content quickly contributes to an excellent digital experience, ultimately they must click the button in order to continue with the purchase of the product.

To accomplish this, two things must exist:

  1. The button must be visible on the screen (for the user to click)
  2. The browser must be available enough to respond (to serve desired function or content)

If the browser is busy doing other things, such as running a large JavaScript framework, processing CSS or loading a several images, it is possible it will not be able to react to a visitors click in a timely manner.

This is where “interactive metrics” are key!

Interactive metrics are designed to measure how “busy” or “available” the web browser is while the page is loading.

Specifically, we can measure the First Interactive Time, which is the estimated time when the browser is idle enough to be able to respond to a visitor’s action.

 


To learn more about Rigor’s First Interactive Time metric and how it can measure the availability of a browser, visit the knowledge base.


Investigating Your Performance Blind Spots

Understanding the value of interactive metrics and how they work together with visual metrics is key to understanding and investigating potential blind spots.

Returning to our original scenario, we can now see that Emily has a significant blind spot.

She is only looking at how quickly the content on the page is appearing. However, just because the “Select A Size and Color” button appears does not guarantee that the site will respond if the user clicks it.

Sure enough, in the screenshot below, we can see the First Interactive Time does not actually occur until 2.596 seconds.

Web Performance Metrics
UGG First Interactive Time in Rigor

This blind spot represents a nearly 2-second delta between the time it takes the page to render and when the browser was actually functional.

Now think about the user experience of this scenario from the lens of a visitor.  The shopper sees compelling content loading and is ready to act. When they click the “Select A Color And Size” button, nothing happens.

Is the link broken? Is the site down?  Did the visitor do something wrong?

They don’t know.

And as a result, they are left confused, frustrated and more likely to bounce off the page and perhaps leave the site.

This window of “they can see it but they can’t interact with it” starts when the desired content appears and ends when the First Interactive Time occurs.

For Emily, we can see that this time is 2.596 seconds.

UGG User Experience Video
UGG First Interactive Time

As performance benchmarks go, 1.937 seconds is a significant delay in which the user could think your link or site is broken because it will not respond.

Moreover, this insight may also lead to an interesting outcome that is supremely counterintuitive.

If you have a site that draws content quickly, but has a slow First Interactive Time, you may actually see MORE bounces or cart abandonments than if your site took slightly longer to render but the browser was ‘available’ sooner.

The Key Takeaway: Minimizing the delta between the Start Render Time and First Interactive Time could be the key to optimizing your sites performance.

Combining the Power of Both Visual and Interactive Metrics

In the scenario above we showcased the power of combining insights from both visual and interactive metrics and how they apply to an e-commerce website. However, insights provided by First Interactive Time are industry agnostic and critical to understanding how any user experiences and interacts with your site.

Websites that include slide shows, interactive polls, blog subscription call-to-actions,  article comments, social media sharing buttons and login widgets can all be impacted by poor First Interactive Time measures.

If your website requires any interaction beyond basic hyperlinks or plain HTML forms, paying attention to interactivity metrics like First Interactive Time will provide you another critical dimension to trend and minimize performance degradation over time.

UGG Rigor Comparative Performance Metrics
Rigor Platform Comparative Metrics Overlay

New Dimensions, New Insights

Adding the First Interactive Time dimension to your current arsenal of web performance metrics can add immense value to your business and provide insights that may have otherwise gone unnoticed. Evaluating just one or two performance metrics in isolation can often result in blind spots and provide a false sense of security about about performant your site really is.

Combining visual timings, interactive timings and other web performance metrics together into a single dashboard will enable you to “paint” a more comprehensive and complete picture of the digital experience, while helping you minimize the bounce rates and cart abandonment risks that result from poor user experiences.

First Interactive Time is just one of the 33 front-end web performance and user experience dimensions that the Rigor Digital Experience Lifecycle Management platform captures and trends over time.

If you are interested in getting better insights into the responsiveness of your sites or to learn more how about how Rigor helps customers around the world find, fix, and prevent web performance issues, start your 7-Day Free Trial today.

Suggested Blog Posts

The Perception Gap for Poor Web Performance

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

Using Browser Trends to Maintain a Better Site

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...

Read More

Finding Causes of Intermittent Errors from Google Webmaster Tools

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

Optimization Options not Always Optimal

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