How to use Real User Monitoring Insights to improve website performance

Yosan LegaspiWeb Development1 Comment

Pulse Insights rules helps you find and fix performance issues

Insights is a powerful new addition to our Real User Monitoring software tool, Raygun Real User Monitoring.  It will periodically scan all your public web pages for performance and usability issues that your end users are experiencing with the Insights Rules feature. The best part is that all your pages are scanned automatically – no pasting in one URL and waiting for the results of a single page.

Here’s an example of how Insights looks inside your dashboard: 

pulse insights rules metrics view inside the dashboard

Scan your pages and get useful metrics on how your page measures up to industry standards

Raygun uses a set of 22 industry standard rules to build an accurate picture of your website performance. For each rule, Raygun offers an actionable and practical solution for your software development team to enable a fast fix.

Let’s take a look at the rules in detail, so you know what Insights is looking out for on your site. I’ve broken them down into:

  • rules that help usability of your application
  • rules that assist the performance of your application

Let’s start with usability:

Usability

There are countless statistics on the correlation between user-friendly websites and retention rates. It makes sense for your website to be as user-friendly as possible. Insights helps target key areas like navigation and poor load speed.

Let’s take a look at the specific rules that help spot usability issues Insights:

Avoid plugins

Plugins are legacy technology. Content should be created using native web technologies which ensure that content can be accessed on all devices. Third party plugins are also the leading cause of crashes and security incidents on pages that utilize them.

Insights has separate rules for avoiding Flash, Java and Silverlight plugins, so you know which plugin needs to be removed.

Learn more

HTTPS by default

HTTP does not encrypt the communication between websites and an end user’s browser. The effect of this is to transmit all data in plaintext. This is insecure and opens up both your website and end users to potential security breaches and eavesdropping by malicious third parties.

HTTPS encrypts all communication between websites and an end user’s browser, maintains data integrity and uses certificates to authenticate servers.

Learn more

Mobile viewport

The viewport specifies how a page is displayed on a mobile device. The absence of a viewport means pages will render like they would for a desktop. Horizontal scrolling or zooming out to view content does not provide a good user experience.

Learn more

Performance

We’ve already looked at how important fast page load times are to your company. Improving your website’s load speed is perhaps the most crucial factor in user experience, which is why most of the Insights rules target areas where you can increase your website’s performance.

Let’s take a look at these rules below:

Avoid document.write()

document.write() causes the browser to finish processing the code inside itself before continuing to load a page. This can significantly increase the page load time.

Any logic in document.write() code can be achieved using HTML. So if you have an HTML or script file that includes document.write(), just use HTML to mimic the same behavior.

Learn more

Avoid large image file size

Every image on a page is downloaded from your server to the end user’s browser. If you don’t optimize images for the web, the page load time can severely suffer and frustrate your users.

Reducing the image file size is an easy way to reap huge rewards when it comes to cutting down the overall page load time.

Learn more

Avoid setting charset in metatag

Specifying the charset in the meta tag disables the lookahead downloader in IE8. Disabling the lookahead downloader can increase the page load time.

Setting a charset in the HTTP Content-Type response header in HTML files allows the browser to start loading HTML and scripts immediately.

Learn more

Combine JavaScript and CSS files

Multiple JavaScript and CSS files add to the overall round trip time (RTT). The RTT is the time it takes to request a resource and receive a response from the server.

Insights has separate rules for combining JavaScript and CSS files, so you know which plugin needs to be removed.

Learn more

Enable Gzip compression

When a user hits your website, a call is made to your server to deliver the requested files. The bigger these files are, the longer it takes for them to get to your browser and appear on the screen.

Gzip is a compression method that can reduce a file’s size by up to 70%. It compresses your web pages, JavaScript, CSS and images before sending them over to the browser.

Learn more

Keep-alive header

Setting the Connection HTTP response header to keep-alive maintains a persistent TCP connection.

Instead of opening a new TCP connection for every request, the keep-alive header ensures multiple resources (for example JavaScript, CSS and image files) use only one connection, reducing the load time.

Learn more

Leverage browser caching

When end users first visit a website, resources are fetched over the network and may require multiple trips between the client and server. Caching stores the most commonly used files, making subsequent website visits much faster.

Learn more

Minify CSS, HTML and JavaScript

Minification is the process of removing all unnecessary characters from code while maintaining its functionality.

This is usually done automatically as part of the build process, usually by a minification tool. Minification also reduces network latency (the time it takes for data packets to get from one point to another), leading to faster browser load times.

Insights has separate rules for minifying CSS, HTML, and JavaScript, so you know which resource needs minification.

Learn more

Minimize redirects

A redirect requires an additional HTTP request-response cycle and delays the page load. Remove unnecessary redirects, especially if they are on the landing page.

Learn more

Optimize script and style order

Browsers load scripts and styles in the order they appear in an HTML document. If your HTML document contains styles, putting external scripts at the end of the tag renders the page faster.

Learn more

Prefer Async script tags

Instead of waiting for a script to finish downloading before the page renders, async scripts are downloaded in the background. This means the browser can continue rendering HTML that comes after the asynchronous script tags.

Learn more

Resources share URL

JavaScript, CSS, and image assets are the types of HTML document assets most likely to be shared across a website. Serve these assets with a consistent URL across all pages, otherwise, assets have to be fetched from another server, adding to the overall round trip time (RTT).

Learn more

Specify image dimensions

Set the image’s width and height correctly before loading the image. Correct image formatting avoids HTML document reflows and repaints – both which can significantly impact page load.

Learn more

Use Insights Rules to build a better picture of your website

Insights scans your entire website automatically for problem areas, so there’s no need to paste one URL in at a time and wait for the results per page. The comprehensive Insights Rules feature performs a thorough scan of your website every time, so no performance issues slip through the cracks and affect your end users.

Want to see Real User Monitoring in action? Book a demo with one of our experienced team members here. 

Or, you can book a free trial here. 

Next level software intelligence across your entire stack.

One Comment on “How to use Real User Monitoring Insights to improve website performance”

  1. Pingback: How Raygun used Pulse Insights to improve website performance

Leave a Reply

Your email address will not be published. Required fields are marked *