FR 
EN 
ES 
Quand on travaille avec WordPress (thèmes, plugins, builders…), le <head> finit vite « en vrac » : balises critiques trop bas, scripts avant le titre, préconnexions introuvables… Résultat : parsing moins efficace et petites pertes de perf/SEO inutiles.
La bonne nouvelle : Head Sorter (module de WPMasterToolKit) remet de l’ordre automatiquement, et Capo.js (extension Chrome) permet de vérifier en un clin d’œil que tout est nickel.
Pourquoi l’ordre du <head> compte
Capo.js classe les éléments du <head> par groupes de priorité (poids), pour déterminer un ordre optimal. Les plus critiques sont les pragma directives (certaines <meta http-equiv>, puis <meta charset>, <meta name="viewport">, et <base>), car elles guident le navigateur très tôt dans le parsing. Elles doivent donc apparaître tout en haut.
Deux rappels utiles issus des règles Capo :
<meta charset>: doit être découverte très tôt (dans les ~1024 premiers octets) afin d’éviter tout souci d’encodage, y compris sur le<title>.<base>: fixe l’URL de base des liens relatifs ; pour éviter des liens cassés sur les ressources précoces, elle est recommandée en haut du<head>.
Ensuite viennent (ordre résumé) : <title>, preconnect, stylesheets synchrones, scripts (defer/async selon les cas), preload/modulepreload, hints spéculatifs (prefetch, dns-prefetch, prerender), puis « tout le reste » (icônes, méta sociales, etc.).
Ce que fait le module Head Sorter (WPMasterToolKit)
Le module Head Sorter automatise le tri du <head> sans toucher au contenu des balises :
- Classement inspiré de Capo.js : les directives critiques et le titre remontent tout en haut, puis les pré-connexions/feuilles de style/scripts et enfin les éléments faibles.
- Respect de l’ordre interne quand deux éléments ont le même « poids » (on conserve leur ordre relatif).
- Compatible WordPress : il s’applique au rendu frontal, quels que soient le thème ou les plugins (ACF, WooCommerce, SEO plugins…).
- Sécurisant : pas de réécriture agressive, seulement du re-ordering.
Concrètement : vous gardez vos mêmes balises, mais Head Sorter les range pour que le navigateur voie d’abord ce qui compte.
Mise en place en 1 clique
- Activez WPMasterToolKit → Head Sorter.
- Purge cache (plugin + cache serveur/CDN).
- Chargez une page publique (hors admin) et testez avec Capo.
- Si vous avez des hooks/custom code qui injectent des tags dans le
<head>, rechargez la page concernée pour valider l’ordre.
Vérifier le résultat avec Capo.js (extension Chrome)
- Installez l’extension Capo.js depuis le Chrome Web Store, puis cliquez sur l’icône sur une page de votre site. L’extension affiche une barre colorée qui compare l’ordre réel du
<head>(ligne du haut) à l’ordre trié idéal (ligne du bas). Idéalement, les deux lignes se ressemblent fortement. - Passez la souris sur une couleur : un tooltip décrit l’élément et sa priorité. Ouvrez la console DevTools : Capo y loggue aussi les détails et éventuels avertissements de validation. (rviscomi.github.io)
- Couleurs :
- Rouge : éléments très prioritaires (pragma directives,
<title>). - Vert : éléments moyens (feuilles de style, scripts « normaux »).
- Bleu/Gris : éléments faibles (hints spéculatifs, méta sociales…). (rviscomi.github.io)
- Rouge : éléments très prioritaires (pragma directives,
Ce que Capo peut aussi vous signaler (validation)
Capo réalise des vérifications de conformité du <head> ; quelques exemples :
- Seuls des éléments autorisés par la spec doivent figurer dans le
<head>; sinon, le navigateur peut fermer le<head>prématurément et pousser des balises (SEO) dans le<body>. - Il doit y avoir exactement un
<title>et au plus un<base>, sinon avertissements. - Évitez le CSP via
<meta http-equiv>: en Chrome, cela désactive le preload scanner (bug connu) — préférez l’en-tête HTTP.
Si Capo remonte un avertissement, corrigez la configuration côté serveur/SEO ou le code du thème/plugin concerné, puis rafraîchissez pour valider.
Modèle d’ordre recommandé (checklist pratique)
Voici une checklist simple, alignée sur l’esprit des règles Capo (du haut vers le bas) :
- Directives critiques :
<meta http-equiv>sélectionnées (p.ex.content-security-policysi vraiment nécessaire en<meta>, mais privilégier l’entête HTTP),<meta charset="UTF-8">,<meta name="viewport" …>,<base href="…">.
<title>.- Préconnexions :
<link rel="preconnect" href="…">(CDN police, analytics, API…). - Styles synchrones :
<link rel="stylesheet">,<style>. - Scripts :
<script defer src="…">(déférés),<script async src="…">(asynchrones) selon les besoins.
- Preload/modulepreload (polices critiques, CSS clé, modules).
- Hints spéculatifs :
prefetch,dns-prefetch,prerender. - Tout le reste : icônes, méta sociales, etc.
Activez Head Sorter : il range automatiquement dans cet esprit, vous passez ensuite un coup de Capo pour vérifier que « réel » ≈ « idéal ».
Conseils spécifiques WordPress
<meta charset>&<title>: la plupart des thèmes bien faits les placent haut danswp_head(). Si un plugin les bouge, Head Sorter les remontera.- Préconnect : ciblez vos domaines tiers réels (CDN polices, vidéos, analytics). Inutile d’en abuser.
- CSP : préférez l’en-tête HTTP (serveur/CDN) plutôt qu’un
<meta http-equiv>dans le<head>pour éviter l’impact sur le preload scanner. - Caches : testez sur une page hors cache pour valider la structure, puis purge globale.
Exemple avant/après (schéma condensé)
Avant (désordonné)
<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">
Après (trié par 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 met votre <head> WordPress au carré automatiquement, et Capo.js vous offre la preuve visuelle et les garde-fous de validation. C’est simple, mesurable, et ça évite une dette technique invisible mais coûteuse.
