Accessibility & HTML · Checked on every page
Critical resource hints (preload, prefetch)What it checks and how to fix it
What it checks
Collects the page's resource hints (preload, prefetch, preconnect, dns-prefetch, modulepreload). It flags preloads without an as attribute, and more than 2 third-party origins serving scripts or stylesheets without a preconnect. It passes with hints and no issues, warns when hints come with issues, and warns when there are no hints at all.
Why it matters
Before a browser can download a file from another origin it must resolve DNS, open a TCP connection and negotiate TLS, which can cost several hundred milliseconds on mobile. Preconnect starts that work early, and preload fetches critical fonts, CSS or images before the parser discovers them. A preload without as is fetched at the wrong priority and often downloaded twice.
How to fix it
Preconnect to the third-party origins the page needs early, and preload the few resources that are critical to first paint.
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<!-- Preload needs "as" (and crossorigin for fonts) -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.webp" as="image" fetchpriority="high">
</head>
Keep it short: preconnect to no more than a handful of origins and preload only what is needed for the first screen, or the hints compete with each other.
Servers can send the same hints as headers (Link: </fonts/inter.woff2>; rel=preload; as=font; crossorigin), and Cloudflare can turn them into 103 Early Hints.