Audisto Performance Error Checker

How to detect issues with performance on your website

Performance directly influences the user engagement on a website and is therefore one of the most important aspects of website optimization.

Performance bottlenecks can lead to a poor loading speed, which might increase bounce rate and decrease the number of conversions and the engagement rate. Poor performance can also cause issues with the crawl rate on a website.

With this hints section, you can identify the most common performance related issues on a website.

Example: Audisto Performance Error Check with the performance hint reports for the current crawl

Audisto Performance Error Check with the performance hint reports for the current crawl

Here is the list of all specific hints related to performance, that can be identified with the help of the Audisto Crawler.

Table Of Content

Hints

<html> is more than 100 KB in size

Description

If a document is more than 100 KB in size, the URL is flagged with this hint. Use this report to find all HTML documents on the crawled website that have more than 100 KB of markup.

Examples

HTML markup contains a lot of:

  • inline css
  • inline javascript
  • inline images
  • inline fonts
  • whitespace
  • HTML comments
  • bloated markup
Importance

Having more than 100 KB of code in an HTML document is usually a sign of bloated markup and adds to traffic volume, loading time and rendering time. Reducing the size of the HTML document will result in less traffic volume for the user and the webmaster. It will also enhance performance and optimize the user experience of the website.

Operating Instruction

You may want to reduce the size of the document. This can be done by consolidating inline elements into external files, reducing HTML comments or markup optimization depending on your site's core markup.

<img> has no width and/or height attribute

Description

If an image without a width or height attribute is found, the URL is flagged with this hint. Use this report to discover all documents that contain image tags without width and/or height attributes.

Examples

What we discover:

<img src="/img/image.jpg" alt="description" />
<img src="/img/image.jpg" alt="description" width="100" />
<img src="/img/image.jpg" alt="description" height="200" />

How it should be:

<img src="/img/image.png" alt="description" width="100" height="200" />
Importance

The width and the height attribute are used by browsers to understand the dimensions of elements like images before they are loaded. Adding the width and height attribute to image tags may therefore improve the rendering speed and user experience in the given document.

Operating Instruction

You might want to add the width and the height attribute to image tags whenever possible.

<meta refresh> found

Description

If a meta refresh is found, the URL is flagged with this hint. Discover all HTML documents on the crawled website that contain a meta refresh.

Example
<meta http-equiv="refresh" content="5; URL=http://www.example.com/">
Importance

A meta refresh is a client side redirect that triggers a GET request after a given amount of time. It is sometimes used to automatically forward users to another URL. This method has been used widely to manipulate search engines, so search engines might misinterpret usage of a meta refresh as a sneaky redirect. A meta refresh with a delay of more than one second also violates the Web Content Accessibility Guidelines. Using a meta refresh might result in a poor user experience as well as issues with rankings in search engines.

Operating Instruction

You might consider replacing meta refresh with an HTTP-redirect using a 301 or 302 status code, or even a JavaScript client-side redirect, depending on the requirements.

<script> loaded multiple files from local domain

Description

If multiple JavaScript files from the crawled domain are loaded, the URL is flagged with this hint. Use this report to discover all URLs that include more than one JavaScript file from the local domain.

Example
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
Importance

Depending on the protocol that is used, it may or may not be better to aggregate multiple included JavaScript files from the local domain into just one file to minimize the number of HTTP requests required to display the webpage in the browser.

In HTTP 1.0 and HTTP 1.1, clients limit the maximum number of parallel requests per host. This leads to delays if more connections are required for loading the webpage. Therefore, in HTTP 1.x it is better to aggregate multiple included JavaScript files from the local domain.

In HTTP 2, multiple files are transferred using a single connection. The limitation regarding the number of requests from HTTP 1.0 and HTTP 1.1 does not apply.

Operating Instruction

HTTP 1.x: The JavaScript files should be combined into a single file and the number of files should be minimized, if possible.

HTTP 2: No changes required.

<script> more than 3 KB within HTML

Description

If more than 3 KB of JavaScript is found within the HTML, the URL is flagged with this hint. Use this report to identify all occurrences of inline JavaScript with more than 3 KB in total.

Importance

If more than 3 KB of inline JavaScript is found in one HTML document, this usually indicates unnecessarily bloated code. 3 KB may not seem like a lot, but the numbers can add up if this occurs on larger websites. This leads to:

  • waste of bandwidth
  • lower performance
  • poor overall user experience

Moving inline JavaScript to separate files is a best practice for performance optimization.

Operating Instruction

JavaScript should be placed in a separate file whenever this helps to improve performance.

CSS <style> content larger than 0.5 KB

Description

If more than 0.5 KB of CSS is found within <style> tags, the URL is flagged with this hint. Use this report to identify all occurences of inline style sheets with more than 0.5 KB in total.

Importance

If more than 0.5 KB of inline CSS is found in one HTML document, this usually indicates unnecessarily bloated code. 0.5 KB may not seem like a lot, but the numbers can add up if this occurs on larger websites. This leads to:

  • Waste of bandwidth
  • Lower performance
  • Poor overall user experience

Moving inline CSS to seperate files is a best practice for performance optimization.

Operating Instruction

CSS should be placed in a separate file whenever this helps to improve performance.

CSS <style> found

Description

If CSS is found within a <style> tag, the URL is flagged with this hint. CSS should be placed in a separate file whenever it is used across multiple webpages.

Example
<style>
h1 { color: green; }
</style>
Importance

Inline CSS can indicate poorly written markup. CSS definitions should usually be in an external file that can be cached by clients and, once requested, be used for multiple page views. This reduces the size of the actual HTML document and improves the website's performance. If inline CSS is used excessively, this can lead to:

  • Waste of bandwidth
  • Lower performance
  • Poor overall user experience

Moving inline CSS to external files is a best practice for performance optimization.

Operating Instruction

CSS should be placed in a separate file whenever it is used across multiple webpages. By doing this, you can make the CSS cacheable and deliver HTML documents that have lower file sizes.

CSS loaded multiple files from local domain

Description

If multiple CSS files from the crawled domain are loaded by the webpage, it is flagged with this hint. Use this report to discover all URLs that include more than one CSS file from the local domain.

Example
<link rel="stylesheet" href="stylesheet0.css">
<link rel="stylesheet" href="stylesheet1.css">
<link rel="stylesheet" href="stylesheet2.css">
Importance

Depending on the protocol that is used, it may or may not be better to aggregate multiple included CSS files from the local domain to just one file to minimize the number of HTTP requests required to display the document.

In HTTP 1.0 and HTTP 1.1, clients limit the maximum number of parallel requests per host. This leads to delays if more connections are required for loading the webpage. Therefore, in HTTP 1.x it is better to aggregate multiple included CSS files from the local domain.

In HTTP 2, multiple files are tranferred using a single connection. The limitation regarding the number of requests from HTTP 1.0 and HTTP 1.1 does not apply.

Operating Instruction

HTTP 1.x: The files should be combined into a single file and the number of files should be minimized, if possible.

HTTP 2: No changes required regarding this hint.

Make sure to reference the CSS files in the <head> of the HTML.

CSS style attribute found

Description

If CSS is found as a style attribute, the URL is flagged with this hint. CSS should be placed in a separate file whenever it is used across multiple webpages. Use this report to identify all URLs that contain style attributes in the HTML markup.

Example
<p style="text-decoration:bold;">text</p>
Importance

Style attributes in HTML tags are usually not the most optimal way to achieve styling of certain elements. Best practice suggests to put CSS definitions into separate CSS files that can be cached by clients across multiple page views. This reduces the size of the actual HTML document and improves the website's performance.

Operating Instruction

Style defintions should be placed in a separate file whenever this helps to improve performance.

Compression not enabled

Description

Content compression was not enabled, or the gzip/deflate compression is not supported by the server.

Example

Request Header asking for gzip, deflate or sdch:

GET /page.html HTTP/1.1
Host: example.com
...
Accept-Encoding: gzip, deflate, sdch

Response Header with gzip compression:

HTTP/1.1 200 OK
...
Content-Encoding: gzip
Content-Length: 1140

Response Header without gzip compression:

HTTP/1.1 200 OK
...
Content-Length: 4726
Importance

Compression can reduce bandwidth usage dramatically and is recommended. Compression was introduced with HTTP 1.1. HTTP 1.0 does not support compression. Compression affects the data volume that needs to be transfered and can improve the performance of your website. Better performance equals a better user experience.

Operating Instruction

We recommend that you globally enable compression like gzip or deflate on your website.