{
    "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\/fr\/capo-js-wordpress-optimiser-le-head-avec-wpmastertoolkit-module-head-sorter\/",
    "title": {
        "rendered": "Capo.js WordPress : optimiser le &lt;head> avec WPMasterToolKit (module Head Sorter)"
    },
    "content": {
        "rendered": "<p class=\"wp-block-paragraph\">Quand on travaille avec WordPress (th\u00e8mes, plugins, builders\u2026), le <code>&lt;head&gt;<\/code> finit vite \u00ab en vrac \u00bb : balises critiques trop bas, scripts avant le titre, pr\u00e9connexions introuvables\u2026 R\u00e9sultat : parsing moins efficace et petites pertes de perf\/SEO inutiles.<br>La bonne nouvelle : <strong>Head Sorter<\/strong> (module de WPMasterToolKit) remet de l\u2019ordre automatiquement, et <strong>Capo.js<\/strong> (extension Chrome) permet de v\u00e9rifier en un clin d\u2019\u0153il que tout est nickel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pourquoi l\u2019ordre du <code>&lt;head&gt;<\/code> compte<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Capo.js<\/strong> classe les \u00e9l\u00e9ments du <code>&lt;head&gt;<\/code> par <em>groupes de priorit\u00e9<\/em> (poids), pour d\u00e9terminer un ordre optimal. <strong>Les plus critiques<\/strong> sont les <em>pragma directives<\/em> (certaines <code>&lt;meta http-equiv&gt;<\/code>, puis <code>&lt;meta charset&gt;<\/code>, <code>&lt;meta name=\"viewport\"&gt;<\/code>, et <code>&lt;base&gt;<\/code>), car elles guident le navigateur tr\u00e8s t\u00f4t dans le parsing. Elles doivent donc appara\u00eetre tout en haut.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Deux rappels utiles issus des r\u00e8gles Capo :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;meta charset&gt;<\/code><\/strong> : doit \u00eatre d\u00e9couverte tr\u00e8s t\u00f4t (dans les ~1024 premiers octets) afin d\u2019\u00e9viter tout souci d\u2019encodage, y compris sur le <code>&lt;title&gt;<\/code>.<\/li>\n\n\n\n<li><strong><code>&lt;base&gt;<\/code><\/strong> : fixe l\u2019URL de base des liens relatifs ; pour \u00e9viter des liens cass\u00e9s sur les ressources pr\u00e9coces, elle est recommand\u00e9e en haut du <code>&lt;head&gt;<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ensuite viennent (ordre r\u00e9sum\u00e9) : <strong><code>&lt;title&gt;<\/code><\/strong>, <strong>preconnect<\/strong>, <strong>stylesheets synchrones<\/strong>, <strong>scripts<\/strong> (defer\/async selon les cas), <strong>preload\/modulepreload<\/strong>, <strong>hints sp\u00e9culatifs<\/strong> (prefetch, dns-prefetch, prerender), puis \u00ab tout le reste \u00bb (ic\u00f4nes, m\u00e9ta sociales, etc.). <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ce que fait le module <strong>Head Sorter<\/strong> (WPMasterToolKit)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Le module <strong>Head Sorter<\/strong> automatise le tri du <code>&lt;head&gt;<\/code> <strong>sans toucher au contenu<\/strong> des balises :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Classement inspir\u00e9 de Capo.js<\/strong> : les directives critiques et le titre remontent tout en haut, puis les pr\u00e9-connexions\/feuilles de style\/scripts et enfin les \u00e9l\u00e9ments faibles.<\/li>\n\n\n\n<li><strong>Respect de l\u2019ordre interne<\/strong> quand deux \u00e9l\u00e9ments ont le m\u00eame \u00ab poids \u00bb (on conserve leur ordre relatif).<\/li>\n\n\n\n<li><strong>Compatible WordPress<\/strong> : il s\u2019applique au rendu frontal, quels que soient le th\u00e8me ou les plugins (ACF, WooCommerce, SEO plugins\u2026).<\/li>\n\n\n\n<li><strong>S\u00e9curisant<\/strong> : pas de r\u00e9\u00e9criture agressive, seulement du <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 class=\"wp-block-paragraph\">Concr\u00e8tement : vous gardez vos m\u00eames balises, mais Head Sorter les <strong>range<\/strong> pour que le navigateur voie d\u2019abord ce qui compte.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Mise en place en 1 clique<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Activez<\/strong> WPMasterToolKit \u2192 <strong>Head Sorter<\/strong>.<\/li>\n\n\n\n<li><strong>Purge cache<\/strong> (plugin + cache serveur\/CDN).<\/li>\n\n\n\n<li><strong>Chargez une page publique<\/strong> (hors admin) et testez avec 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>Si vous avez des hooks\/custom code qui injectent des tags dans le <code>&lt;head&gt;<\/code>, rechargez la page concern\u00e9e pour valider l\u2019ordre.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">V\u00e9rifier le r\u00e9sultat avec <strong>Capo.js<\/strong> (extension Chrome)<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Installez l\u2019extension<\/strong> Capo.js depuis le Chrome Web Store, puis cliquez sur l\u2019ic\u00f4ne sur une page de votre site. L\u2019extension affiche une <strong>barre color\u00e9e<\/strong> qui compare <strong>l\u2019ordre r\u00e9el<\/strong> du <code>&lt;head&gt;<\/code> (ligne du haut) \u00e0 <strong>l\u2019ordre tri\u00e9 id\u00e9al<\/strong> (ligne du bas). Id\u00e9alement, les deux lignes se ressemblent fortement.<\/li>\n\n\n\n<li>Passez la souris sur une couleur : un <strong>tooltip<\/strong> d\u00e9crit l\u2019\u00e9l\u00e9ment et sa priorit\u00e9. Ouvrez la <strong>console DevTools<\/strong> : Capo y loggue aussi les d\u00e9tails et \u00e9ventuels avertissements de validation. (<a href=\"https:\/\/rviscomi.github.io\/capo.js\/user\/extension\/\">rviscomi.github.io<\/a>)<\/li>\n\n\n\n<li><strong>Couleurs<\/strong> :\n<ul class=\"wp-block-list\">\n<li><strong>Rouge<\/strong> : \u00e9l\u00e9ments <strong>tr\u00e8s prioritaires<\/strong> (pragma directives, <code>&lt;title&gt;<\/code>).<\/li>\n\n\n\n<li><strong>Vert<\/strong> : \u00e9l\u00e9ments <strong>moyens<\/strong> (feuilles de style, scripts \u00ab normaux \u00bb).<\/li>\n\n\n\n<li><strong>Bleu\/Gris<\/strong> : \u00e9l\u00e9ments <strong>faibles<\/strong> (hints sp\u00e9culatifs, m\u00e9ta sociales\u2026). (<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\">Ce que Capo peut aussi vous signaler (validation)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Capo r\u00e9alise des <strong>v\u00e9rifications de conformit\u00e9<\/strong> du <code>&lt;head&gt;<\/code> ; quelques exemples :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Seuls des \u00e9l\u00e9ments autoris\u00e9s par la spec doivent figurer dans le <code>&lt;head&gt;<\/code> ; sinon, le navigateur peut <strong>fermer le <code>&lt;head&gt;<\/code> pr\u00e9matur\u00e9ment<\/strong> et pousser des balises (SEO) dans le <code>&lt;body&gt;<\/code>.<\/li>\n\n\n\n<li>Il doit y avoir <strong>exactement un <code>&lt;title&gt;<\/code><\/strong> et <strong>au plus un <code>&lt;base&gt;<\/code><\/strong>, sinon avertissements.<\/li>\n\n\n\n<li><strong>\u00c9vitez le CSP via <code>&lt;meta http-equiv&gt;<\/code><\/strong> : en Chrome, cela <strong>d\u00e9sactive le preload scanner<\/strong> (bug connu) \u2014 pr\u00e9f\u00e9rez l\u2019en-t\u00eate HTTP.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Si Capo remonte un avertissement, corrigez la configuration c\u00f4t\u00e9 serveur\/SEO ou le code du th\u00e8me\/plugin concern\u00e9, puis <strong>rafra\u00eechissez<\/strong> pour valider.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Mod\u00e8le d\u2019ordre recommand\u00e9 (checklist pratique)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Voici une <strong>checklist<\/strong> simple, align\u00e9e sur l\u2019esprit des r\u00e8gles Capo (du haut vers le bas) :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Directives critiques<\/strong> :\n<ul class=\"wp-block-list\">\n<li><code>&lt;meta http-equiv&gt;<\/code> <em>s\u00e9lectionn\u00e9es<\/em> (p.ex. <code>content-security-policy<\/code> si vraiment n\u00e9cessaire en <code>&lt;meta&gt;<\/code>, mais privil\u00e9gier l\u2019ent\u00eate HTTP),<\/li>\n\n\n\n<li><strong><code>&lt;meta charset=\"UTF-8\"&gt;<\/code><\/strong>,<\/li>\n\n\n\n<li><strong><code>&lt;meta name=\"viewport\" \u2026&gt;<\/code><\/strong>,<\/li>\n\n\n\n<li><strong><code>&lt;base href=\"\u2026\"&gt;<\/code><\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><code>&lt;title&gt;<\/code><\/strong>.<\/li>\n\n\n\n<li><strong>Pr\u00e9connexions<\/strong> : <code>&lt;link rel=\"preconnect\" href=\"\u2026\"&gt;<\/code> (CDN police, analytics, API\u2026).<\/li>\n\n\n\n<li><strong>Styles synchrones<\/strong> : <code>&lt;link rel=\"stylesheet\"&gt;<\/code>, <code>&lt;style&gt;<\/code>.<\/li>\n\n\n\n<li><strong>Scripts<\/strong> :\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;script defer src=\"\u2026\"&gt;<\/code><\/strong> (d\u00e9f\u00e9r\u00e9s),<\/li>\n\n\n\n<li><strong><code>&lt;script async src=\"\u2026\"&gt;<\/code><\/strong> (asynchrones) selon les besoins.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Preload\/modulepreload<\/strong> (polices critiques, CSS cl\u00e9, modules).<\/li>\n\n\n\n<li><strong>Hints sp\u00e9culatifs<\/strong> : <code>prefetch<\/code>, <code>dns-prefetch<\/code>, <code>prerender<\/code>.<\/li>\n\n\n\n<li><strong>Tout le reste<\/strong> : ic\u00f4nes, m\u00e9ta sociales, etc.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Activez <strong>Head Sorter<\/strong> : il range automatiquement dans cet esprit, vous passez ensuite un coup de <strong>Capo<\/strong> pour v\u00e9rifier que \u00ab r\u00e9el \u00bb \u2248 \u00ab id\u00e9al \u00bb.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Conseils sp\u00e9cifiques WordPress<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;meta charset&gt;<\/code> &amp; <code>&lt;title&gt;<\/code><\/strong> : la plupart des th\u00e8mes bien faits les placent haut dans <code>wp_head()<\/code>. Si un plugin les bouge, Head Sorter les remontera.<\/li>\n\n\n\n<li><strong>Pr\u00e9connect<\/strong> : ciblez vos domaines tiers <em>r\u00e9els<\/em> (CDN polices, vid\u00e9os, analytics). Inutile d\u2019en abuser.<\/li>\n\n\n\n<li><strong>CSP<\/strong> : pr\u00e9f\u00e9rez l\u2019<strong>en-t\u00eate HTTP<\/strong> (serveur\/CDN) plut\u00f4t qu\u2019un <code>&lt;meta http-equiv&gt;<\/code> dans le <code>&lt;head&gt;<\/code> pour \u00e9viter l\u2019impact sur le preload scanner.<\/li>\n\n\n\n<li><strong>Caches<\/strong> : testez sur une page hors cache pour valider la structure, puis purge globale.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Exemple avant\/apr\u00e8s (sch\u00e9ma condens\u00e9)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Avant (d\u00e9sordonn\u00e9)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&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 class=\"wp-block-paragraph\"><strong>Apr\u00e8s (tri\u00e9 par Head Sorter)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&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 class=\"wp-block-paragraph\"><strong>Head Sorter<\/strong> met votre <code>&lt;head&gt;<\/code> WordPress <strong>au carr\u00e9 automatiquement<\/strong>, et <strong>Capo.js<\/strong> vous offre la preuve visuelle et les garde-fous de validation. C\u2019est simple, mesurable, et \u00e7a \u00e9vite une dette technique invisible mais co\u00fbteuse.<\/p>",
        "protected": false
    },
    "excerpt": {
        "rendered": "<p>Capo.js et Head Sorter forment un duo simple et efficace pour optimiser le head d\u2019un site WordPress.<br \/>\nHead Sorter, module de WPMasterToolKit, remet automatiquement les balises dans l\u2019ordre id\u00e9al pour la performance et le SEO.<br \/>\nAvec l\u2019extension Chrome Capo.js, vous v\u00e9rifiez en un coup d\u2019\u0153il que tout est parfaitement rang\u00e9.<\/p>",
        "protected": false
    },
    "author": 1,
    "featured_media": 0,
    "comment_status": "closed",
    "ping_status": "closed",
    "sticky": false,
    "template": "",
    "format": "standard",
    "meta": {
        "_acf_changed": false,
        "_seopress_titles_title": "",
        "_seopress_titles_desc": "",
        "_seopress_robots_index": "",
        "_seopress_robots_follow": "",
        "_seopress_robots_imageindex": "",
        "_seopress_robots_snippet": "",
        "_seopress_robots_primary_cat": "",
        "_seopress_robots_breadcrumbs": "",
        "_seopress_robots_freeze_modified_date": "",
        "_seopress_robots_custom_modified_date": "",
        "_seopress_robots_canonical": "",
        "_seopress_social_fb_title": "",
        "_seopress_social_fb_desc": "",
        "_seopress_social_fb_img": "",
        "_seopress_social_fb_img_attachment_id": 0,
        "_seopress_social_fb_img_width": 0,
        "_seopress_social_fb_img_height": 0,
        "_seopress_social_twitter_title": "",
        "_seopress_social_twitter_desc": "",
        "_seopress_social_twitter_img": "",
        "_seopress_social_twitter_img_attachment_id": 0,
        "_seopress_social_twitter_img_width": 0,
        "_seopress_social_twitter_img_height": 0,
        "_seopress_redirections_value": "",
        "_seopress_redirections_enabled": "",
        "_seopress_redirections_enabled_regex": "",
        "_seopress_redirections_logged_status": "",
        "_seopress_redirections_param": "",
        "_seopress_redirections_type": 0,
        "_seopress_analysis_target_kw": "",
        "_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\/fr\/wp-json\/wp\/v2\/posts\/4839",
                "targetHints": {
                    "allow": [
                        "GET"
                    ]
                }
            }
        ],
        "collection": [
            {
                "href": "https:\/\/wpmastertoolkit.com\/fr\/wp-json\/wp\/v2\/posts"
            }
        ],
        "about": [
            {
                "href": "https:\/\/wpmastertoolkit.com\/fr\/wp-json\/wp\/v2\/types\/post"
            }
        ],
        "author": [
            {
                "embeddable": true,
                "href": "https:\/\/wpmastertoolkit.com\/fr\/wp-json\/wp\/v2\/users\/1"
            }
        ],
        "replies": [
            {
                "embeddable": true,
                "href": "https:\/\/wpmastertoolkit.com\/fr\/wp-json\/wp\/v2\/comments?post=4839"
            }
        ],
        "version-history": [
            {
                "count": 0,
                "href": "https:\/\/wpmastertoolkit.com\/fr\/wp-json\/wp\/v2\/posts\/4839\/revisions"
            }
        ],
        "wp:attachment": [
            {
                "href": "https:\/\/wpmastertoolkit.com\/fr\/wp-json\/wp\/v2\/media?parent=4839"
            }
        ],
        "wp:term": [
            {
                "taxonomy": "category",
                "embeddable": true,
                "href": "https:\/\/wpmastertoolkit.com\/fr\/wp-json\/wp\/v2\/categories?post=4839"
            },
            {
                "taxonomy": "post_tag",
                "embeddable": true,
                "href": "https:\/\/wpmastertoolkit.com\/fr\/wp-json\/wp\/v2\/tags?post=4839"
            }
        ],
        "curies": [
            {
                "name": "wp",
                "href": "https:\/\/api.w.org\/{rel}",
                "templated": true
            }
        ]
    }
}