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
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:
- 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:
This section shows how to throw errors and confirm that each error is appearing on the dashboard.
- In your text editor, go to the
- Create a button within the header element: (get the code here in base.njk)
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.
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.
If you want to improve your website conversion rate, it’s time to take performance seriously. This is a huge part of why developers choose Jamstack in the first place. Think of it like this: increased performance equates to happier customers. Multiple studies have demonstrated that site speed affects conversion rate. Every second counts.
If you’re not already using New Relic One, sign up. Your free account includes 100 GB/month of free data ingest, one free full-access user, and unlimited free basic users.
Learn more about how to better measure your application performance:
The views expressed on this blog are those of the author and do not necessarily reflect the views of New Relic. Any solutions offered by the author are environment-specific and not part of the commercial solutions or support offered by New Relic. Please join us exclusively at the Explorers Hub (discuss.newrelic.com) for questions and support related to this blog post. This blog may contain links to content on third-party sites. By providing such links, New Relic does not adopt, guarantee, approve or endorse the information, views or products available on such sites.