{"id":4839,"date":"2025-08-14T14:13:52","date_gmt":"2025-08-14T12:13:52","guid":{"rendered":"https:\/\/wpmastertoolkit.com\/?p=4839"},"modified":"2025-08-15T19:12:33","modified_gmt":"2025-08-15T17:12:33","slug":"capo-js-wordpress-optimiser-le-head-avec-wpmastertoolkit-module-head-sorter","status":"publish","type":"post","link":"https:\/\/wpmastertoolkit.com\/en\/capo-js-wordpress-optimize-the-head-with-wpmastertoolkit-module-head-sorter\/","title":{"rendered":"Capo.js WordPress: optimizing the  with WPMasterToolKit (Head Sorter module)"},"content":{"rendered":"<p>When working with WordPress (themes, plugins, builders...), the <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> 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.<br>The good news: <strong>Head Sorter<\/strong> (WPMasterToolKit module) automatically tidies up, and <strong>Capo.js<\/strong> (Chrome extension) lets you check at a glance that everything's running smoothly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why is the <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> account<\/h2>\n\n\n\n<p><strong>Capo.js<\/strong> classifies <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> by <em>priority groups<\/em> (weight), to determine an optimal order. <strong>The most critical<\/strong> are the <em>pragma directives<\/em> (some <code data-no-auto-translation=\"\">&lt;meta http-equiv&gt;<\/code>then <code data-no-auto-translation=\"\">&lt;meta charset&gt;<\/code>, <code data-no-auto-translation=\"\">&lt;meta name=\"viewport\"&gt;<\/code>and <code data-no-auto-translation=\"\">&lt;base&gt;<\/code>), as they guide the browser very early on in the parsing process. They should therefore appear at the very top.<\/p>\n\n\n\n<p>Two useful reminders from the Capo rules:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code data-no-auto-translation=\"\">&lt;meta charset&gt;<\/code><\/strong> must be discovered very early (within the first ~1024 bytes) to avoid any encoding problems, including on the <code data-no-auto-translation=\"\">&lt;title&gt;<\/code>.<\/li>\n\n\n\n<li><strong><code data-no-auto-translation=\"\">&lt;base&gt;<\/code><\/strong> sets the base URL for relative links; to avoid broken links on early resources, it is recommended at the top of the <code data-no-auto-translation=\"\">&lt;head&gt;<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>Next come (in summary order) : <strong><code data-no-auto-translation=\"\">&lt;title&gt;<\/code><\/strong>, <strong>preconnect<\/strong>, <strong>synchronous stylesheets<\/strong>, <strong>scripts<\/strong> (defer\/async as appropriate), <strong>preload\/modulepreload<\/strong>, <strong>speculative hints<\/strong> (prefetch, dns-prefetch, prerender), then \"everything else\" (icons, social meta, etc.). <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What the module does <strong>Head Sorter<\/strong> (WPMasterToolKit)<\/h2>\n\n\n\n<p>The module <strong>Head Sorter<\/strong> automates sorting of <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> <strong>without touching the content<\/strong> tags :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Classification inspired by Capo.js<\/strong> critical guidelines and title move to the top, followed by pre-connections\/style sheets\/scripts and finally weak elements.<\/li>\n\n\n\n<li><strong>Respect for internal order<\/strong> when two elements have the same \"weight\" (their relative order is preserved).<\/li>\n\n\n\n<li><strong>WordPress compatible<\/strong> applies to front-end rendering, regardless of theme or plugins (ACF, WooCommerce, SEO plugins...).<\/li>\n\n\n\n<li><strong>Safe<\/strong> no aggressive rewriting, just a little <em>re-ordering<\/em>.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>In concrete terms: you keep the same tags, but Head Sorter <strong>range<\/strong> so that the browser sees what matters first.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Set up in 1 click<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Activate<\/strong> WPMasterToolKit \u2192 <strong>Head Sorter<\/strong>.<\/li>\n\n\n\n<li><strong>Purge cache<\/strong> (plugin + server cache\/CDN).<\/li>\n\n\n\n<li><strong>Load a public page<\/strong> (excluding admin) and test with Capo.<figure class=\"wp-block-image size-full\"><img alt=\"\" fetchpriority=\"high\" decoding=\"async\" width=\"531\" height=\"287\" src=\"https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2025\/08\/image.png\" class=\"wp-image-4840\" srcset=\"https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2025\/08\/image.png 531w, https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2025\/08\/image-300x162.png 300w, https:\/\/wpmastertoolkit.com\/wp-content\/uploads\/2025\/08\/image-18x10.png 18w\" sizes=\"(max-width: 531px) 100vw, 531px\" \/><\/figure><\/li>\n\n\n\n<li>If you have hooks\/custom code that inject tags into the <code data-no-auto-translation=\"\">&lt;head&gt;<\/code>reload the relevant page to validate the order.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Check the result with <strong>Capo.js<\/strong> (Chrome extension)<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Install the extension<\/strong> Capo.js from the Chrome Web Store, then click on the icon on a page of your site. The extension displays a <strong>colored bar<\/strong> which compares <strong>the real order<\/strong> from <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> (top line) to <strong>the ideal sorted order<\/strong> (bottom line). Ideally, the two lines should look very similar.<\/li>\n\n\n\n<li>Move the mouse over a color: a <strong>tooltip<\/strong> describes the item and its priority. Open the <strong>DevTools console<\/strong> Capo also logs details and any validation warnings. (<a href=\"https:\/\/rviscomi.github.io\/capo.js\/user\/extension\/\">rviscomi.github.io<\/a>)<\/li>\n\n\n\n<li><strong>Colors<\/strong> :\n<ul class=\"wp-block-list\">\n<li><strong>Red<\/strong> : elements <strong>high priority<\/strong> (pragma guidelines, <code data-no-auto-translation=\"\">&lt;title&gt;<\/code>).<\/li>\n\n\n\n<li><strong>Green<\/strong> : elements <strong>means<\/strong> (style sheets, \"normal\" scripts).<\/li>\n\n\n\n<li><strong>Blue\/Grey<\/strong> : elements <strong>low<\/strong> (speculative hints, social meta...). (<a href=\"https:\/\/rviscomi.github.io\/capo.js\/user\/extension\/\">rviscomi.github.io<\/a>)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">What Capo can also tell you (validation)<\/h3>\n\n\n\n<p>Capo makes <strong>conformity checks<\/strong> from <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> ; a few examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Only elements authorized by the spec should be included in the <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> otherwise, the browser can <strong>close the <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> prematurely<\/strong> and push (SEO) tags into the <code data-no-auto-translation=\"\">&lt;body&gt;<\/code>.<\/li>\n\n\n\n<li>There must be <strong>exactly one <code data-no-auto-translation=\"\">&lt;title&gt;<\/code><\/strong> and <strong>at most one <code data-no-auto-translation=\"\">&lt;base&gt;<\/code><\/strong>otherwise warnings.<\/li>\n\n\n\n<li><strong>Avoid CSP via <code data-no-auto-translation=\"\">&lt;meta http-equiv&gt;<\/code><\/strong> in Chrome, this <strong>disables scanner preload<\/strong> (known bug) - prefer HTTP header.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>If Capo issues a warning, correct the server-side configuration\/SEO or the code of the theme\/plugin concerned, then <strong>refresh<\/strong> to validate.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Recommended order model (practical checklist)<\/h2>\n\n\n\n<p>Here is a <strong>checklist<\/strong> simple, in line with the spirit of the Capo rules (top-down):<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Critical guidelines<\/strong> :\n<ul class=\"wp-block-list\">\n<li><code data-no-auto-translation=\"\">&lt;meta http-equiv&gt;<\/code> <em>selected<\/em> (e.g. <code data-no-auto-translation=\"\">content-security-policy<\/code> if really necessary in <code data-no-auto-translation=\"\">&lt;meta&gt;<\/code>but give preference to the HTTP header),<\/li>\n\n\n\n<li><strong><code data-no-auto-translation=\"\">&lt;meta charset=\"UTF-8\"&gt;<\/code><\/strong>,<\/li>\n\n\n\n<li><strong><code data-no-auto-translation=\"\">&lt;meta name=\"viewport\" \u2026&gt;<\/code><\/strong>,<\/li>\n\n\n\n<li><strong><code data-no-auto-translation=\"\">&lt;base href=\"\u2026\"&gt;<\/code><\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><code data-no-auto-translation=\"\">&lt;title&gt;<\/code><\/strong>.<\/li>\n\n\n\n<li><strong>Pre-connections<\/strong> : <code data-no-auto-translation=\"\">&lt;link rel=\"preconnect\" href=\"\u2026\"&gt;<\/code> (CDN police, analytics, API...).<\/li>\n\n\n\n<li><strong>Synchronous styles<\/strong> : <code data-no-auto-translation=\"\">&lt;link rel=\"stylesheet\"&gt;<\/code>, <code data-no-auto-translation=\"\">&lt;style&gt;<\/code>.<\/li>\n\n\n\n<li><strong>Scripts<\/strong> :\n<ul class=\"wp-block-list\">\n<li><strong><code data-no-auto-translation=\"\">&lt;script defer src=\"\u2026\"&gt;<\/code><\/strong> (referred),<\/li>\n\n\n\n<li><strong><code data-no-auto-translation=\"\">&lt;script async src=\"\u2026\"&gt;<\/code><\/strong> (asynchronous) as required.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Preload\/modulepreload<\/strong> (critical fonts, key CSS, modules).<\/li>\n\n\n\n<li><strong>Speculative hints<\/strong> : <code data-no-auto-translation=\"\">prefetch<\/code>, <code data-no-auto-translation=\"\">dns-prefetch<\/code>, <code data-no-auto-translation=\"\">prerender<\/code>.<\/li>\n\n\n\n<li><strong>Everything else<\/strong> icons, social meta, etc.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Activate <strong>Head Sorter<\/strong> It automatically arranges itself in this spirit, and you then make a <strong>Capo<\/strong> to check that \"real\" \u2248 \"ideal\".<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Specific WordPress tips<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code data-no-auto-translation=\"\">&lt;meta charset&gt;<\/code> &amp; <code data-no-auto-translation=\"\">&lt;title&gt;<\/code><\/strong> : most well-crafted themes place them high up the list <code data-no-auto-translation=\"\">wp_head()<\/code>. If a plugin moves them, Head Sorter will move them again.<\/li>\n\n\n\n<li><strong>Preconnect<\/strong> target your third-party domains <em>real<\/em> (CDN fonts, videos, analytics). No need to overdo it.<\/li>\n\n\n\n<li><strong>CSP<\/strong> : prefer the<strong>HTTP header<\/strong> (server\/CDN) rather than a <code data-no-auto-translation=\"\">&lt;meta http-equiv&gt;<\/code> in the <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> to avoid impact on the scanner preload.<\/li>\n\n\n\n<li><strong>Covers<\/strong> Test on an out-of-cache page to validate the structure, then purge globally.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Before\/after example (condensed diagram)<\/h2>\n\n\n\n<p><strong>Forward (untidy)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\" data-no-auto-translation=\"\">&lt;link rel=\"stylesheet\" href=\"style.css\">\n&lt;script src=\"jquery.js\">&lt;\/script>\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n&lt;title>My Page Title&lt;\/title>\n&lt;meta charset=\"UTF-8\">\n<\/code><\/pre>\n\n\n\n<p><strong>After (sorted by Head Sorter)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\" data-no-auto-translation=\"\">&lt;meta charset=\"UTF-8\">\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n&lt;title>My Page Title&lt;\/title>\n&lt;link rel=\"preconnect\" href=\"https:\/\/cdn.example.com\">\n&lt;link rel=\"stylesheet\" href=\"style.css\">\n&lt;script defer src=\"jquery.js\">&lt;\/script>\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p><strong>Head Sorter<\/strong> puts your <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> WordPress <strong>squared automatically<\/strong>and <strong>Capo.js<\/strong> offers you visual proof and validation safeguards. It's simple, measurable, and avoids an invisible but costly technical debt.<\/p>","protected":false},"excerpt":{"rendered":"<p>Capo.js and Head Sorter form a simple and effective duo for optimizing the head of a WordPress site.<br \/>\nHead Sorter, a module of WPMasterToolKit, automatically rearranges tags in the ideal order for performance and SEO.<br \/>\nWith the Capo.js Chrome extension, you can check at a glance that everything is perfectly organized.<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4839","post","type-post","status-publish","format-standard","hentry","category-non-classe"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/posts\/4839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/comments?post=4839"}],"version-history":[{"count":5,"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/posts\/4839\/revisions"}],"predecessor-version":[{"id":4984,"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/posts\/4839\/revisions\/4984"}],"wp:attachment":[{"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/media?parent=4839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/categories?post=4839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmastertoolkit.com\/en\/wp-json\/wp\/v2\/tags?post=4839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}