Website Performance Monitoring Using FullStory Dev Tools

Sponsored By FullStory

These days a website needs to load quickly. If it doesn’t, then there’s a strong chance users will abandon the site altogether. In fact, 40% of users are likely to navigate away from a page if it takes more than three seconds to load. A related statistic to this is that 47% of users feel a website should load in about two seconds. If users leave websites due to poor load speeds that is a loss of engagement and revenue. It pays to make sure a website loads in a swift manner.

GET YOUR WEBSITE UP TO SPEED

Loading a modern website with all the different components needed to build a page in two seconds is a no easy feat. That’s where performance monitoring comes in. When you use data to monitor a website’s performance, you can get an “under the hood” look at how your page is behaving. One way to monitor a website, whether it’s desktop or mobile, is to use FullStory’s Dev Tools. The Dev Tools contain a suite of features to monitor website performance. These features make monitoring a webpage’s performance easy. Other similar services tend to be filled with dry charts that can be confusing. FullStory Dev Tools contain animated graphs and a sleek UI. The ease-of-use of the performance monitoring software is important. Being able to efficiently understand the metrics of a website allows developers to make improvements quicker.

To increase load speeds, websites must load in components as they become available rather than wait for everything to be ready at once. Websites today are simply too large to wait for everything to render at once. When the different elements are loaded in there is a moment identified as First Meaningful Paint. This is the moment after the framework has been loaded but before the final page is rendered. Even though not every element has been rendered, it is the point in which users can start interacting with a website. For larger, “heavier” websites it is critical to reach First Meaningful Paint in a timely manner. What is loaded, and in what order, should be determined on a case-by-case basis. A fashion website is different from an eCommerce website and both of them are different from an HTML5-based online game. What remains consistent is the need to load websites in an order that lowers time to First Meaningful Paint and lowers the perceived latency for the website. If not, that will almost certainly increase the bounce rate. The bounce rate is the percentage of users who leave a website after visiting a single page. If the website does not load quickly, then it is likely the bounce rate will be high. FullStory Dev Tools can give you the insight to understand and identify problem areas of the page load so it can be sped up.

This all assumes the website has loaded correctly on a user’s desktop or mobile device. What happens if the website is in fact taking too long to load? FullStory Dev Tools’ Network Analysis View visually identifies areas of concern in a website, whether it’s unoptimized code, a large image, or 3rd party scripts. The Network Analysis View breaks down all the network requests from a website including fetching the CSS, fonts, scripts and making API calls.This is where you can see, in real time, where any potential bottlenecking is on a website. From there you can isolate the problem and come up with a solution to fix it.

Network analysis is a major factor in understanding why a website is not loading as fast as it could be. While the page load metrics tell you the speed of a page, they do not tell you where the problems exist. This is the function of the Network Analysis View in FullStory’s Dev Tools. The level of detail provided allows users to pinpoint areas of concern that need fixing.

Another major feature of FullStory Dev Tools is the console view. FullStory was first designed as a “website DVR.” It recorded users’ sessions and allowed developers to playback and view how users interacted with the website. In fact the new performancing monitoring tool was built on top of this session replay feature. This DVR-esque tool came with other features like heat maps. Now, in conjunction with FullStory’s Dev Tools and the pre-existing DVR, there is a Console View. Errors, stack traces, warnings, and other events are recorded in a fully organized and searchable log. It’s a well-documented way to find out the all errors in a website.

FullStory Dev Tools: Perfect Tool for Performance Monitoring

Page View tells the how. Network Analysis tells where. Console view tells the what. Between these three components of Dev Tools it is possible to manage and maintain a website so that it loads as quickly as possible.  

FIRST IMPRESSIONS MATTER

Perceived performance, or how fast the users think the page has loaded, is very crucial to user experience. Perceived performance isn’t something that can be strictly monitored or measured unlike First Meaningful Paint. However, perceived performance ties into the overall sense of how fast a website loads and how soon it can be interacted with. In monitoring all the various factors and implementing good coding practices to drive the page load time down, it should also reduce the perceived performance. This, in turn, will keep the conversion rate high and keep users engaged on the website.

How can all this affect a website? One real world way in which page metrics can be applied is through the conversion rate. The conversion rate is when users come to a website and then take a specific action. Maybe it’s filling out their email. Maybe it’s clicking on a specific link. Maybe it’s buying a certain product. In any case, a website’s conversion rate is one way to tell that users are actually engaged in a website. In this case study from FullStory, they used their own website as an experiment. They were able to affect the conversion rate by monitoring and improving the speed of a certain page on their website. FullStory noticed mobile customers weren’t using the site as much as desktop users. They identified this problem via Dev Tools. Once they fixed the problem their conversion rate improved!

Monitoring the page performance for a website can be complicated. It can take a lot of effort and dedication to get it right. The payoff is worth it though. The number one reason to pay attention to these metrics is because users are impatient. If a website does not load in those magical two seconds then they will navigate away from the page. That means lost customers and lost potential revenue. That isn’t good for any sort of website, no matter what the content is. The entire internet ecosystem is built on clicks and page views. If no one is viewing the page, or they’re abandoning it before it loads, then it means a website is not as successful as it could be. With FullStory’s Dev Tools there is a complete software package available to fully analyze a website’s performance. These tools should assist in creating the fastest, best performing websites on the Internet.

Harrison Flatau

Philadelphia, PA
Education: BA in Writing from Ithaca College

Harrison Flatau is a writer based out of the greater Philadelphia area. He has a keen interest in learning about every facet of modern technology.

Sponsored By FullStory

Software Weekly

Software Weekly

Subscribe to Software Weekly, a curated weekly newsletter featuring the best and newest from the software engineering community.