Browser Best Practice Guide
New Relic Browser is your first, best step in understanding the impact of your site performance on your customers. If you are looking to improve your customer experience, Browser will help you do that with AJAX insights, SPA support, and tools to help you untangle JS Errors.
We want to empower you and your team to have more insight into each of your applications and, more importantly, know exactly what you need to do to improve their performance.
You may want to start by reviewing these short videos to help you get the lay of the land. Then, in this post, we aim to help you set yourself up for success.
When you have reviewed these best practices, show off your new found skills. Take the Browser Best Practices Quiz to earn your badge.
Create a naming convention:
When several different applications are on the same account, and each application spans multiple environments (for example, development, test, pre-production, production), it can be hard to find a specific application in your overview dashboard. That’s why we recommend that you establish a naming convention for all your apps to help with search and filtering. Using a convention like
<environment>-<appname>-<language> can make it much easier to spot patterns in your data.
Linking APM and Browser apps:
Browser apps that are set up either through APM App Auto-Instrumentation, or manually through the copy/paste method with the Browser JS Snippet can be linked to an APM application, such that you can see your frontend performance statistics in relation to your backend. This is important because a problem in front-end performance may be caused by a back-end issue. By linking apps, you get end-to-end visibility. Through APM Apps you simply need to enable auto-instrumentation. For the copy/paste method you’ll need to select the related APM app in the set up page. Then from either APM or Browser overview page, simply click the linkage button above the response time chart to jump to the back/frontend.
Understanding your data
Understand your visitors with Session Traces:
Every user visit to your site is tracked as a Session, and Browser captures some of those as detailed Session Traces. Session Traces provide a detailed timeline of events, for up to ten minutes, allowing you to see what happened just before and after an error, for example, helping you to solve the problem faster with context.
Track AJAX requests:
New Relic Browser tracks AJAX requests in your webpage in order to help you in identifying slow calls to external endpoints. This is helpful in troubleshooting slow performance, as you can easily see if a call to a particular 3rd party is responding slowly, telling you at a glance whether or not the issue lies in your site, or with the 3rd party your site calls.
By default, New Relic will analyse the Browser page view metrics as they are received. Grouping them into formats like:
www.foo.com/users/*/profile This groups all profile pages into one metric, rather than filling your account with a new metric for every unique user ID. Segment whitelists allow you to configure the URL paths you need to see. For example if you see
users/*, but your site has a path
users/edit, you can set up a segment whitelist for
Making that data actionable
Userful Browser NRQL queries:
Insights brings all your data together in one place. NRQL gives you the power to ask the important questions of your data. For example, you can find your slowest, or most frequently visited pages. The Level-Up posts below will provide you with dashboards you can easily set up to start getting the best from your Browser data.
- Insights Dashboard for Browser: Part 1 - Users
- Insights Dashboard for Browser: Part 2 - JS Errors
- Insights Dashboard for Browser: Part 3 - Ajax Request
Ready to learn more
Looking for more Browser best practices and tips? Check out the Browser Level Up category.