Rules

The rules are the cornerstone of Real User Monitoring Insights. Your site’s pages and resources are scored according to how many industry-standard site performance rules they pass.Use the rules to uncover areas where your site’s performance can be improved.

Metrics provide you with a quick snapshot of how your site measures up to the Real User Monitoring Insight rules:

Rules passed is the percentage of rules passed in this scan and the percentage change since the last scan.

Rules failed is the percentage of rules passed in this scan and the percentage change since the last scan.

Difficulty distribution is the difficulty score distribution of all the failed site-wide and page-specific rules from the current scan.

Status distribution is the status score distribution of all the rules from the current scan.

You can view the passing and failing rule trends over the last 28 days. Click on the dropdown in the upper-right corner to view the issue trends over the last 28 days.

The list of rules are grouped into failed, passed or ignored. A rule can belong to one or more groups depending the status of a page.

For example, your homepage may pass the ‘Avoid Flash’ rule, but your contact page may fail the rule. In this scenario, ‘Avoid Flash’ would be in the failed and passed group.

To view all the failed, passed and ignored issues, just click on a rule.

Read information on the rule, how it’s triggered and recommended actions you can take to make the rule pass for the next scan.

The difficulty of resolving a rule is displayed in the top-right corner.

View the URLs of the resources that have caused the rule to fail:

Tab through the table to view resource URLs that have passed the rule and URLs you have ignored.

To change the status of the URLs to failed, passed or ignored,  click the checkbox on the left of the URL link.

If you mark a causing resource URL as ‘Passed’ and it fails on the next scan, the URL will display on the ‘Failed’ tab.

Do you want to dig a little deeper? Click on a resource URL to view an issue. An issue displays all the pages that that a resource URL is seen on.

An issue comprises a resource, rule and the pages where the resource causes the rule failures. The resource can be an HTML document or asset.

When you click on an issue, you can view more information on the failing rule as well as an overview of the issue:

Difficulty describes the difficulty of resolving a rule. The difficulty scores are represented by wrenches - one for easy, two for moderate and three for difficult.

Seen is the number of times the failed rule is seen across your site.

First seen is the date of the scan the first found this issue.

Last seen is the date of the scan where this issue was last seen.

You can also view the list of pages where the rule has failed:

Want to dig deeper? Click on a page to see how many rules on a page fail or pass.


Avoid Document Write

Description of issue

This rule triggers when document.write() is found in a JavaScript file or script tag in an HTML document.

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.

Issue information

Remove document.write() to improve the page load time and help avoid the sometimes unpredictable order that browsers load scripts.

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 behaviour. The extra benefit of using HTML is that is loads faster and loads before scripts.

Even if you do not use document.write() for loading external resources, misusing it can cause major bugs. If it’s called after a page load, for example, the code inside it will overwrite the whole page.

Recommendations

  • Remove document.write() from the HTML document and all JavaScript files

Learn more from MDN

Learn more from Google PageSpeed


Avoid Flash

Description of issue

This rule triggers when a web page is using Flash. Most mobile devices do not support plugins, such as Flash. Plugins are also the leading cause of crashes and security incidents on pages that utilize them.

Issue information

Plugins are legacy technology. Content should be created using native web technologies - this ensures that content can be accessed by all devices.

Recommendations

Learn more from Google PageSpeed


Avoid Java

Description of issue

This rule triggers when a web page is using Java. Most mobile devices do not support plugins, such as Java. Plugins are also the leading cause of crashes and security incidents on pages that utilize them.

Issue information

Plugins are legacy technology. Content should be created using native web technologies - this ensures that content can be accessed by all devices.

Recommendations

Learn more from Google PageSpeed


Avoid Large Image File Size

Description of issue

This rule triggers when an image on a page is more than 100KB and may be reduced in size.

Optimizing images, including reducing the file size, can reduce your image load time by up to 80%. Let’s get those images optimized!

Issue information

Every image on a page is downloaded from your server to the user’s browser. If images are not optimized for the web, the page load time can seriously suffer and frustrate your users.

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

Recommendations

  • Compress images
  • Remove unused image metadata
  • Reduce the whitespace around images
  • Use PNGs for graphics and illustrations
  • Use JPEGs for photographs
  • Use GIFs for small or simple graphics, avatars and animated images

Learn more from Google PageSpeed


Avoid Setting Charset In Metatag

Description of issue

This rule triggers when a page has set the charset in a meta tag.

A charset is a set of characters represented by a number to display universal characters.

Issue information

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. This method also sets the charset for every page.

By example, remove tags from the HEAD section of your HTML document that look like:

Recommendations

  • Remove charset from the meta tag
  • Avoid Silverlight
  • Description of issue

This rule triggers when a web page is using Silverlight. Most mobile devices do not support plugins, such as Silverlight. Plugins are also the leading cause of crashes and security incidents on pages that utilize them.

Issue information

Plugins are legacy technology. Content should be created using native web technologies - this ensures that content can be accessed by all devices.

Recommendations

Learn more from Google PageSpeed


Combine CSS files

Description of issue

This rule triggers when a page has more than three CSS files. These should be concatenated to reduce the page load time.

Issue information

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

If you have multiple CSS files, combining them into a maximum of three files will reduce the RTT time. To reduce the RTT even further, you might want to implement some or all of the recommendations below.

Recommendations

  • Minify CSS files
  • Serve rarely used CSS in a separate file
  • Bundle CSS files as part of your deployment process
  • Avoid @import as it can prevent CSS files from being downloaded in parallel to other CSS files

Combine Scripts

Description of issue

This rule triggers when a page has more than three JavaScript files. These should be concatenated to reduce the page load time.

Issue information

Multiple script 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.

If you have multiple scripts, combining them into a maximum of three files will reduce the RTT time. To reduce the RTT even further, you might want to implement some or all of the recommendations below.

Recommendations

  • Minify JavaScript
  • Serve rarely used JavaScript in a separate file
  • Reduce the number of external scripts in the HTML document

Enable Gzip Compression

Description of issue

This rule triggers when the HTTP transfer speed from your server to the browser can be reduced by adding gzip compression.

Gzip is a compression method that can reduce a file’s size by up to 70%.

Issue information

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 compresses your web pages, JavaScript, CSS and images before sending them over to the browser. This drastically reduces transfer time since the files are much smaller.

In terms of cost versus benefit, gzip compression should be near the top of your page speed optimizations if you don’t have it setup already.

Recommendations

  • Configure your server to add the gzip header for all HTML documents and assets (JavaScript, CSS and image files)

Learn more from MDN

Learn more from Google PageSpeed


HTTPS By Default

Description of issue

This rule triggers when your site is using HTTP instead of HTTPS.

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

Issue information

HTTPS encrypts all communication between web sites and a user’s browser, maintains data integrity and uses certificates to authenticate servers (and optionally clients).

Google also now uses the presence of HTTPS as a ranking signal. This is important for SEO (search engine optimization) in addition to users’ privacy and security.

Recommendations

  • Ensure that all requests use HTTPS, including HTML documents, assets (JavaScript, CSS, images) and XHR (Ajax) requests.

Leverage Browser Caching

Description of issue

This rule triggers when the HTTP request header of a resource is missing caching headers.

Caching reduces the load time of web pages for repeat visitors by storing files locally in a user’s browser. Stored files do not need to be fetched or loaded again for a specified period.

Issue information

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

To enable browser caching, add the Cache-Control and ETag (entity tag) headers to HTTP response headers.

Cache-Control defines how, and the period of time, a response can be cached by the browser and other caches.

ETag provides a validation token, used to communicate with the server, to check if a resource needs to be updated.

Recommendations

  • Add the Cache-Control and ETag headers to HTTP response headers

Learn more from MDN

Learn more from Google PageSpeed


Minify CSS

Description of issue

This rule triggers when the size of CSS files can be reduced through minification.

Issue information

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

In general, minifying CSS:

This is done automatically by a tool, usually as part of the build process. 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.

Recommendations

Learn more from Google PageSpeed


Minify HTML

Description of issue

This rule triggers when the size of an HTML file can be reduced through minification.

Issue information

Minification is the process of removing all unnecessary characters from code while maintaining its functionality. Minification tools may process HTML differently. In general, minifying HTML:

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.

Recommendations

Learn more from Google PageSpeed


Minify JavaScript

Description of issue

This rule triggers when a JavaScript file’s size can be reduced through minification.

Issue information

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

In general, minifying JavaScript:

This is done automatically by a tool, usually as part of the build process. 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.

Recommendations

You can also utilize UglifyJS through the Grunt plugin, or Gulp plugins like gulp-uglify or gulp-sourcemaps.

Learn more from Google PageSpeed


Minimize Redirects

Description of issue

This rule triggers when there is at least one redirect from one URL to another, adding to the page load time.

Issue information

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.

Recommendations

  • In documents, remove URLs you know redirect to another URL
  • If you can’t avoid redirects, use the ### 301 Moved Permanently### or ### 302 Found### HTTP response status code to the response header
  • Reduce the number of domains that redirect to your main site but don”t have any content - i.e. redirects from domains where you”ve reserved the name space

Learn more from Google PageSpeed


Mobile Viewport

Description of issue

This rule triggers when the page content does not fit horizontally within the specified viewport. This means users may need to use horizontal scrolling to view all the content.

Issue information

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 good user experience.

There should be a meta tag present in the HTML head with a viewport name and content specific for your site. This will allow pages to fit mobile screens and other devices neatly. The tag can look something like:

Recommendations

  • Add a meta tag in the HTML document head with the viewport and content specified

Learn more from MDN

Learn more from Google PageSpeed


Optimize Script and Style Order

Description of issue

This rule triggers when the order of external script and CSS files on a page can be optmized to reduce page load time.

Issue information

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. If you have scripts above styles, the browser will wait for those scripts to load before continuing to load content.

Having scripts at the end of the `` tag also helps when scripts select elements on a page, because the elements will already be loaded. To optimize the order of scripts, follow the recommendations below.

Recommendations

  • Use the async attribute on scripts whenever possible
  • Ensure external scripts are grouped together
  • Ensure external scripts are in the `` tag
  • Ensure external scripts are at the end of the `` tag
  • Ensure external CSS files are at the `` tag

Prefer Async Script Tags

Description of issue

This rule triggers when HTML script tags can be fetched asynchronously to prevent them from blocking the page load.

Issue information

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.

To make a script asynchronous, just add async to the script tag:

http://www.google-analytics.com/ga.js"> src="https://raygun.com/demo.js" async="">

Recommendations

  • Add async to the script tag

Resources Share URL

Description of issue

This rule triggers when at least one JavaScript, CSS or image asset on a page is served from a different URL.

Serving an identical assets with a different URL adds to the overall payload size as the browser has to download the asset again.

Issue information

JavaScript, CSS and image assets are the types of HTML document assets most likely to be shared across a site. Serve these assets with a consistent URL across all pages.

You should also ensure these assets are served from the same host, otherwise the asset has to be fetched from a another server, adding to the overall round trip time (RTT).

The benefits include a reduced payload size, using available locally cached assets and avoiding additional DNS (domain name system) lookups.

Recommendations

  • JavaScript, CSS and image assets shared across pages should have the same URL

Examples

PASS: A page URL at http://www.example.com has an image with src="https://raygun.com/foo.png"

PASS: A page URL at http://www.example.com has an image with src="http://www.example.com/images/foo.png"

FAIL: A page URL at http://www.example.com with an image with src="https://www.example/foo.png" will fail because it has a different protocol

FAIL: A page URL at http://www.example.com with an image with src="http://example.com/images/foo.png" will fail because it’s missing the www subdomain


Specify Image Dimensions

Description of issue

This rule triggers when an image’s width and height are not set in the img tag, potentially affecting the page load.

Issue information

Setting the image’s width and height ensures the dimensions are correct before the image is loaded. This avoids HTML document reflows and repaints - both which can significantly impact page load.

Document reflows calculate the layout of a page, and repaints determine every page element’s visual style properties, like the visibility and color.

Recommendations

  • Add the width and height attributes to the img tag
  • Save images in their proper dimensions to reduce the file size - for example, resize image dimensions to 30 x 30 if the image is 100 x 100

If you are specifying image dimensions via external CSS, you can ignore this rule.

Learn more from Google PageSpeed