Using Raygun Real User Monitoring Insights for progressive web optimization

Progressive web optimization is required when you have a constantly growing website to keep the user experience positive and ensure new visitors are stopping to look around.

But what do I mean by progressive web optimization?

Progressive web optimization is the idea that website optimization is not a single task, as no website is static. We add and remove content and features all the time, so optimizations be constant to ensure your website is performing at it’s best.

As a web developer, it’s easy for hard work to go unnoticed – often people only notice your work when it’s, well, broken. When it comes to front-end development the reality is that things can always be improved and optimized. Unfortunately, knowing what to do first and to what extent is not always clear. At Raygun, we use both Raygun RUM and Insights to identify exactly where the problems are and what needs to be done to make things better.

I’m going to show you how to use the latest feature of Raygun Real user Monitoring Insights to measure your impact on web performance, improve the code and impress the boss while you’re at it.

Progressive web optimization with Raygun Insights

Step 1. Enable Insights

If you are an existing customer, head to your Raygun Real user Monitoring dashboard and enable Insights: 

Step 2. Identify which pages need optimization

The first step is to look at Raygun Real User Monitoring and identify where to make optimizations first. RUM gives a load time breakdown for each of your website’s pages and resources.

A good place to look first is in the ‘Performance’ tab, in the ‘Slowest pages’ module:

What we’re interested in here is the pages or page groups with the long ‘Render’ time (the cyan-colored part of the load time bar). We’ll make these pages our top priority to optimize.

Step 3. Progressively implement optimizations

Next, we’ll look at the offending page in Insights. Head to the ‘Insights’ drop-down on the main dashboard and click the ‘Pages’ tab. You’ll see this particular page has failed a lot of the performance rules:

Insights lets us dig into the page trends to see which resources are the problem:

Now we know what’s wrong, we can take the necessary steps to improve our code to get things running faster.

Step 4: Fix a bug

Let’s start with clicking on a common performance issue, ‘Minify JavaScript’:

You can even dig down into individual scripts and stylesheets:

Now it’s as easy as compressing those causing resources with a tool like UglifyJS, or adding JavaScript compression to your build flow with Grunt or Gulp.

Once that’s complete, we deploy our optimised scripts and we can mark these rules as passed!

Next, you can work through this list of issues with the rest of the team and check them off as you go.

We can then go back to Raygun RUM and see the page load time decrease and user experience improve, show this to the boss, high fives ensue.

In short

Website optimization is not easy. Fortunately, it no longer has to be an uphill struggle.

Optimization is an ongoing battle and should be a continuous improvement process. There will always be more pages, more features, more requirements, and more cooks in the kitchen. Automatic scanning, like that provided by Insights, means peace of mind, and a lot less tedious manual tracking.

Make sure your website is performing at its best with Raygun  Insights, and impress your boss along the way. Take a free trial here, or get all your questions answered by booking a short demo with one of our experienced team members.

Related posts:

My ideal front end development workflow for a new project

Use the Insights Rules feature to improve website performance