Recursos — FlowKit

Gestion de estilos CSS

Que son los identificadores

En WordPress, cada hoja de estilos CSS se registra con un identificador unico (tambien llamado handle en la terminologia interna). Este identificador es una cadena de texto que WordPress utiliza para controlar la carga, el orden y las dependencias de cada recurso.

Por ejemplo, WordPress registra sus propios estilos con identificadores como wp-block-library, dashicons o global-styles. Bricks Builder utiliza identificadores como bricks-frontend y Gutenberg registra wp-block-editor, entre otros.

FlowKit permite desactivar (desencolar) estas hojas de estilos para reducir el peso de la pagina y mejorar el tiempo de carga.

Desencolar por tipo

La forma mas rapida de limpiar estilos innecesarios es desencolarlos por tipo. FlowKit agrupa los estilos en tres categorias:

Tipo	Que incluye	Cuando desactivar
WordPress	Estilos del nucleo: biblioteca de bloques, estilos globales, dashicons, etc.	Si no usas el editor de bloques (Gutenberg) en el frontend
Bricks	Estilos del constructor visual Bricks Builder	Casi nunca — solo si reemplazas completamente los estilos de Bricks con CSS propio
Gutenberg	Estilos especificos del editor de bloques y sus componentes	Si tu sitio usa exclusivamente Bricks y no tiene bloques de Gutenberg en el contenido

Precaucion Desactivar los estilos de Bricks puede romper el diseno de tu sitio si dependes de sus clases CSS. Hazlo solo si tienes un sistema de estilos completamente independiente.

Desencolar por identificador especifico

Para un control mas granular, puedes desactivar hojas de estilos individuales escribiendo su identificador exacto. Esto es util cuando necesitas eliminar el CSS de un plugin concreto que no se usa en todas las paginas, como los estilos de Contact Form 7 o de un plugin de galerías.

FlowKit muestra un buscador con todos los identificadores registrados en tu sitio. Escribe parte del nombre para filtrar y selecciona los que desees desactivar.

Ejemplos Identificadores comunes para desactivar

wp-block-library          // Estilos de bloques de Gutenberg
wp-block-library-theme    // Variaciones de tema para bloques
wc-blocks-style           // Estilos de bloques de WooCommerce
classic-theme-styles      // Estilos del tema clasico de WordPress
global-styles             // Estilos globales generados por el editor
contact-form-7            // Estilos de Contact Form 7

Como encontrar los identificadores

Existen dos metodos principales para identificar que hojas de estilos estan cargadas en tu sitio:

Desde el panel de FlowKit — El campo de busqueda de identificadores muestra automaticamente todos los estilos registrados en tu instalacion. Escribe cualquier parte del nombre para filtrar la lista.
Desde el codigo fuente — Abre tu sitio en el navegador, haz clic derecho y selecciona "Ver codigo fuente". Busca las etiquetas <link rel="stylesheet">. El atributo id de cada una contiene el identificador seguido de -css. Por ejemplo, si ves id="wp-block-library-css", el identificador es wp-block-library.

Tambien puedes usar las herramientas de desarrollo del navegador (F12). En la pestana "Red" o "Network", filtra por "CSS" para ver todas las hojas de estilos que se descargan al cargar la pagina.

Gestion de scripts JavaScript

Al igual que con los estilos CSS, WordPress registra cada script JavaScript con un identificador unico. FlowKit permite desactivar scripts innecesarios para reducir el numero de peticiones HTTP y el tiempo de ejecucion de JavaScript en el navegador.

Desencolar por tipo

Los scripts se agrupan en las mismas tres categorias que los estilos:

Tipo	Que incluye	Ejemplo de scripts
WordPress	Scripts del nucleo de WordPress	wp-embed, wp-emoji-release
Bricks	Scripts del constructor visual	bricks-scripts
Gutenberg	Scripts del editor de bloques	wp-block-editor, wp-blocks

Desencolar por identificador especifico

Igual que con CSS, puedes desactivar scripts individuales mediante su identificador. El buscador del panel muestra todos los scripts registrados para que los selecciones facilmente.

Impacto en el rendimiento

Los scripts JavaScript tienen un impacto mayor en el rendimiento que las hojas de estilos. Cada script que se carga en la pagina:

Genera una peticion HTTP — El navegador debe descargar el archivo antes de poder ejecutarlo.
Bloquea el renderizado — Salvo que esten marcados como async o defer, los scripts detienen la construccion del DOM mientras se descargan y ejecutan.
Consume memoria y CPU — Una vez descargados, los scripts se parsean, compilan y ejecutan, ocupando recursos del dispositivo del visitante.

Desactivar scripts que no se utilizan en el frontend puede mejorar notablemente las metricas de rendimiento, especialmente en dispositivos moviles.

Advertencia: riesgo de romper funcionalidad Desactivar un script puede hacer que funcionalidades del sitio dejen de funcionar: sliders, menus desplegables, formularios AJAX, carrito de WooCommerce, etc. Siempre prueba los cambios en un entorno de desarrollo antes de aplicarlos en produccion.

Como identificar scripts innecesarios

Para determinar que scripts puedes desactivar de forma segura:

Revisa el codigo fuente — Abre el codigo fuente de la pagina y busca las etiquetas <script>. El atributo id contiene el identificador seguido de -js.
Usa la pestana "Cobertura" del navegador — En las herramientas de desarrollo de Chrome, la pestana "Coverage" muestra que porcentaje de cada archivo JavaScript se ejecuta realmente. Los archivos con baja cobertura son candidatos a ser desactivados.
Desactiva y prueba — El metodo mas fiable: desactiva un script, navega por las paginas principales del sitio y verifica que todo funcione correctamente.

Nunca desactives scripts de Bricks o WooCommerce sin verificar que tu sitio no depende de ellos. Estos sistemas suelen registrar multiples scripts interdependientes.

Codigo personalizado

FlowKit permite inyectar JavaScript personalizado directamente desde el panel de administracion, sin necesidad de editar archivos del tema ni instalar plugins adicionales. El codigo se puede insertar en dos ubicaciones estrategicas de la pagina.

JavaScript en el <head>

El codigo insertado en el <head> se ejecuta antes de que el navegador comience a renderizar el contenido visible. Es la ubicacion adecuada para:

Codigos de seguimiento y analitica — Google Analytics, Google Tag Manager, Meta Pixel y herramientas similares que necesitan iniciarse lo antes posible para capturar datos desde el primer momento.
Meta etiquetas dinamicas — Scripts que modifican el <head> antes del renderizado, como verificacion de dominio o configuracion de plataformas externas.
Configuracion temprana — Variables globales o configuraciones que otros scripts del sitio necesitan leer al inicializarse.

JavaScript Ejemplo: Google Tag Manager en el head

// Google Tag Manager
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');

JavaScript Ejemplo: variable de configuracion global

// Configuracion global disponible para todos los scripts
window.SITE_CONFIG = {
  debug: false,
  apiBase: '/wp-json/custom/v1/',
  locale: 'es_ES'
};

JavaScript antes de </body>

El codigo insertado antes del cierre del <body> se ejecuta despues de que todo el contenido HTML se haya cargado en el DOM. Es la ubicacion recomendada para:

Manipulacion del DOM — Scripts que necesitan acceder a elementos de la pagina, como modificar clases, textos o atributos de elementos existentes.
Escuchadores de eventos — Registrar eventos de clic, scroll, envio de formularios y cualquier otra interaccion del usuario.
Integraciones ligeras — Widgets de chat en vivo, botones de compartir en redes sociales, u otras herramientas que no necesitan cargarse antes del contenido.
Animaciones y efectos — Scripts que anaden transiciones o efectos visuales a elementos de la pagina.

JavaScript Ejemplo: manipulacion del DOM

// Anadir clase al body cuando el usuario hace scroll
window.addEventListener('scroll', function() {
  if (window.scrollY > 100) {
    document.body.classList.add('scrolled');
  } else {
    document.body.classList.remove('scrolled');
  }
});

JavaScript Ejemplo: escuchador de eventos en formularios

// Enviar evento a la capa de datos al enviar un formulario
document.querySelectorAll('form.wpcf7-form').forEach(function(form) {
  form.addEventListener('submit', function() {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'form_submit',
      formId: form.closest('.wpcf7').getAttribute('id')
    });
  });
});

Notas sobre el envoltorio automatico

FlowKit envuelve automaticamente tu codigo dentro de etiquetas <script>, por lo que no necesitas incluirlas tu mismo. Escribe directamente el codigo JavaScript sin las etiquetas de apertura y cierre.

Si pegas codigo que ya incluye <script> y </script>, el resultado sera una etiqueta duplicada que provocara errores de sintaxis en el navegador. Asegurate de pegar solo el contenido JavaScript.

El codigo personalizado se ejecuta en todas las paginas del sitio. Si necesitas que un script se ejecute solo en paginas especificas, envuelve tu codigo en una condicion que verifique la URL o la presencia de un elemento en la pagina.