Assets y rendimiento: cargar solo lo necesario

Aprende a organizar CSS y JavaScript del tema con enqueue y carga condicional para mejorar Core Web Vitals sin romper mantenibilidad.

En un tema WordPress profesional, el rendimiento empieza en cómo cargas los assets, no al final con parches de caché.

Cuando metes CSS y JS sin criterio, el navegador bloquea render, aumentan peticiones inútiles y aparecen regresiones al crecer el proyecto.

La base sólida es simple: enqueue siempre, dependencias explícitas, versionado consistente y carga condicional por contexto.

También hay que pensar en mantenimiento: cada asset debe tener una razón clara de existencia y un lugar concreto donde se activa.

  • Si no usas el sistema de enqueue de WordPress, pierdes control de orden, duplicados y compatibilidad.
  • wp_enqueue_style() y wp_enqueue_script() permiten registrar handles claros y respetar dependencias entre archivos.
  • Versionar con filemtime() en desarrollo evita peleas con caché cuando cambias CSS/JS muchas veces al día.
  • En release, fijar versión semántica facilita soporte: sabes exactamente qué paquete está en producción.
  • Nada de etiquetas <script> hardcodeadas en header.php.

Base técnica: enqueue, dependencias y versión

Si no usas el sistema de enqueue de WordPress, pierdes control de orden, duplicados y compatibilidad.

wp_enqueue_style() y wp_enqueue_script() permiten registrar handles claros y respetar dependencias entre archivos.

Versionar con filemtime() en desarrollo evita peleas con caché cuando cambias CSS/JS muchas veces al día.

En release, fijar versión semántica facilita soporte: sabes exactamente qué paquete está en producción.

  • Nada de etiquetas <script> hardcodeadas en header.php.
  • Un handle por asset y nombres consistentes.
  • Dependencias reales (no por intuición).
  • Scripts no críticos en footer cuando sea posible.

Cargar por contexto: menos peso, menos bloqueo

Un script de slider para portfolio no debe viajar en todas las páginas del sitio.

Aplica condicionales con is_singular(), is_page_template(), is_post_type_archive() o is_front_page() según el caso.

Este patrón recorta bytes transferidos y reduce trabajo del main thread en vistas que no usan esa funcionalidad.

Define una convención de equipo: assets globales mínimos + assets de feature por módulo.

Medición y QA para evitar regresiones

Optimizar sin medir solo cambia números al azar.

Compara baseline y resultado en home, single y archive; no te quedes solo con la portada.

Relaciona cada mejora con una decisión concreta del tema: CSS crítico, reducción de JS o carga diferida de módulos.

Incluye verificación de rendimiento en la checklist de release para que el tema no vuelva a degradarse en cada iteración.

  • Revisa waterfall para detectar bloqueos evitables.
  • Controla peso total por plantilla clave.
  • Documenta cambios de rendimiento en el repositorio.
  • Haz pruebas en staging antes de producción.
WordPress Themes Pro
08

Assets y rendimiento: cargar solo lo necesario

Aprende a organizar CSS y JavaScript del tema con enqueue y carga condicional para mejorar Core Web Vitals sin romper mantenibilidad.

Código del tema: wp_enqueue_scripts

📘 Teoría

Base técnica: enqueue, dependencias y versión

Si no usas el sistema de enqueue de WordPress, pierdes control de orden, duplicados y compatibilidad.

wp_enqueue_style() y wp_enqueue_script() permiten registrar handles claros y respetar dependencias entre archivos.

Versionar con filemtime() en desarrollo evita peleas con caché cuando cambias CSS/JS muchas veces al día.

En release, fijar versión semántica facilita soporte: sabes exactamente qué paquete está en producción.

  • Nada de etiquetas hardcodeadas en header.php.
  • Un handle por asset y nombres consistentes.
  • Dependencias reales (no por intuición).
  • Scripts no críticos en footer cuando sea posible.
Enqueue limpio en functions.php
add_action('wp_enqueue_scripts', function () {
  $theme_version = wp_get_theme()->get('Version');

  $main_css = get_theme_file_path('/assets/css/main.css');
  $main_css_ver = file_exists($main_css) ? (string) filemtime($main_css) : $theme_version;

  wp_enqueue_style(
    'mi-tema-main',
    get_theme_file_uri('/assets/css/main.css'),
    [],
    $main_css_ver
  );

  wp_enqueue_script(
    'mi-tema-navigation',
    get_theme_file_uri('/assets/js/navigation.js'),
    [],
    $theme_version,
    true
  );
});

Cargar por contexto: menos peso, menos bloqueo

Un script de slider para portfolio no debe viajar en todas las páginas del sitio.

1

Aplica condicionales con is_singular(), is_page_template(), is_post_type_archive() o is_front_page() según el caso.

2

Este patrón recorta bytes transferidos y reduce trabajo del main thread en vistas que no usan esa funcionalidad.

3

Define una convención de equipo: assets globales mínimos + assets de feature por módulo.

Asset exclusivo para un CPT
add_action('wp_enqueue_scripts', function () {
  if (!is_singular('portfolio')) {
    return;
  }

  wp_enqueue_script(
    'mi-tema-portfolio-slider',
    get_theme_file_uri('/assets/js/portfolio-slider.js'),
    [],
    '1.0.0',
    true
  );
});

Medición y QA para evitar regresiones

Optimizar sin medir solo cambia números al azar.

Compara baseline y resultado en home, single y archive; no te quedes solo con la portada.

Relaciona cada mejora con una decisión concreta del tema: CSS crítico, reducción de JS o carga diferida de módulos.

Incluye verificación de rendimiento en la checklist de release para que el tema no vuelva a degradarse en cada iteración.

  • Revisa waterfall para detectar bloqueos evitables.
  • Controla peso total por plantilla clave.
  • Documenta cambios de rendimiento en el repositorio.
  • Haz pruebas en staging antes de producción.

🧪 Aprende probando

Ejemplo Ejemplo: global mínimo + feature condicional Estructura base para no contaminar todas las páginas con scripts que solo usa una plantilla.

🏁 Retos

Reto Reto: limitar un script al single de producto Completa la condición para evitar carga global innecesaria.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre WordPress Themes Pro.

Test de WordPress Themes Pro

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .