How to use Real User Monitoring Insights to improve website performance
Posted Dec 1, 2016 | 6 min. (1222 words)Insights is a powerful new addition to our Real User Monitoring tool. 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:
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.