Find and fix slow page load times with Raygun

In this tutorial we will focus on finding and fixing bad page load times using Raygun. But before that, let’s discuss why slightly longer page load times can have such a big impact.

One of the most important things you can do to make a great first impression on potential clients or customers who visit your website is to improve its loading speed.

Imagine a customer just heard about your company from a friend. You sell products online and users can purchase them by visiting your website. If different website pages take a long time to load, and you're not specifically selling that product, there's a good chance customers will abandon your site and go elsewhere.

Not only are you missing out on your first sale here, you're also missing out on the opportunity to have loyal customers who will buy more products in the future.

That's the thing about the Internet - it only takes a few clicks for people to leave your site and buy something from your competitor. Faster page load times can give you an edge over your competitors and increase your revenue.

How can Raygun help?

Raygun relies on Real User Monitoring Insights (RUM Insights) to improve website performance and page load times. The term "real user monitoring" is key here. You can use tools like WebPagetest and Google Page Speed ​​Insights to optimize individual pages, but the results won't be based on real user data. On the other hand, the data provided by Raygun is based on real users visiting your website.

Raygun also presents information in a more organized way, telling you things like your site’s average page speed, the most requested pages, and the slowest pages. This way, you can prioritize which pages or sections of your website need to be optimized first.

You can also find out how fast your website loads for users in different countries or using different browsers. Likewise, you can compare the speed of mobile and desktop websites.

Another great thing about Raygun is that it shows you how your website performs for different users. For example, one of your most valuable customers might have a website that loads slowly. In this case, you'll definitely want to understand this and take some steps to improve their experience before it's too late.

We will learn how to do all of this using Raygun in the next few sections of this article.

Integrate Raygun into your website

Before integrating Raygun into your website, you need to register for an account. This account gives you free access to all Raygun features for 14 days.

After successful registration, you can click the Create Application button to create a new application. You can fill in the name of your app on the next screen and check some checkboxes to receive notifications about errors and real user monitoring insights.

Now you just need to choose your development platform or framework. In this case, we use JavaScript.

Finally, you will be given some code that you must add to all the pages you want to monitor. You can also download the production or development version of the library and include it yourself instead of placing the following code in your website.

<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>

After adding the above code snippet before the closing tag, you must place the following code snippet before the closing 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 you'll be able to see how your site performs for different users, but you won't be able to identify those users.

There is a simple solution to this problem. All you have to do is add the following code to your web page and Raygun will handle the rest.

rg4js('setUser', {

  identifier: 'unique_id',

  isAnonymous: false,

  email: 'users_email@domain.com',

  firstName: 'Firstname',

  fullName: 'Firstname Lastname'

});

You must include these three pieces of code on all pages you want to track. Once completed, data will begin to appear in the dashboard for you to analyze.

Find pages with poor loading times

The Real User Monitoring section of the Raygun dashboard has a number of tabs that present data in different formats. We'll take a brief look at all of these tabs to show you how to use the information provided there to find pages with poor loading times.

Live tag will give you a real-time overview of your website's performance. It has different metrics, such as Health Score, that show you how your website is currently performing. You can read more about all these metrics in the documentation on the "Live" tab on the Raygun website.

It also has a world map indicating the country you are currently in active user. You can also find a list of recent requests made to you Websites for different users. The image below shows the latest requests from our website.

The Performance tab has five useful metrics that give you a quick overview of your website page load times. For example, the median load time is 1.41 seconds, which means 50% of pages load before 1.41 seconds. Likewise, the P90 load time is 6.78 seconds, indicating that 90% of the time, the site will load by 6.48 seconds.

This should give you a rough idea of ​​how your site is performing and how slow it is for the slowest 10% of users.

There is also a list of the slowest and most requested pages at the bottom of the Performance tab. Knowing your most popular and slowest pages can be very helpful when you want to prioritize which parts of your site need fixing first.

Although all pages in your website should load as quickly as possible, some are more important than others. Therefore, you may be interested in understanding the performance of specific pages on your website. You can do this simply by entering the page you are looking for in the input field. This will give you information about the median, average, and P90 load time for a specific page. This is the data for the home page of our website.

You can use the Sessions tab to view session-related information, such as total sessions, total users, and median session length. The sessions table will give you a quick overview of your last 150 sessions, with information such as country, duration, total page views, and the last page visited for the session.

Clicking on the magnifying glass will show you more details about a specific session, such as the pages the user visited, the load times for those pages, and the browsers/devices used during the session.

The

Users tag will give you an overview of how satisfied different users are with your website. This is useful when you want to understand how specific users interact with your site and if or why their page loads take longer than expected.

There are three other tabs that display information about all page views by browser, platform, and geography. This way you can tell if a webpage is loading slowly only on a specific browser or platform. You will also get a rough idea of ​​the distribution of users. For example, it can be handy to know if the majority of your customers are from a specific country or use a specific browser.

Raygun lists the percentage of visitors from a specific continent at the top of the Geo tag. Afterwards, it provides a map containing the distribution of loading times. Countries with the slowest loading times are filled in red, and countries with faster loading times are filled in green.

If you have consistently slow loading times in a particular country, it might be worth your time to take a closer look and find out why.

Fix the problem of poor page loading time

In the previous section, we learned how to use all the data collected by Raygun to determine which pages are taking longer to load, or if there are any countries where pages are taking longer to load than usual.

Now it’s time to look at how we can use Raygun to uncover issues that may be causing a specific page or the entire site to load slower than usual.

Improving a website’s poor page load times can be very difficult, especially if the website is very complex or has many pages. The trouble is finding what needs improvement and where to start.

Fortunately, Raygun can provide you with some general insights into fixing your website. You can click the Insights option under the Real User Monitoring menu and Raygun will scan your site for any potential issues. You can find a list of all these rules in the official Raygun documentation. Addressing all of the listed issues will significantly speed up your website.

In addition to following these general guidelines, you may also want to isolate pages that load slowly. Once you isolate them, Raygun can show you how long it takes them to resolve DNS, latency, SSL handshakes, and more. This will give you a clear idea of ​​where improvements can be made to reduce page load times. The picture below should make it clear.

You can also filter the data to get a more accurate picture of a specific page's load time and the various factors that affect it. The graph above shows the average latency for all requests made to the About Us page. However, you can click the Add filter button at the top to only see the About Us loading time chart for specific countries like Italy.

You will also see all requests made by a specific page at the bottom. Basically, you'll be able to view the DNS, latency, SSL, server, and transfer times for every resource loaded for a specific page and see if any of them are the culprit.

Once you discover which resources are taking too long to load, you can start optimizing your pages.

Final Thoughts

As you can see in this tutorial, Raygun can be of great help to organizations looking to improve page load times. Integration is very easy and once the integration is successful, the data will start showing up in the dashboard without any intervention on your part.

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 loading times for different countries, browsers, and platforms. It also has filters that you can use to isolate specific data sets from the rest of the data and analyze them carefully.

If you or your company are looking for an easy-to-integrate tool that can provide deep insights into how real users interact with your website, then you should definitely give Raygun a try. You have nothing to lose because the first 14 days are free!

While you're here, check out some of our other tutorials on Raygun!

The above is the detailed content of Find and fix slow page load times with Raygun. For more information, please follow other related articles on the PHP Chinese website!