Mejorar la experiencia en sitios WordPress con Web Workers: Ejecución eficiente en segundo plano

¿Qué son los Web Workers?

Los Web Workers permiten ejecutar scripts en segundo plano, en hilos separados del hilo principal del navegador. Esto significa que tareas complejas como el procesamiento de datos, peticiones AJAX, o transformaciones visuales no interfieren con la interactividad de la página.

Tipos:

• Worker: el más común. Hilo independiente.
• SharedWorker: permite compartir un hilo entre múltiples scripts o ventanas.
• Service Worker: pensado para gestionar peticiones de red y almacenamiento en caché.

Para este artículo, nos centraremos en el Worker básico.

Casos de uso en WordPress

Los Web Workers son ideales para situaciones como:

• Procesamiento de datos de formularios antes del envío.
• Aplicación de filtros complejos en tiendas WooCommerce.
• Generación de gráficas o visualizaciones interactivas.
• Manipulación de DOM virtual para tests o animaciones.

Ejemplo práctico: filtrado de productos en WooCommerce

Supongamos que tenemos una tienda donde el usuario puede seleccionar muchos filtros, lo que puede ralentizar el frontend. Podemos delegar esa lógica a un Web Worker:

1. Crear el archivo worker.js:

self.onmessage = function(e) {
  const { products, filters } = e.data;
  const filtered = products.filter(product => {
    return Object.keys(filters).every(key => product[key] === filters[key]);
  });
  self.postMessage(filtered);
};

2. Integrar en tu script principal:

const worker = new Worker('/wp-content/themes/tu-tema/js/worker.js');
worker.postMessage({ products: allProducts, filters: activeFilters });

worker.onmessage = function(e) {
  renderFilteredProducts(e.data);
};

Este enfoque libera al hilo principal del procesamiento de datos, haciendo que el scroll y los clics sigan siendo fluidos.

🔗 Demo en Codepen: Puedes ver una demostración interactiva de Web Workers aquí.

Ejemplo práctico: filtrado de productos con ACF y Web Workers

Supongamos que tienes productos en WordPress gestionados con campos personalizados avanzados (ACF), y necesitas aplicar filtros por categoría o tipo. El proceso puede ralentizarse si se hace en el hilo principal. Podemos usar un Web Worker para filtrar sin bloquear la UI:

1. Crear worker.js en tu tema:

self.onmessage = function(e) {
  const { products, filters } = e.data;
  const filtered = products.filter(product => {
    return Object.keys(filters).every(key => product[key] === filters[key]);
  });
  self.postMessage(filtered);
};

2. Añadir un acf_register_block_type() para cargar los productos en JSON:

add_action('acf/init', function() {
  acf_register_block_type([
    'name' => 'productos-filtrables',
    'title' => __('Productos filtrables'),
    'render_callback' => function() {
      $productos = get_posts(['post_type' => 'producto', 'posts_per_page' => -1]);
      $json = [];
      foreach ($productos as $p) {
        $json[] = [
          'title' => get_the_title($p),
          'categoria' => get_field('categoria', $p->ID),
          'tipo' => get_field('tipo', $p->ID),
        ];
      }
      echo '<script>const allProducts = ' . json_encode($json) . ';</script>';
    },
    'category' => 'widgets',
  ]);
});

3. Script en tu plantilla o bloque:

const worker = new Worker('/wp-content/themes/tu-tema/js/worker.js');
const filters = { categoria: 'tech' }; // Ejemplo: A partir de selectores dinámicos

worker.postMessage({ products: allProducts, filters });
worker.onmessage = function(e) {
  const container = document.getElementById("resultados");
  container.innerHTML = "";
  e.data.forEach(p => {
    const el = document.createElement("div");
    el.textContent = `${p.title} (${p.categoria})`;
    container.appendChild(el);
  });
};

Impacto en Core Web Vitals

Implementar Web Workers puede mejorar métricas como:

• INP (Interaction to Next Paint): tiempo de respuesta tras una interacción.
• TTI (Time to Interactive): cuándo una web está realmente interactiva.

Al reducir la carga del hilo principal, el sitio reacciona más rápido ante clics, scrolls o cambios de estado.

Consideraciones y limitaciones

• No se puede manipular directamente el DOM desde un Web Worker.
• Requiere estructura clara de assets en WordPress (usar get_template_directory_uri() o wp_enqueue_script() adecuadamente).
• No está soportado en navegadores muy antiguos.

Recursos recomendados

• MDN Web Workers API
• Using Web Workers – HTML5 Rocks
• Web.dev: Web Workers

Conclusión

Los Web Workers son una herramienta potente para desarrolladores que buscan llevar WordPress al siguiente nivel de rendimiento. Si ya optimizaste tus imágenes, caché y lazy load, es momento de explorar este recurso avanzado para mejorar la experiencia del usuario.

¡Haz que tu sitio no solo cargue rápido, sino que también reaccione al instante!