EN 
FR 
ES 
When working with WordPress (themes, plugins, builders...), the <head> ends up in a mess: critical tags too low, scripts before the title, preconnections that can't be found... Result: less efficient parsing and unnecessary perf/SEO losses.
The good news: Head Sorter (WPMasterToolKit module) automatically tidies up, and Capo.js (Chrome extension) lets you check at a glance that everything's running smoothly.
Why is the <head> account
Capo.js classifies <head> by priority groups (weight), to determine an optimal order. The most critical are the pragma directives (some <meta http-equiv>then <meta charset>, <meta name="viewport">and <base>), as they guide the browser very early on in the parsing process. They should therefore appear at the very top.
Two useful reminders from the Capo rules:
<meta charset>must be discovered very early (within the first ~1024 bytes) to avoid any encoding problems, including on the<title>.<base>sets the base URL for relative links; to avoid broken links on early resources, it is recommended at the top of the<head>.
Next come (in summary order) : <title>, preconnect, synchronous stylesheets, scripts (defer/async as appropriate), preload/modulepreload, speculative hints (prefetch, dns-prefetch, prerender), then "everything else" (icons, social meta, etc.).
What the module does Head Sorter (WPMasterToolKit)
The module Head Sorter automates sorting of <head> without touching the content tags :
- Classification inspired by Capo.js critical guidelines and title move to the top, followed by pre-connections/style sheets/scripts and finally weak elements.
- Respect for internal order when two elements have the same "weight" (their relative order is preserved).
- WordPress compatible applies to front-end rendering, regardless of theme or plugins (ACF, WooCommerce, SEO plugins...).
- Safe no aggressive rewriting, just a little re-ordering.
In concrete terms: you keep the same tags, but Head Sorter range so that the browser sees what matters first.
Set up in 1 click
- Activate WPMasterToolKit → Head Sorter.
- Purge cache (plugin + server cache/CDN).
- Load a public page (excluding admin) and test with Capo.
- If you have hooks/custom code that inject tags into the
<head>reload the relevant page to validate the order.
Check the result with Capo.js (Chrome extension)
- Install the extension Capo.js from the Chrome Web Store, then click on the icon on a page of your site. The extension displays a colored bar which compares the real order from
<head>(top line) to the ideal sorted order (bottom line). Ideally, the two lines should look very similar. - Move the mouse over a color: a tooltip describes the item and its priority. Open the DevTools console Capo also logs details and any validation warnings. (rviscomi.github.io)
- Colors :
- Red : elements high priority (pragma guidelines,
<title>). - Green : elements means (style sheets, "normal" scripts).
- Blue/Grey : elements low (speculative hints, social meta...). (rviscomi.github.io)
- Red : elements high priority (pragma guidelines,
What Capo can also tell you (validation)
Capo makes conformity checks from <head> ; a few examples:
- Only elements authorized by the spec should be included in the
<head>otherwise, the browser can close the<head>prematurely and push (SEO) tags into the<body>. - There must be exactly one
<title>and at most one<base>otherwise warnings. - Avoid CSP via
<meta http-equiv>in Chrome, this disables scanner preload (known bug) - prefer HTTP header.
If Capo issues a warning, correct the server-side configuration/SEO or the code of the theme/plugin concerned, then refresh to validate.
Recommended order model (practical checklist)
Here is a checklist simple, in line with the spirit of the Capo rules (top-down):
- Critical guidelines :
<meta http-equiv>selected (e.g.content-security-policyif really necessary in<meta>but give preference to the HTTP header),<meta charset="UTF-8">,<meta name="viewport" …>,<base href="…">.
<title>.- Pre-connections :
<link rel="preconnect" href="…">(CDN police, analytics, API...). - Synchronous styles :
<link rel="stylesheet">,<style>. - Scripts :
<script defer src="…">(referred),<script async src="…">(asynchronous) as required.
- Preload/modulepreload (critical fonts, key CSS, modules).
- Speculative hints :
prefetch,dns-prefetch,prerender. - Everything else icons, social meta, etc.
Activate Head Sorter It automatically arranges itself in this spirit, and you then make a Capo to check that "real" ≈ "ideal".
Specific WordPress tips
<meta charset>&<title>: most well-crafted themes place them high up the listwp_head(). If a plugin moves them, Head Sorter will move them again.- Preconnect target your third-party domains real (CDN fonts, videos, analytics). No need to overdo it.
- CSP : prefer theHTTP header (server/CDN) rather than a
<meta http-equiv>in the<head>to avoid impact on the scanner preload. - Covers Test on an out-of-cache page to validate the structure, then purge globally.
Before/after example (condensed diagram)
Forward (untidy)
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page Title</title>
<meta charset="UTF-8">
After (sorted by Head Sorter)
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page Title</title>
<link rel="preconnect" href="https://cdn.example.com">
<link rel="stylesheet" href="style.css">
<script defer src="jquery.js"></script>
Conclusion
Head Sorter puts your <head> WordPress squared automaticallyand Capo.js offers you visual proof and validation safeguards. It's simple, measurable, and avoids an invisible but costly technical debt.
