From harness-claude
Implements resource hints like preload, prefetch, preconnect, dns-prefetch, modulepreload, fetchpriority, and 103 Early Hints to eliminate late resource discovery and accelerate critical asset delivery in web apps.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Use preload, prefetch, preconnect, dns-prefetch, modulepreload, fetchpriority, and 103 Early Hints to inform the browser about resources needed soon — eliminating discovery latency and accelerating critical resource delivery.
Measures and optimizes Largest Contentful Paint (LCP) by decomposing into TTFB, resource load delay, load time, and render delay phases with targeted fixes like preload links and TTFB reduction. For Lighthouse >2.5s or slow hero images.
Debugs and optimizes Largest Contentful Paint (LCP) using Chrome DevTools traces and insights, analyzing TTFB, resource load delays/durations, and render delays for Core Web Vitals.
Provides page speed optimization guidelines and HTML/CSS/JS patterns to meet Core Web Vitals targets (LCP<2.5s, FID<100ms, CLS<0.1) for funnel pages.
Share bugs, ideas, or general feedback.
Use preload, prefetch, preconnect, dns-prefetch, modulepreload, fetchpriority, and 103 Early Hints to inform the browser about resources needed soon — eliminating discovery latency and accelerating critical resource delivery.
Audit resource discovery timing. Open Chrome DevTools Network panel and look for resources that start loading late despite being needed early. The "Initiator" column shows what triggered each request. Late-discovered resources are candidates for resource hints.
Add preconnect for critical third-party origins. Preconnect performs DNS + TCP + TLS ahead of time, saving 100-300ms per origin:
<head>
<!-- Preconnect to critical third-party origins -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://cdn.example.com" />
<!-- dns-prefetch as fallback for older browsers -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
</head>
Limit preconnect to 4-6 origins maximum. Each preconnect consumes a socket and CPU for the TLS handshake.
Use preload for late-discovered critical resources. Preload tells the browser to fetch a resource immediately at high priority, even before it would normally be discovered:
<head>
<!-- Preload LCP hero image (browser would discover it late in body) -->
<link
rel="preload"
href="/images/hero.webp"
as="image"
type="image/webp"
fetchpriority="high"
/>
<!-- Preload critical font (browser discovers during CSS parsing) -->
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin />
<!-- Preload critical CSS that's loaded dynamically -->
<link rel="preload" href="/styles/above-fold.css" as="style" />
</head>
Critical rule: Always include the as attribute. Without it, the browser cannot set the correct priority or content-security-policy check, and may double-fetch the resource.
Use modulepreload for ES module dependency chains. Standard preload does not parse module dependencies. Modulepreload fetches the module AND its static imports:
<!-- Preload the module and its dependency tree -->
<link rel="modulepreload" href="/js/app.mjs" />
<link rel="modulepreload" href="/js/utils.mjs" />
Use prefetch for next-navigation resources. Prefetch downloads resources at low priority for future navigations:
<!-- Prefetch likely next page's resources -->
<link rel="prefetch" href="/dashboard/chunk.js" />
<link rel="prefetch" href="/api/user/profile" />
Use fetchpriority to override browser heuristics. When the browser's automatic priority is wrong:
<!-- Boost LCP image priority -->
<img src="/hero.webp" fetchpriority="high" alt="Hero" />
<!-- Lower priority for below-fold images the browser might prioritize -->
<img src="/ad-banner.webp" fetchpriority="low" alt="Ad" />
<!-- Boost priority for critical async script -->
<script src="/critical-widget.js" async fetchpriority="high"></script>
Implement 103 Early Hints. 103 Early Hints allows the server to send preload hints while still processing the request:
HTTP/1.1 103 Early Hints
Link: </styles/main.css>; rel=preload; as=style
Link: </fonts/inter.woff2>; rel=preload; as=font; crossorigin
Link: <https://cdn.example.com>; rel=preconnect
HTTP/1.1 200 OK
Content-Type: text/html
...
This is especially valuable when the server takes 200-500ms to generate the response — the browser starts fetching resources during that wait time.
| Scenario | Hint | Priority |
|---|---|---|
| Resource needed on THIS page, discovered late | preload | High |
| Resource needed on NEXT page (likely navigation) | prefetch | Low (idle) |
| Third-party origin needed soon | preconnect | N/A (connection only) |
| Third-party origin might be needed | dns-prefetch | N/A (DNS only) |
| ES module with dependency chain | modulepreload | High |
| Override browser's resource priority | fetchpriority | Explicit |
These are frequently confused. Preload is for the current navigation — it tells the browser "you will need this resource NOW, start fetching immediately at high priority." Prefetch is for future navigations — it tells the browser "the user might navigate here next, download this at idle priority if bandwidth allows."
Using prefetch for current-page resources wastes the first visit (resource loads at low priority). Using preload for next-page resources wastes bandwidth on resources that may never be used.
Shopify improved LCP by 1.3 seconds on their storefront pages by adding two resource hints: (1) <link rel="preload" href="/hero.webp" as="image" fetchpriority="high"> for the product hero image — previously discovered only when the browser parsed the <img> tag in the body, and (2) <link rel="preconnect" href="https://cdn.shopify.com"> for their CDN origin — previously the connection was established on first resource request. The preload moved image fetch start from 800ms to 200ms (saving 600ms), and preconnect saved 300ms of connection overhead.
Wikipedia reduced page load time by 300ms by implementing dns-prefetch for all external origins (Wikimedia Commons, upload.wikimedia.org, meta.wikimedia.org) and preloading critical fonts. Their pages reference 3-4 external origins, and dns-prefetch eliminated the DNS resolution delay (averaging 40-80ms per origin) from the critical path. They also preloaded their custom font (WikiFont, 28KB WOFF2) to prevent FOIT on first visits.
Preloading everything. If more than 3-5 resources are preloaded, they compete for bandwidth and may delay actually critical resources. Preload only resources that are: (1) critical for the current page, (2) discovered late by the browser, and (3) on the critical rendering path.
Preload without as attribute. Without as, the browser cannot determine the resource type, resulting in: (1) wrong fetch priority, (2) potential double-fetch when the resource is actually used, (3) CSP violations. Always specify: as="image", as="font", as="style", as="script", etc.
Using prefetch for current-page resources. Prefetch is low priority and may not complete before the resource is needed. If the resource is needed on the current page, use preload instead. Chrome shows a console warning when a preloaded resource is not used within 3 seconds.
Too many preconnect hints. Each preconnect opens a socket and performs a TLS handshake. Beyond 6 origins, the connection overhead (memory, CPU) creates diminishing returns and can actually slow down high-priority connections due to socket exhaustion.