How we used Real User Monitoring Insights to improve website performance
Posted Jan 24, 2017 | 6 min. (1132 words)Real User Monitoring (RUM) Insights is the latest addition to our Real User Monitoring tool. We built Insights because we wanted to provide our customers with actionable insights to help improve website performance.
While RUM 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 make. What better way to test 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 Insights
It may be worth a mention that pre- Insights, we used the industry standard way of measuring page performance. That is we’d plug a single page into Yahoo’s YSlow and Google page speed and address individual issues. We knew which pages on our site were underperforming from our Real User Monitoring tool. However, what we couldn’t see was the exact reasons for the underperformance – until now.
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 into any pages that were slightly under-par performance wise.
Much like Yahoo’s YSlow, 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 (<a href="/blog/real-user-monitoring-insights-rules/"" target="_blank" rel=“noopener”>more on how they work here.) When using Insights you have multiple ways to interpret and then fix the data. You can fix issues across the whole site (which I prefer personally 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 RUM homepage product page
Here’s how our Raygun RUM product page performed:
As you can see, we passed 10, d 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 RUM 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.
<td>
<b># Assets Loaded</b>
</td>
<td>
<b>Size</b>
</td>
<td>
<b>(3G) Total Load Time</b>
</td>
<td>
<b>(3G) DOM Content Loaded</b>
</td>
<td>
88
</td>
<td>
858 KB
</td>
<td>
10.01s
</td>
<td>
3.03s
</td>
<td>
78
</td>
<td>
878 KB
</td>
<td>
10.24s
</td>
<td>
3.03s
</td>
<td>
44
</td>
<td>
460 KB
</td>
<td>
7.2s
</td>
<td>
4.68s
</td>
This provided a good baseline for me to start making improvements. So which rules failed, and how did I fix them?
Using Insights to improve performance
The first step was for me to navigate to each page on the 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 gone through many iterations since launching Raygun, so finding out that we had a few scripts unbundled wasn’t so surprising:
Whilst fixing this issue I removed a few scripts that we didn’t need 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 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 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 in all the stats.
<td>
<b># Assets Loaded</b>
</td>
<td>
<b>Size</b>
</td>
<td>
<b>(3G) Total Load Time</b>
</td>
<td>
<b>(3G) DOM Content Loaded</b>
</td>
<td>
70
</td>
<td>
511 KB
</td>
<td>
6.16s
</td>
<td>
1.86s
</td>
<td>
44
</td>
<td>
458 KB
</td>
<td>
5.52s
</td>
<td>
1.94s
</td>
<td>
32
</td>
<td>
336 KB
</td>
<td>
4.04s
</td>
<td>
3.33s
</td>
Final results
Ever since Insights was released into the wild we’ve been using it on our websites.
W achieved the results above in a single day of development. To improve website performance, we:
- 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 than 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.