APM Is Not Enough: Don’t Forget Frontend Monitoring

From Black Friday to Cyber Monday and beyond, websites are becoming the face of your business. That means it’s now more crucial than ever to measure and understand how the entire technology stack contributes to delivering a great digital customer experience. All the way from the browser through backend application services and infrastructure, every piece of the stack has to work together for optimum performance.

While the traditional focus has been on gaining insight into the performance of server-side applications and infrastructure, an estimated 80% of page load time now occurs in the browser. Capturing a holistic understanding of performance from the frontend through the backend application services is critical to knowing—and efficiently optimizing—what really matters for your customers.

Frontend customer experience is now an imperative

Imagine a brick-and-mortar retailer with its warehousing operations in full swing, ready to fulfill orders at a moment’s notice. Sounds good, right? But what if the business’ front door is locked, and potential shoppers have a hard time time entering? Or what if all the salespeople are on break, and shoppers struggle to find someone to ring up their purchase? Just how long do you think customers will wait to get in the door or complete their transactions?

This analogy may seem farfetched. However, for online businesses without proper frontend monitoring, the digital equivalent of these scenarios can be a troublesome reality. Regardless of industry, frontend monitoring is now a key component to any online business’ full understanding of their customer experience, what’s standing in the way of users completing their transactions, and removing those obstacles.

The frontend is challenging

However, the frontend of web applications are more complex than ever. The average webpage now tops 3MB in page weight and calls more than 100 resources with each user click. Add in constant updates, ever-changing technology frameworks, and vast numbers of users coming in from a wide variety of different browsers, devices, ISPs, and locations, and optimizing the frontend becomes an increasingly tricky balancing act. Amidst these challenges, developers must still keep the user engaged with fast, available, and functional websites that consistently offer new and enticing content.

Let’s take a look at what’s involved. Retailers frequently change their promotions on a daily basis. Media sites constantly add and update their content, including fast-changing pre-roll ads. Site components like images or third-party services or plug-ins must be constantly updated, and every external service dependency can affect performance in hard-to-detect ways beyond the developer’s control. Frontend developers also have to consider browser complexity across desktop and mobile platforms, third-party ads and trackers, the geographical distribution of their user base, and the turnover of single page application (SPA) frameworks.

The importance of frontend monitoring

The three pillars of a great digital customer experience are

1. Availability (is my website up?)
2. Functionality (do all my site assets function as planned?)
3. Speed (is my website fast?)

Frontend developers need the right tools to understand all three of these elements. At a glance, developers should be able to understand how all their individual site components work to create speedy or sub-optimal experiences, and then begin to immediately triage the problems to focus on the issues that make the biggest difference to users.

Availability: Monitoring actual users in the browser or mobile app can reveal whether your customers are engaging with your site in real time, revealing issues you may need to troubleshoot.

Functionality: Errors in the browser or mobile app may not be captured in server logs, so you need to monitor frontend exceptions by name, website frequency, browser or mobile device, and other key attributes.

Speed: To identify bottlenecks, you need to monitor page load times and set frontend Apdex thresholds to match the responsiveness your customer base expects. The time it takes to load bloated web pages and execute JavaScript should be also be tracked, including third-party assets and code.

How New Relic Browser customers benefit

With so much at stake, frontend monitoring of your web applications and websites has to be an integral part of optimizing your organization’s digital customer experience. In fact, many New Relic customers are finding that New Relic Browser is essential to getting the visibility they need.

For example, American Eagle Outfitters faced significant site issues early on Cyber Monday of 2016. Through the use of the entire New Relic platform—including New Relic Browser—AEO was able to isolate the issues to its Java virtual servers and quickly make the required configuration changes to resolve the problem. Using New Relic, the company was able to visualize the impact to each of its business units in real time, making a big difference when the stakes were at their highest.

Similarly, REI requires continuous visibility into its web and mobile website and mobile user experience. Prioritizing speed, the REI team focuses on image optimization and reducing inefficiencies around DOM processing, and third-party domains loading specific JavaScript components. Combining New Relic Browser and New Relic Mobile, REI was able to speed up its sites by 20%!

Any way you slice it, frontend monitoring is an essential component of a digital business’ efforts to gain the actionable, full-stack visibility required to understand and optimize the things that matter most to customers.