Add SiteLint to your site

To integrate your site with SiteLint Audits, you need to be able to update the HTML code of the website you want to audit.

To install the script you can:

  1. Insert the code snippet between the <head> and </head> HTML tags of your site.
  2. Use our SiteLint WordPress plugin.
  3. Use Google Tag Manager.

We recommend also adding the following code to speed up loading even further:

The preconnect link code
<link rel="preconnect" href="https://auditor.sitelint.com/" crossorigin>

Where to find your JavaScript snippet?

  1. Log In to the Platform. Don’t have an account? Sign Up to create an account. The SiteLint code snippet will also be available on the Sign Up Welcome page.
  2. Go to Settings, then select Api Token.
  3. Use action Installation to generate the code snippet.
  4. Copy the entire content of the text box to the clipboard (or use the Copy script to clipboard button for that purpose).
  5. Insert the code snippet between the <head> and </head> HTML tags of your site.

How do I verify if the audits work?

Once the code snippet is placed on your site you should start receiving audit results and they should be available under Audits, then Sites. The reports will be visible typically within 24-48 hours.

See also How to check if SiteLint is working for troubleshooting potential issues.

Configuration options for the code snippet

The SiteLint code snippet with audits is also configurable under Settings, then select Api Token and use action Installation.

Sitelint code snippet options: start loading on event, loading delay in ms, no delay checkbox, include hidden elements, remove sensitive data

There are the following options:

  1. Start loading on the event – you can choose on which event the code should start loading: onload or DOMContentLoaded. Default: DOMContentLoaded
  2. Loading delay in ms – for any reason, you may want to delay the loading code with a specific delay time. Default: no delay.
  3. Include hidden elements – this option allows you to include or exclude invisible elements while auditing the site. Default: true.
  4. Remove sensitive data – this option allows you to remove all texts as well as all form controls value. Default: false.
Your site needs to be updated with a new code snippet to apply the configuration options. Simply replace the current code or insert it between the <head> and </head> HTML tags of your site, if it’s generated for the first time.

Technical details

The SiteLint code snippet is lazy-loaded and does not impact the initial page loading performance. It uses defer attribute, but you can change that to async when you need.

How does the async and defer attribute works?

This is all summarized in the schematic diagram below:

With <script>, parsing is interrupted by fetching and execution. With <script defer>, fetching is parallel to parsing and execution takes place after all parsing has finished. And with <script async>, fetching is parallel to parsing but once it finishes parsing is interrupted to execute the script. The story for <script type="module"> is similar to <script defer>, but the dependencies will be fetched as well, and the story for <script type="module" async> is similar to <script async> with the extra dependency fetching.

Source: WHATWG