Shineyrock

like 2 26
How to Find and Fix Poor Page Load Times With Raygun
1. April 2018
2. Daily
3. read 271
In this tutorial, we'll focus on finding and fixing poor page load times with Raygun. But before we do that, let's discuss why slightly longer page load times can be such a big deal.
One of the most important things that you can do to make a good first impression on potential customers or clients visiting your website is improve its loading speed.
Imagine a customer who just heard about your company from a friend. You sell a product online which users can purchase by visiting your website. If different website pages are taking a long time to load and you are not selling that product exclusively, there is a good chance that the customer will abandon your site and go somewhere else.
You did not just miss out on your first sale here, you also missed the opportunity to have a loyal customer who would have purchased more products in the future.
That's the thing with the Internet—people are just a few clicks away from leaving your website and buying something from your competitors. Faster loading pages can give you an edge over competitors and increase your revenue.
How Can Raygun Help?
Raygun relies on Real User Monitoring Insights (RUM Insights) to improve a website's performance and page load time. The term "Real User Monitoring" is the key here. You could use tools like WebPagetest and Google Page Speed Insights to optimize individual pages, but those results will not be based on real user data. On the other hand, the data provided by Raygun is based on real users who visited your website.
Raygun also presents the information in a more organized manner by telling you things like the average page speed for the website, the most requested pages, and the slowest pages. This way, you can prioritize which page or section of the website needs to be optimized first.
You can also see how fast the website is loading for users in different countries or for users with different browsers. Similarly, you can compare the speed of your website on mobile vs. desktop.
Another advantage of Raygun is that it will show you how the website is performing for different users. For example, the website may be loading slowly for one of your most valuable clients. In such cases, you would definitely like to know about it and do something to improve their experience before it is too late.
We will learn how to do all that with Raygun in the next few sections of this article.
Integrating Raygun Into Your Website
You need to sign up for an account before integrating Raygun into your website. This account will give you access to all Raygun features for free for 14 days.
Once you have registered successfully, you can click on the Create Application button to create a new application. You can fill out a name for your application on the next screen and then check some boxes to receive notifications about errors and real user monitoring insights.
Now you just have to select your development platform or framework. In this case, we are using JavaScript.
Finally, you will get some code that you have to add on all the pages you want to monitor. Instead of placing the following code in your website, you could also download the production or development version of the library and include it yourself.
```
<script type="text/javascript">
  !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
  (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
  f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
  h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
  e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
</script>
```
Once you have added the above code snippet before the closing </head> tag, you have to place the following snippet just before the closing <body> tag.
```
<script type="text/javascript">
  rg4js('apiKey', 'YOUR_API_KEY');
  rg4js('enableCrashReporting', true);
  rg4js('enablePulse', true);
</script>
```
If you don't add any more code, Raygun will now start collecting anonymous data. This means that you will be able to know how your website is performing for different users, but there will be no way to identify those users.
There is an easy fix for this problem. All you have to do is add the following code in your webpages and Raygun will take care of the rest.
```
rg4js('setUser', {
  identifier: 'unique_id',
  isAnonymous: false,
  email: 'users_email@domain.com',
  firstName: 'Firstname',
  fullName: 'Firstname Lastname'
});
```
You will have to include these three pieces of code in all the pages that you want to track. Once done, the data will start showing up in the dashboard for you to analyze.
Finding Pages With Poor Load Times
The Real User Monitoring section in the Raygun dashboard has a lot of tabs to present the data in different formats. We will briefly go over all these tabs to show you how the information presented in them can be used to find pages with poor load times.
The Live tab will give you an overview of your site's performance in real time. It has different metrics like Health Score to show you how the site is currently performing. You can read more about all these metrics in the documentation for the Live tab on the Raygun website.
It also has a world map to point out the countries of your currently active users. You will also find a list of most recent requests to your website by different users. Here is an image showing the most recent requests to our website.
The performance tab has five useful metrics to give you a quick overview of the website page load times. For example, a median load time of 1.41 seconds means that 50% of your pages load before 1.41 seconds have passed. Similarly, a P90 Load Time of 6.78 seconds tells you that 90% of the time, the website loads before 6.48 seconds.
This should give you a rough idea of the performance of a website and how slow it is for the slowest 10% of users.
The performance tab also has a list of the slowest and most requested pages at the bottom. Knowing the most popular and the slowest pages can be very helpful when you want to prioritize which sections of your website need to be fixed first.
Even though all pages in a website should load as quickly as possible, some of these pages are more important than others. Therefore, you might be interested in finding out the performance of a particular page on a website. You can do so by simply typing the page you are looking for in the input field. This will give you information about the median, average, and P90 load time of a particular page. Here is the data for the home page of our website.
You can use the Sessions tab to see session-related information like the total number of sessions, total number of users, and median session length. The sessions table will give you a quick overview of the last 150 sessions with information like the country, duration, total page views, and the last visited page for a session.
Clicking on the magnifying glass will show you more details of a particular session like the pages the user visited, the load time of those pages, and the browser/device used during the session.
The Users tab will give you an overview of the satisfaction level of different users with your website. This can be very helpful when you want to see how a particular user is interacting with your website and if or why their page load time is more than expected.
There are three other tabs to show information about all the page views in terms of browsers, platforms, and geography. This way you will be able to know if a webpage is loading slowly only on a particular browser or platform. You will also have a rough idea of the distribution of users. For instance, knowing if most of your clients are from a particular country or use a particular browser can be very handy.
Raygun lists the percentage of visitors from a particular continent at the top of the Geo tab. After that, it provides a map with the distribution of load times. Countries with the slowest load times are filled with red, and countries with quick load times are filled with green.
If you are consistently getting poor loading times from a particular country, it might be worth your time to look closely and find out the reason.
Fixing Poor Page Load Times
In the previous section, we learned how to use all the data collected by Raygun to figure out which pages are taking a long time to load or if there are any countries where our page load times are longer than usual.
Now it is time to see how we can use Raygun to discover issues which might be causing a particular page or the whole website to load slower than usual.
Improving poor page load time of a website can be pretty overwhelming, especially if the website is very complicated or if it has a lot of pages. The trouble is in finding what to improve and where to start.
Luckily, Raygun can offer you some general insights to fix your website. You can click on the Insights options under the Real User Monitoring menu, and Raygun will scan your website for any potential issues. You can find a list of all these rules in the official Raygun documentation. Fixing all the listed issues will significantly speed up your website.
Besides following these general guidelines, you might also want to isolate the pages that have been loading slowly. Once you have isolated them, Raygun can show you the time they take to resolve DNS, latency, SSL handshake, etc. This will give you a good idea of the areas where you can make improvements to reduce the page load time. The following image should make it clear.
You can also filter the data in order to get a more accurate picture of the load time for a particular page and various factors affecting it. The above image showed you the average latency for all requests made to the "About Us" page. However, you can click on the Add Filter button at the top and only see the "About Us" loading time graph for a specific country like Italy.
You will also see all the requests made by a specific page at the bottom. Basically, you will be able to see the DNS, latency, SSL, server, and transfer time for every resource loaded for a specific page and see if any of them is the culprit.
Once you find out which resources are taking too long to load, you can start optimizing your pages.
Final Thoughts
As you saw in this tutorial, Raygun can be of great help to organizations looking to improve their page load times. It is super easy to integrate, and after successful integration, the data will simply start showing up in the dashboard without any intervention from your side.
Raygun also has different tabs to organize the collected data so that you can analyze it more easily and efficiently. For example, it can show you load times for different countries, browsers, and platforms. It also has filters that you can use to isolate a particular set of data from the rest and analyze it closely.
If you or your company are looking for an easy-to-integrate tool which can provide great insights about how your real users are interacting with your website, you should definitely give Raygun a try. You don't have anything to lose since it is free for the first 14 days!
And while you're here, check out some of our other tutorials on Raygun!
- Angular
  Error and Performance Monitoring for Web & Mobile Apps Using Raygun
  Roy Agasthyan
- JavaScript
  Getting Started With Raygun: Insights and Crash Reporting for App Developers
  Jeff Reifman
martijn broeders

founder/ strategic creative at shineyrock web design & consultancy
e-mail: .(JavaScript must be enabled to view this email address)
phone: 434 210 0245

Like
disLike

2

Add a comment...

Comments
Name*
Email*
location
URL
Comment{comment}
Remember my personal information Notify me of follow-up comments?