Head-order analyzer
Get your <head> in order — literally. Browsers discover resources top-to-bottom, so element order decides what starts loading first. This analyzer weighs every element the way capo.js does and shows your order against the optimal one.
What the weights mean
Pragma metas (charset, viewport, CSP) must come first because they change how everything after them is parsed. Then the title, then network hints and blocking resources in the order the browser can best overlap them: preconnect, async scripts, stylesheets and sync scripts, preloads, deferred scripts, and speculative hints last. Everything else — icons, Open Graph tags, canonical — carries no loading priority and belongs at the bottom.
Weights and detection rules last verified against the capo.js source 2026-08-19
FAQ
Does head order really affect performance?
Yes, measurably. The preload scanner starts fetching resources in the order it finds them; a stylesheet declared after a big blob of Open Graph tags starts its network round-trip later than it needed to, and a charset declared after byte 1024 can force the browser to re-parse the document. Order is the cheapest performance win there is — it costs zero bytes.
Why do sync scripts rank above stylesheets?
Because a synchronous script that appears after a stylesheet cannot execute until that stylesheet loads — the script might read layout. Putting sync scripts first lets them run while stylesheets download in parallel, instead of chaining the two.
What breaks a head entirely?
Any element that isn't metadata content — an <img>, <div> or stray text makes the browser close <head> on the spot and hoist everything after it into the body. Tags that crawlers only read from the head (hreflang, canonical, Open Graph) can silently vanish that way; this analyzer flags it as an error.