{"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\/es\/capo-js-wordpress-optimizar-cabeza-con-wpmastertoolkit-modulo-cabeza-clasificador\/","title":{"rendered":"Capo.js WordPress: optimizaci\u00f3n del  con WPMasterToolKit (m\u00f3dulo Head Sorter)"},"content":{"rendered":"<p>Cuando se trabaja con WordPress (temas, plugins, constructores...), el <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> acaba en un l\u00edo: etiquetas cr\u00edticas demasiado bajas, scripts antes del t\u00edtulo, preconexiones que no se encuentran, etc. El resultado es un an\u00e1lisis menos eficiente y peque\u00f1as p\u00e9rdidas en rendimiento\/SEO.<br>Las buenas noticias: <strong>Clasificador jefe<\/strong> (un m\u00f3dulo del WPMasterToolKit) ordena autom\u00e1ticamente las cosas, y <strong>Capo.js<\/strong> (extensi\u00f3n de Chrome) te permite comprobar de un vistazo que todo va bien.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 el <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> cuenta<\/h2>\n\n\n\n<p><strong>Capo.js<\/strong> clasifica los elementos del <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> por <em>grupos prioritarios<\/em> (peso), para determinar un orden \u00f3ptimo. <strong>Lo m\u00e1s cr\u00edtico<\/strong> son los <em>directivas pragma<\/em> (algunos <code data-no-auto-translation=\"\">&lt;meta http-equiv&gt;<\/code>entonces <code data-no-auto-translation=\"\">&lt;meta charset&gt;<\/code>, <code data-no-auto-translation=\"\">&lt;meta name=\"viewport\"&gt;<\/code>y <code data-no-auto-translation=\"\">&lt;base&gt;<\/code>), ya que gu\u00edan al navegador en las primeras fases del proceso de an\u00e1lisis. Por lo tanto, deben aparecer al principio.<\/p>\n\n\n\n<p>Dos recordatorios \u00fatiles de las normas Capo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code data-no-auto-translation=\"\">&lt;meta charset&gt;<\/code><\/strong> debe descubrirse muy pronto (dentro de los primeros ~1024 bytes) para evitar cualquier problema de codificaci\u00f3n, incluso en el archivo <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> : establece la URL base para los enlaces relativos; para evitar enlaces rotos en los primeros recursos, se recomienda en la parte superior de la secci\u00f3n <code data-no-auto-translation=\"\">&lt;head&gt;<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>A continuaci\u00f3n vienen (en orden resumido) : <strong><code data-no-auto-translation=\"\">&lt;title&gt;<\/code><\/strong>, <strong>preconectar<\/strong>, <strong>hojas de estilo s\u00edncronas<\/strong>, <strong>guiones<\/strong> (aplazar\/asincronizar seg\u00fan proceda), <strong>preload\/modulepreload<\/strong>, <strong>pistas especulativas<\/strong> (prefetch, dns-prefetch, prerender), luego \"todo lo dem\u00e1s\" (iconos, meta social, etc.). <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 hace el m\u00f3dulo <strong>Clasificador jefe<\/strong> (WPMasterToolKit)<\/h2>\n\n\n\n<p>El m\u00f3dulo <strong>Clasificador jefe<\/strong> automatiza la clasificaci\u00f3n de <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> <strong>sin tocar el contenido<\/strong> tags :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Clasificaci\u00f3n inspirada en Capo.js<\/strong> Las directrices cr\u00edticas y el t\u00edtulo se sit\u00faan en primer lugar, seguidos de las preconexiones\/hojas de estilo\/guiones y, por \u00faltimo, los elementos d\u00e9biles.<\/li>\n\n\n\n<li><strong>Respeto del orden interno<\/strong> cuando dos elementos tienen el mismo \"peso\" (se mantiene su orden relativo).<\/li>\n\n\n\n<li><strong>Compatible con WordPress<\/strong> Se aplica a la renderizaci\u00f3n del front-end, sea cual sea el tema o los plugins (ACF, WooCommerce, plugins SEO, etc.).<\/li>\n\n\n\n<li><strong>Seguro<\/strong> ninguna reescritura agresiva, s\u00f3lo <em>reordenaci\u00f3n<\/em>.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>En concreto: usted mantiene sus mismas etiquetas, pero Head Sorter el <strong>gama<\/strong> para que el navegador pueda ver primero lo que es importante.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Configuraci\u00f3n en 1 clic<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Activar<\/strong> WPMasterToolKit \u2192 <strong>Clasificador jefe<\/strong>.<\/li>\n\n\n\n<li><strong>Purgar cach\u00e9<\/strong> (plugin + cach\u00e9 del servidor\/CDN).<\/li>\n\n\n\n<li><strong>Cargar una p\u00e1gina p\u00fablica<\/strong> (excluyendo admin) y prueba con 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 tiene ganchos\/c\u00f3digo personalizado que inyecta etiquetas en el archivo <code data-no-auto-translation=\"\">&lt;head&gt;<\/code>vuelva a cargar la p\u00e1gina correspondiente para confirmar el pedido.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Compruebe el resultado con <strong>Capo.js<\/strong> (Extensi\u00f3n de Chrome)<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Instalar la extensi\u00f3n<\/strong> Capo.js de la Chrome Web Store y, a continuaci\u00f3n, haga clic en el icono de una p\u00e1gina de su sitio. La extensi\u00f3n muestra un <strong>barra de color<\/strong> que compara <strong>el orden real<\/strong> de <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> (l\u00ednea superior) a <strong>el orden ideal<\/strong> (l\u00ednea inferior). Lo ideal es que las dos l\u00edneas sean muy parecidas.<\/li>\n\n\n\n<li>Mueva el rat\u00f3n sobre un color: a <strong>informaci\u00f3n sobre herramientas<\/strong> describe el elemento y su prioridad. Abra el <strong>Consola DevTools<\/strong> Capo tambi\u00e9n registra los detalles y cualquier advertencia de validaci\u00f3n. (<a href=\"https:\/\/rviscomi.github.io\/capo.js\/user\/extension\/\">rviscomi.github.io<\/a>)<\/li>\n\n\n\n<li><strong>Colores<\/strong> :\n<ul class=\"wp-block-list\">\n<li><strong>Rojo<\/strong> : elementos <strong>prioridad muy alta<\/strong> (directrices pragma, <code data-no-auto-translation=\"\">&lt;title&gt;<\/code>).<\/li>\n\n\n\n<li><strong>Verde<\/strong> : elementos <strong>recursos<\/strong> (hojas de estilo, scripts \"normales\").<\/li>\n\n\n\n<li><strong>Azul\/Gris<\/strong> : elementos <strong>bajo<\/strong> (pistas especulativas, meta social...). (<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\">Lo que Capo tambi\u00e9n puede decirte (validaci\u00f3n)<\/h3>\n\n\n\n<p>Capo hace <strong>controles de conformidad<\/strong> de <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> s\u00f3lo algunos ejemplos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>S\u00f3lo los elementos autorizados por la especificaci\u00f3n deben figurar en el <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> de lo contrario, el navegador puede <strong>cerrar el <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> prematuramente<\/strong> y empuje (SEO) etiquetas en el <code data-no-auto-translation=\"\">&lt;body&gt;<\/code>.<\/li>\n\n\n\n<li>Debe haber <strong>exactamente uno <code data-no-auto-translation=\"\">&lt;title&gt;<\/code><\/strong> y <strong>como m\u00e1ximo uno <code data-no-auto-translation=\"\">&lt;base&gt;<\/code><\/strong>en caso contrario, advertencias.<\/li>\n\n\n\n<li><strong>Evite el CSP mediante <code data-no-auto-translation=\"\">&lt;meta http-equiv&gt;<\/code><\/strong> en Chrome, este <strong>desactiva la precarga del esc\u00e1ner<\/strong> (error conocido) - prefiera el encabezado HTTP.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Si Capo emite una advertencia, corrija la configuraci\u00f3n\/SEO del lado del servidor o el c\u00f3digo del tema\/plugin en cuesti\u00f3n, y a continuaci\u00f3n <strong>actualizar<\/strong> para confirmar.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Modelo de pedido recomendado (lista de comprobaci\u00f3n pr\u00e1ctica)<\/h2>\n\n\n\n<p>He aqu\u00ed una <strong>lista de control<\/strong> simple, conforme al esp\u00edritu de las normas Capo (de arriba abajo):<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Orientaciones cr\u00edticas<\/strong> :\n<ul class=\"wp-block-list\">\n<li><code data-no-auto-translation=\"\">&lt;meta http-equiv&gt;<\/code> <em>seleccionado<\/em> (por ejemplo <code data-no-auto-translation=\"\">content-security-policy<\/code> si es realmente necesario en <code data-no-auto-translation=\"\">&lt;meta&gt;<\/code>pero dando preferencia a la cabecera HTTP),<\/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>Conexiones previas<\/strong> : <code data-no-auto-translation=\"\">&lt;link rel=\"preconnect\" href=\"\u2026\"&gt;<\/code> (polic\u00eda CDN, an\u00e1lisis, API, etc.).<\/li>\n\n\n\n<li><strong>Estilos sincr\u00f3nicos<\/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>Guiones<\/strong> :\n<ul class=\"wp-block-list\">\n<li><strong><code data-no-auto-translation=\"\">&lt;script defer src=\"\u2026\"&gt;<\/code><\/strong> (referido),<\/li>\n\n\n\n<li><strong><code data-no-auto-translation=\"\">&lt;script async src=\"\u2026\"&gt;<\/code><\/strong> (as\u00edncrono) seg\u00fan sea necesario.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Precarga\/modulepreload<\/strong> (fuentes cr\u00edticas, CSS clave, m\u00f3dulos).<\/li>\n\n\n\n<li><strong>Pistas especulativas<\/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>Todo lo dem\u00e1s<\/strong> iconos, meta social, etc.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Activar <strong>Clasificador jefe<\/strong> : se organiza autom\u00e1ticamente en este esp\u00edritu, a continuaci\u00f3n, pasar un golpe de <strong>Capo<\/strong> para comprobar que \"real\" \u2248 \"ideal\".<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Consejos espec\u00edficos para WordPress<\/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> : la mayor\u00eda de los temas bien elaborados los sit\u00faan en lo alto del <code data-no-auto-translation=\"\">wp_head()<\/code>. Si un plugin los mueve, Head Sorter los mover\u00e1 hacia atr\u00e1s.<\/li>\n\n\n\n<li><strong>Preconectar<\/strong> dirija sus dominios a terceros <em>real<\/em> (fuentes CDN, v\u00eddeos, an\u00e1lisis). No hace falta pasarse.<\/li>\n\n\n\n<li><strong>CSP<\/strong> : prefieren el<strong>Cabecera HTTP<\/strong> (servidor\/CDN) en lugar de un <code data-no-auto-translation=\"\">&lt;meta http-equiv&gt;<\/code> en el <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> para evitar el impacto en la precarga del esc\u00e1ner.<\/li>\n\n\n\n<li><strong>Cubiertas<\/strong> en una p\u00e1gina fuera de cach\u00e9 para validar la estructura y, a continuaci\u00f3n, purgarla globalmente.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Ejemplo de antes\/despu\u00e9s (diagrama condensado)<\/h2>\n\n\n\n<p><strong>Adelante (desordenado)<\/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>Despu\u00e9s (ordenados por 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\">Conclusi\u00f3n<\/h2>\n\n\n\n<p><strong>Clasificador jefe<\/strong> pone su <code data-no-auto-translation=\"\">&lt;head&gt;<\/code> WordPress <strong>al cuadrado autom\u00e1ticamente<\/strong>y <strong>Capo.js<\/strong> le ofrece pruebas visuales y garant\u00edas de validaci\u00f3n. Es sencillo, medible y evita una deuda t\u00e9cnica invisible pero costosa.<\/p>","protected":false},"excerpt":{"rendered":"<p>Capo.js y Head Sorter forman un d\u00fao sencillo y eficaz para optimizar la cabecera de un sitio WordPress.<br \/>\nHead Sorter, un m\u00f3dulo de WPMasterToolKit, coloca autom\u00e1ticamente las etiquetas en el orden ideal para el rendimiento y el SEO.<br \/>\nCon la extensi\u00f3n de Chrome Capo.js, puedes comprobar de un vistazo que todo est\u00e1 perfectamente organizado.<\/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\/es\/wp-json\/wp\/v2\/posts\/4839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmastertoolkit.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmastertoolkit.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmastertoolkit.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmastertoolkit.com\/es\/wp-json\/wp\/v2\/comments?post=4839"}],"version-history":[{"count":5,"href":"https:\/\/wpmastertoolkit.com\/es\/wp-json\/wp\/v2\/posts\/4839\/revisions"}],"predecessor-version":[{"id":4984,"href":"https:\/\/wpmastertoolkit.com\/es\/wp-json\/wp\/v2\/posts\/4839\/revisions\/4984"}],"wp:attachment":[{"href":"https:\/\/wpmastertoolkit.com\/es\/wp-json\/wp\/v2\/media?parent=4839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmastertoolkit.com\/es\/wp-json\/wp\/v2\/categories?post=4839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmastertoolkit.com\/es\/wp-json\/wp\/v2\/tags?post=4839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}