UX Metrics for the Modern Web
The Web started as a relatively static medium. Websites had content that was mostly flat and rarely changed. Flash forward 20 years, the Web is filled with super-dynamic sites and applications. All of these applications are dynamic on the client side, as well as the server side. This shift—toward more and more dynamic applications that rely on personalized imagery and updates, customized content and loads of videos—has forced Web performance experts to create new ways to objectively measure the performance of an application or site. An understanding of these metrics is good, not only for Web performance experts and front-end coders but also for CMOs and others who count on good Web performance to close deals, win customers and keep users engaged. In this article, I'll run through some of the basic terms and their relevance in the world of dynamic websites.
Earlier generations of testing tools would simply start a timer, initiate the page load, and then stop the timer after the underlying Internet connection was disused. In the "Web 1.0" world, this was a sufficient test—the browser needed all the content in order to actually render the page and get that user happily "using." On the modern Web "2.0+," pages don't need everything in order to be actually functional. Secondary content and/or personalized content may be loaded asynchronously (for example, below-the-fold loading) even as the user engages with the application. Thus, Internet connection idleness is no reflection of user experience, and "fully loaded" has become less relevant.
The "document complete" event is fired in the browser when the document load is complete. Generally, this means that the page is visually complete and responsive to the user (user can search, scroll, click links, etc.). However, the browser may still be loading asynchronous content or analytics components. Even worse, some sites deliberately defer loading of prominent content until after "document complete." Another problem is that some types of Web performance tools (called "front-end optimization" packages) can defer execution of key page components until after "document complete." This can mean the page looks complete but, in reality, if a user clicks on links or tries to scroll, the site doesn't respond.