How We Used Pulse Insights to Improve Website Performance

We built Pulse Insights because we wanted to provide our customers with actionable insights to help improve their website performance. While Pulse Insights was still in development, we used Raygun’s public website, Raygun.com as a test, to see how much of a difference discovering and fixing performance issues makes. What better way to test Pulse Insights than to use it to improve our own website’s performance?

Even though we were happy with our website performance as a whole, we were excited to find out the results – we still decreased our page load time by 38% per page. So we decided to share these findings, and how we even knew where to look for the nitty gritty issues that can really start to count against achieving optimum performance.

How We Measured Page Performance Before Pulse Insights

It may be worth a mention that pre-Pulse Insights, we used the industry standard way of measuring page performance. That is we’d plug a single page into Yahoo’s YSlow & Google page speed and address individual issues. We knew which pages on our site were underperforming from our Real User Monitoring tool, Raygun Pulse. However, what we couldn’t see was the exact reasons for the underperformance – until now.

Pulse Insights analyzes our whole website on a weekly basis and gives a holistic picture of website health to help improve website performance, showing you where to look. This helped us to really dial in to any pages that were slightly under-par performance wise.

Much like Yahoo’s YSlow, Pulse Insights uses a set of rules to help you improve your website’s performance. It then presents which rules each page failed, and shows you how to fix them (more on how they work here.) When using Pulse Insights, you have multiple ways to interpret and then fix the data. You can fix issues across the whole site (which I personally prefer because then I feel you get the most bang-for-your-buck) or you can improve the performance of a single/number of pages.

The three pages I chose to look at were:

• Raygun’s homepage
• The Raygun Crash Reporting product page
• The Raygun Pulse homepage product page

Here’s how our Raygun Pulse product page performed:

As you can see, we passed 10 and failed 10 of the rules. Obviously passing all 20 for all three pages is the aim!

I chose to fix the issues on these three pages mainly because:

• The chosen pages had just been upgraded with new designs, so they should already have been fast. Plus, the code was still fresh in mind.
• Raygun Pulse shows that they have a high number of views, so improving these pages will give a better experience to more of our users.
• More meaningful performance statistics can be shown in the dashboard.

Let’s look at our performance results!

Performance Measurements: Before

These performance statistics were measured using Chrome Dev Tools against a local version of the public website. This was to ensure that any improvements made were due to my updates and not those of my colleagues or a poor internet connection.

This provided a good baseline for me to start making improvements. So which rules failed, and how did I fix them?

Using Pulse Insights to Improve Performance

The first step was for me to navigate to each page on the Pulse Insights’ Rules tab, and choose a few of the rules which were failing:

I decided to address three failed rules based on how easy they would be to implement and how much of an impact they have for a first time user:

• Avoid large image file sizes
• Combine scripts
• Prefer Async Script Tags

I also noticed some of our assets weren’t bundled so I fixed that too.

Avoid Large Image File Sizes:

Surprisingly enough, I found that a few images on our website weren’t properly optimized:

Quickly optimizing the images brought the size of our website dramatically lower.

Note: The images we failed to compress were mostly SVGs but when compressing all images site-wide I noticed a few regular images were missed also. You can read more about SVG optimization on a previous blog post our designer wrote here.

Combine Scripts:

Our public website has had many iterations done since Raygun was first announced, so finding out that we had a few scripts unbundled wasn’t so surprising:

Whilst fixing this issue I ended up being able to remove a few scripts that were not needed to improve website performance. Some of the tracking scripts were for older services, while some I simply made smarter and only included on the required pages.

Prefer Async Script Tags

Another easy task (as long as you know your script dependencies) was to refactor how our scripts were loading since Pulse Insights told us that we weren’t making use of the async tag (as the image below:)

Bundle Assets

The final optimization step for helping improve overall website performance was to use SVG symbols for a few assets so that browsers only have to make a single request for those assets. Whilst not explicitly a rule in Pulse Insights, the combining scripts step I performed lead me down this path and we ended up merging 20 assets into one.

Performance Measurements: After

With those improvements made, I then measured the performance again and saw quite a dramatic improvement across all the stats.

Final Results

Ever since Pulse Insights was released into the wild, we’ve been using it on our websites.

We made the performance improvements shown above in a single day of development and ended up:

• Removing 64 HTTP requests
• Transferring 891 KB less data
• Decreasing the total load time by at least 38% of each page

Each step was by no means rocket science to implement and, in my experience, knowing that they were issues in the first place was harder to discover than actually fixing them. You can find out exactly where the performance issues are in your website by taking a free trial of Raygun here. Or if you’d like a personal walkthrough schedule a demo with a friendly team member here.