How to measure Jamstack application performance

At some point, all developers need to start monitoring their site performance. No matter what architecture you’re using, what matters is that your app is performing well for your users. On average if a website takes 3 seconds or longer to load, your end users will abandon your website. Sometimes that's not even long enough to open a new browser window. Amazon found that every 100ms of latency cost 1% in sales.

If you’re using Jamstack, a popular architecture for large sites for better security, performance, and scale, you’ve got a lot of moving parts. Performance is probably a main reason you chose Jamstack in the first place. But the longer your website takes to load, the more people are likely to leave it.

So what do you need to monitor? How often should you be checking these things? And most importantly, how can you find issues before they arise? 

This blog post walks through how to measure performance for a Jamstack application. To follow along, you need the following tools to use with your Jamstack application:

• Netlify, to automate the deployment process.
• Eleventy.js, to automate building the website pages (but you can use any static site generator that works with Jamstack sites).
• The browser monitoring agent, to monitor your web application as each page is being built. 

Deploying a Jamstack application

Jamstack refers to JavaScript, APIs, and markup and allows you to serve pre-built files over a content delivery network (CDN). Most Jamstack applications use Netlify, or similar platforms, to automate the process of deploying.

In this tutorial, you learn how to set up an application on Netlify. This allows you to store your API credentials outside of your application source, and simplify your deployments. Then you learn how to measure your application traffic and how to detect and record client-side JavaScript errors.

Step 1: Set up the web application

1. Go to our repo at https://github.com/therelicans/newsjam.

2. Under Setup, select the Deploy to Netlify button.

3. Connect your GitHub account to Netlify by selecting the following button:

4. Get an API key from newsapi.org and include your API key in the box below the newsjam repo name. Then select Save & Deploy:

Voila! Less than one minute later, you can go to yourappname.netlify.app and should see your news feed. (In an upcoming step, we’ll come back to this page.)

Step 2: Install the browser monitoring agent and add code to measure your app

The New Relic One browser monitoring agent is a snippet of code that monitors your web application while each page is being built. The agent measures how long each webpage takes to build, and reports back to your dashboard in real time. It also shows global load times for accessing across all regions. The agent provides information about where delays are occurring, all the way down to their source. You can identify which code is causing the longer load time. 

In this section, you learn how to monitor your organic user interactions and how to generate simulated traffic using synthetic monitoring. You can automate testing and identify problems before your users do. You have several types of synthetics to choose from in New Relic. In this tutorial, we show how to use the simple browser to simulate a user visiting a page and generating traffic.

1. Install the browser monitoring agent in your application.

• If you aren’t already using New Relic One, sign up for a forever-free account.
   
• On the New Relic installation page, select Monitor applications.
   
• At the end of the page, select See all installation options.
   
• Under Browser metrics, select New Relic Browser:

• On the Get started with New Relic Browser page, under Choose a deployment method, select Copy/Paste Javascript code:

• In the Configure your instrumentation section, keep the default settings.
   
• In the Name your app section, create a name for your application, and then under Instrument the agent, copy the code snippet:

2. Go back to Netlify and select Site settings:

• Then select Build & deploy > Post processing from the menu on the left:

• Under Snippet injection, select Add snippet.
   
• On the Insert before dropdown menu, select </head>:

• Fill out the script name, for example, New Relic Browser Instrumentation. Then paste in the code snippet you copied from New Relic Browser into the text box and select Save.

3. Now go to https://one.newrelic.com, hover over Synthetics, and select Create monitor.

• When you choose a monitor type, select the Simple Browser/Page load performance option.

• Under Create monitor, select your account number, if requested. Add the required details and change the Period value to one minute.

• Using the Select locations button, select the Public locations you want:

• To save your changes, select Save monitor. The summary page in New Relic is refreshed in a minute or two.

The following screenshot shows the summary page before you added the monitor (no data):

The following screenshot shows the summary page after you add the monitor (data from your web application is displayed):

Your setup steps are complete. Now you can clearly monitor your website. You see a dashboard of your website performance, including initial page load and route changes, front end versus back end page performance, and load times per user:

Step 3: Detect and record client-side JavaScript errors

With client-side instrumentation, you can check for JavaScript errors in the browser while your visitors are using your website. This means you can fix the errors before your users find and report them. Let’s look at how you can do this.

This section shows how to throw errors and confirm that each error is appearing on the dashboard.

1. Start by creating a JavaScript error on your web app:

• In your text editor, go to the base.njk file (src/includes/base.njk).
• Create a button within the header element: (get the code here in base.njk)
  <button id="errorTrigger">Button</button>

2. Next create an event listener to trigger an error on a button click.

• Add a script just before the ending body element: (get the code here in base.njk) and save. It should look like this:

3. Now, re-deploy your website on Netlify and cause an error by clicking on the button you just created:

Boom! You just created your first error!

In the following example, you can see we clicked on the button quite a few times:

When you select Save, you see an error like the one in our example in your web browser console. That’s no good, right? But you can find the error on the New Relic One Dashboard.

4. To find the JavaScript errors, first select your browser application in New Relic Explorer:

5. Then on the left side navigation, select JS errors.

Now you see all of the errors that you created. It should look like this:

As shown on the following summary page, you see many kinds of data from your web application that will help you find where the problem occurred. Equipped with this data, you can fix the problems right away.