Audisto CSS Checker

How to detect CSS issues

The Audisto Crawler identifies common mistakes with CSS integration. Use this group of reports to create and keep an overview over your site’s CSS usage.

Issues with CSS can lead to a range of problems in terms of the site’s performance and user experience:

  • Increase in file size
  • Unnecessary requests to a multitude of css files instead of one

Example: Audisto CSS Check with the CSS hint reports for the current crawl

Audisto CSS Check with the CSS hint reports for the current crawl

Here is a list of all specific hints related to CSS inclusion on your website, that can be identified with the help of the Audisto Crawler.

Table Of Content

Hints

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 are found in one HTML document, this usually indicates unnecessarily bloated code. 0.5 KB doesn't seem like a lot, but the numbers can add up if this occurs on larger websites. This leads to:

  • Waste of bandwidth
  • Lower performance
  • Overall worse user experience

Moving inline CSS to seperate files, is part of the 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 URLs.

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 URLs. This lowers the size of the actual HTML document and adds to the website's performance. If inline css is used excessively, this can lead to

  • Waste of bandwidth
  • Lower performance
  • Overall worse user experience

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

Operating Instruction

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

CSS loaded multiple files from local domain

Description

If multiple CSS-files from the crawled domain are loaded by the URL, it is flagged with this hint. Discover all URLs that include more than one CSS file from the local domain by using this report.

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 might or might not be better to aggregate multiple included CSS files from the local domain to just one file to minize 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 URL. Therefore, in HTTP 1.x it is better to aggregate multiple included CSS files from the local domain.

In HTTP 2, multiple files are tranfered 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 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 URLs. 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 optimized 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 requests. This lowers the size of the actual HTML document and adds to the website's performance.

Operating Instruction

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