Оптимізація Core Web Vitals в SPA: мінімізація INP, прискорення LCP та стабілізація CLS

Клік або тап користувача
        |
        v
+-----------------------------------------------------------------------+
|  1. Input Delay (Затримка введення)                                   |
|  Очікування завершення поточної задачі в основному потоці (Long Task) |
+-----------------------------------------------------------------------+
        |
        v
+-----------------------------------------------------------------------+
|  2. Processing Time (Час обробки)                                     |
|  Виконання обробників onClick, оновлення стану React                  |
+-----------------------------------------------------------------------+
        |
        v
+-----------------------------------------------------------------------+
|  3. Presentation Delay (Затримка відтворення)                         |
|  Recalculate Style -> Layout -> Paint -> Композиція кадру             |
+-----------------------------------------------------------------------+
        |
        v
Кадр відображено на екрані (Next Paint)

Монолітна задача (INP > 150 мс):
+-------------------------------------------------------------+
| Task (150 мс) [Блокування введення]                         |
+-------------------------------------------------------------+

Декомпозиція через scheduler.yield() (INP < 50 мс):
+--------------+          +--------------+          +--------------+
| Квант 1      |  yield   | Квант 2      |  yield   | Квант 3      |
| (40 мс)      | -------> | (40 мс)      | -------> | (40 мс)      |
+--------------+          +--------------+          +--------------+
                       ^                         ^
                       |                         |
               [Обробка кліку]           [Відтворення кадру]

declare global {
  interface Window {
    scheduler?: {
      yield?: () => Promise<void>;
    };
  }
}

// Крос-браузерна уступка основному потоку
export async function yieldToMain(): Promise<void> {
  if (typeof window !== 'undefined' && window.scheduler?.yield) {
    return window.scheduler.yield();
  }

  // Fallback на MessageChannel (ефективніше та швидше за setTimeout(fn, 0))
  return new Promise((resolve) => {
    const channel = new MessageChannel();
    channel.port1.onmessage = () => resolve();
    channel.port2.postMessage(null);
  });
}

// Пакетна неблокувальна обробка масиву з контролем квантів часу
export async function chunkedDataProcessing<T, R>(
  items: readonly T[],
  processItem: (item: T) => R,
  maxTimePerChunkMs: number = 16
): Promise<R[]> {
  const results: R[] = [];
  let lastYieldTime = performance.now();

  for (let i = 0; i < items.length; i++) {
    results.push(processItem(items[i]));

    // Якщо минуло більше 16 мс (бюджет 1 кадру при 60 FPS), уступаємо потік
    if (performance.now() - lastYieldTime > maxTimePerChunkMs) {
      await yieldToMain();
      lastYieldTime = performance.now();
    }
  }

  return results;
}

import React, { useState, useTransition, useDeferredValue, ChangeEvent } from 'react';

interface Product {
  id: string;
  name: string;
  category: string;
}

interface FilterProps {
  products: readonly Product[];
}

export function FastCatalogFilter({ products }: FilterProps) {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  // Відкладене значення для некритичних обчислень
  const deferredQuery = useDeferredValue(query);

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const nextValue = e.target.value;
    // Термінове оновлення: введення користувача відображається без затримки
    setQuery(nextValue);

    // Низькопріоритетний рендеринг списку товарів
    startTransition(() => {
      // Інтенсивна фільтрація не блокує поле введення
    });
  };

  const filteredProducts = products.filter((p) =>
    p.name.toLowerCase().includes(deferredQuery.toLowerCase())
  );

  return (
    <div className="space-y-4">
      <div className="relative">
        <input
          type="search"
          value={query}
          onChange={handleInputChange}
          placeholder="Швидкий пошук товарів..."
          className="w-full px-4 py-2 rounded-lg border border-border bg-surface text-slate-100 focus:outline-none focus:border-accent-cyan"
        />
        {isPending && (
          <span className="absolute right-3 top-2.5 text-xs text-accent-violet animate-pulse">
            Фільтрація...
          </span>
        )}
      </div>

      <ul className="divide-y divide-border border border-border rounded-lg max-h-96 overflow-y-auto">
        {filteredProducts.slice(0, 100).map((product) => (
          <li key={product.id} className="p-3 text-sm hover:bg-surface/50">
            {product.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  
  <!-- 1. Ранній Preload основного скрипта бандла -->
  <link rel="modulepreload" href="/assets/main-bundle.js" />

  <!-- 2. Негайний Preload зображення героя (LCP) -->
  <link 
    rel="preload" 
    as="image" 
    href="https://images.agenticlab.dev/hero-banner-1200.webp" 
    type="image/webp"
    fetchpriority="high"
  />

  <!-- 3. Preconnect до критичного домену API -->
  <link rel="preconnect" href="https://api.agenticlab.dev" crossorigin />
  <link rel="dns-prefetch" href="https://api.agenticlab.dev" />

  <style>
    /* 4. Інлайн критичного CSS для каркаса LCP контейнера */
    .hero-container {
      aspect-ratio: 16 / 9;
      background-color: #09090b;
      contain: layout paint;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="root"></div>
</body>
</html>

import React, { useState } from 'react';

interface StableMediaProps {
  src: string;
  alt: string;
  width: number;
  height: number;
}

export function StableMediaContainer({ src, alt, width, height }: StableMediaProps) {
  const [isLoaded, setIsLoaded] = useState(false);

  return (
    // Фіксація пропорцій через aspect-ratio повністю запобігає CLS
    <div
      className="relative overflow-hidden rounded-xl bg-slate-900 border border-slate-800"
      style={{
        aspectRatio: `${width} / ${height}`,
        minHeight: '200px',
        contain: 'layout paint',
      }}
    >
      <img
        src={src}
        alt={alt}
        width={width}
        height={height}
        loading="lazy"
        decoding="async"
        onLoad={() => setIsLoaded(true)}
        className={`w-full h-full object-cover transition-opacity duration-300 ${
          isLoaded ? 'opacity-100' : 'opacity-0'
        }`}
      />
      {!isLoaded && (
        <div className="absolute inset-0 bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 animate-pulse" />
      )}
    </div>
  );
}