Skip to content

The rules of capo.js

Elements are categorized into 11 groups. Each group has an associated weight to determine the optimal sort order. Elements within the same group are considered equal weight and displayed in the order they’re found in the document.

β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ 11. Pragma directives

Pragma directives are the highest weighted elements in capo.js. They tell the browser how to parse or handle the document, so they must be discovered as early as possible to avoid race conditions with other content.

<meta http-equiv>

The http-equiv meta tag is used to set directives equivalent to HTTP headers.

Most HTTP headers are unsupported keywords for the http-equiv attribute, so capo.js only recognizes a few of them:

  • default-style
  • x-dns-prefetch-control
  • accept-ch
  • delegate-ch
  • content-security-policy
  • origin-trial
  • content-type

Some keywords like refresh are standardized and widely supported by browsers, but capo.js does not weigh them as highly as other http-equiv directives because it’s not strictly necessary for them to be placed in the top position.

default-style

default-style is an obscure-yet-valid keyword that tells the browser which alternate stylesheet to use as the preferred default.

This declaration should come before any stylesheets that may need to be enabled.

x-dns-prefetch-control

x-dns-prefetch-control is a non-standard keyword that tells the browser whether to perform DNS prefetching on the page.

Its only legitimate use is to disable prefetching, so when it’s present, capo.js recommends placing it in the top position before any DNS lookups occur.

accept-ch

accept-ch is a non-standard keyword that tells the browser which client hints to send back to the server.

This declaration should be set before any subresource requests are made to the origin, so capo.js recommends placing it in the top position.

delegate-ch

delegate-ch is a non-standard keyword that tells the browser which client hints may be delegated to third party origins.

content-security-policy

content-security-policy is a non-standard keyword that provides the browser with a security policy to use on the page.

To effectively mitigate all possible security risks, this declaration should be set before any resource content, so capo.js recommends placing it in the top position.

origin-trial

origin-trial is a non-standard keyword that allows developers to test new web platform features on a per-origin basis.

See origin trial validation for more information about how capo.js validates origin trial tokens.

Because origin trials have the potential to influence how the browser behaves, capo.js recommends placing this declaration in the top position.

content-type

content-type is a standard keyword that defines the character encoding for the page.

See <meta charset> for more information about why this declaration should be placed in the top position.

<meta charset>

Every page must declare a character encoding of UTF-8, using either the charset meta tag or the Content-Type HTTP response header. When the meta tag is used, it must be discoverable within the first 1024 bytes of the document.

To avoid encoding issues with user-visible content like the <title> element, capo.js recommends placing this declaration in top position.

<meta name=viewport>

<base>

The base element sets the base URL for all relative URLs in the document.

To avoid any broken links for resources loaded early in the document, capo.js recommends placing the <base> element in the top position.

β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ 10. Title

<title>

β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ 9. Preconnect hints

β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ 8. Asynchronous scripts

<script async src>

β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ 7. Import styles

@import

β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ 6. Synchronous scripts

<script src>

β–ˆβ–ˆβ–ˆβ–ˆβ–ˆ 5. Synchronous styles

<style>

β–ˆβ–ˆβ–ˆβ–ˆ 4. Preload hints

β–ˆβ–ˆβ–ˆ 3. Deferred scripts

<script defer src>

β–ˆβ–ˆ 2. Prefetch and prerender hints

β–ˆ 1. Everything else