Documentation

Pulse Insight Rules

The rules are the cornerstone of Pulse 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.

The rules:

  • 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

  • Back to top
  • 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:

    • Remove Flash

    Learn more from Google PageSpeed

  • Back to top
  • 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:

    • Remove Java

    Learn more from Google PageSpeed

  • Back to top
  • 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

  • Back to top
  • 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:

    <meta name='charset' value='utf-8' />

    Recommendations:

    • Remove charset from the meta tag

  • Back to top
  • 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:

    • Remove Silverlight

    Learn more from Google PageSpeed

  • Back to top
  • 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

  • Back to top
  • 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 <head>

  • Back to top
  • 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

  • Back to top
  • 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.

  • Back to top
  • 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

  • Back to top
  • 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:

    • Removes whitespace

    • Removes comments

    • Removes unused code

    • Optimizes conditional expressions

    • Shortens variable and function names

    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

  • Back to top
  • 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:

    • Removes whitespace

    • Removes comments

    • Removes unused code

    • Enhances compression

    • Compacts any inline JavaScript and CSS

    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

  • Back to top
  • 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:

    • Removes whitespace

    • Removes comments

    • Removes unused code

    • Optimizes conditional expressions

    • Shortens variable and function names

    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

  • Back to top
  • 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

  • Back to top
  • 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:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    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

  • Back to top
  • 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 <body> 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 <body> 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 <body> tag
    • Ensure external scripts are at the end of the <body> tag
    • Ensure external CSS files are at the <head> tag

  • Back to top
  • 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:

    <script src="demo.js" async></script>

    Recommendations:

    • Add async to the script tag

    Learn more from Google PageSpeed

  • Back to top
  • 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="/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

  • Back to top
  • 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

  • Back to top

Documentation missing?

If we don't have documentation about your desired topic, send us a message and we'll create it for you.