Page Speed Metrics

FullStory captures page speed metrics alongside each recorded session. FullStory emphasizes three key, industry-standard metrics that you can reference to understand how fast pages loaded within a customer's session.

Which page speed metrics does FullStory capture?

Within the Events stream for any session playback, FullStory will show three key metrics for each visited page:

direct_1532457352635-pagespeedMetric.png

First Meaningful Paint (FMP)

The First Meaningful Paint event relates to the moment when the biggest "above-the-fold" layout change has happened and when web fonts have loaded.

Here at FullStory, we believe that this metric relates most closely to a user's experience in terms of perceiving a page to be "loaded" and we use FMP as our own benchmark for page speed.  

Specifically, this event fires when the browser has rendered any text, image (including background images), non-white canvas, or SVG, and it marks the moment at which users can start consuming content on a page.

Note: FMP excludes iframed content.

Improve FMP by optimizing your critical rendering path. This means being deliberate about how, when, and what in order the pages content loads. Because FMP is one of the earliest events in the overall page load, server and network timings may have a large impact on the timing of FMP. For example, a high Time to First Byte time will also result in a high FMP.

Read more about this metric in the Lighthouse developer docs.

DOMContentLoaded (DCL)

At a high level, DOMContentLoaded gives you a feel for how long it took for the HTML to load so that the page can start rendering content.

More specifically, the DOMContentLoaded fires when the initial HTML document has been loaded and parsed. Often this milestone occurs before stylesheets, images, and subframes finish loading, so the DOMContentLoaded event occurs before a page is done painting. 

Stylesheets, fonts, and JavaScript can block the DOM from being interactive and loaded, so optimize your stylesheets and use asynchronous JavaScript to help speed up this page speed metric. 

Read more about this metric in Mozilla's developer docs.

Page Load

The onload event or "Page Load" fires when the whole page and all of its dependent resources have finished loading.

Page Load often occurs later, after the point in time when the page is rendered and interactive for a user.

While the Page Load metric isn't as closely related to a customer's perceived performance of a page, it can be helpful to keep an eye on your Page Load time to understand how many assets are loading onto your page after First Meaningful Paint.

Read more about page load in Mozilla's developer docs.

Viewing the Network and the HAR File

Alongside the page speed metrics for each page loaded within a session, you can also view the Network for more details or download the HAR file that corresponds to the page.

direct_1532377460731-devToolsNetwork.jpg

The Network view allows you to analyze what happened during a page load. Learn more about using the Network view in FullStory

The HAR file can be super helpful to save as a record of the page load details for any given page within a session.

The HAR file is a standard format for viewing the assets that contribute to a page load in a "waterfall chart" view. The HAR file downloads in a .json / .har format and it includes detailed request timings, DNS information, asset sizes, and server connection details. Outside of FullStory, you can visualize .har files with Chrome Dev Tools (just drag the file into an empty Network tab in your browser!) or Google's HAR Analyzer tool

 

How do I search for sessions with slow pages?

Besides being able to view the page speed metrics within the Events stream during session playback, FullStory also allows you to search for sessions with slow pages in OmniSearch.

There are two ways to search for sessions with slow pages. You can either:

Search for slow pages using OmniSearch

To start a new search, click the OmniSearch bar and look for the "Page load" criteria under Performance.

direct_1532457363626-omnisearchPerformance.png

Click "Page Load" to start a new search with the Page Load criteria. 

Next, use the dropdown menu to select which metric you'd like to search for: First Meaningful Paint, DOMContentLoaded, or Page Load. 

direct_1532457371570-dropdownMenu.png

Then, update the criteria to look for sessions when a page was greater than a specific number of seconds.

direct_1532457382857-eventfilters.png

Note: you can also stack together multiple criteria to look for pages that load within a range of speed.

direct_1532457390143-multicriteria.png

Bootstrap a search for slow page loads from page speed metrics

From any page within any session, you can click any of the page speed metrics to open the "Add to Search" and "Create new Search" options. 

direct_1532458316149-bootstrap.png

 

Clicking either of these options will add the criteria for that specific page speed metric to your existing search or a new search, and it will also bring in the timing related to the page load from the session, too.

This method of starting a search is particularly useful if you see something suspicious during a session and want to quickly understand, "How any other customers saw sessions where pages loaded similarly to this page load?"

direct_1532457371570-dropdownMenu.png

 

Need to get in touch with us?

The FullStory Team awaits your every question.

Contact us