Frontend performance techniques I use in real projects

When engineering high-throughput client applications, web vitals directly govern user retention and conversion metrics. Achieving sub-second Largest Contentful Paint (LCP) and under 50ms Interaction to Next Paint (INP) requires moving beyond generic advice like "lazy load images" to structural engine-level architectural patterns.

1. Main Thread Yielding with scheduler.postTask

Heavy client-side processing (such as parsing telemetry payloads, filtering large datasets, or calculating syntax highlights) frequently starves the event loop, causing dropped frames and degraded INP scores.

Instead of relying on legacy setTimeout(fn, 0) which incurs a 4ms clamping penalty and lacks priority queuing, we use the modern Cooperative Scheduling API:

export async function yieldToMain(priority: 'user-visible' | 'background' = 'user-visible'): Promise<void> {
  if ('scheduler' in window && 'postTask' in (window as any).scheduler) {
    return (window as any).scheduler.postTask(() => {}, { priority });
  }
  
  // Fallback for older WebKit runtimes
  return new Promise(resolve => {
    const channel = new MessageChannel();
    channel.port1.onmessage = () => resolve();
    channel.port2.postMessage(null);
  });
}

// Processing large dataset chunks cooperatively
export async function processChunks<T>(items: T[], processFn: (item: T) => void): Promise<void> {
  let lastYield = performance.now();
  
  for (const item of items) {
    processFn(item);
    
    // Yield every 16ms to guarantee 60fps frame budgeting
    if (performance.now() - lastYield > 16) {
      await yieldToMain('user-visible');
      lastYield = performance.now();
    }
  }
}

2. Eliminating Layout Shift (CLS: 0.00)

Cumulative Layout Shift occurs when DOM elements resize after geometry calculation. To guarantee zero CLS:

• Aspect Ratio Containers: Always specify explicit width and height or CSS aspect-ratio on media nodes to allow the browser's layout engine to reserve geometric space before image metadata loads.
• Font Fallback Metrics: Match size-adjust, ascent-override, and descent-override on fallback system fonts (e.g. Arial or system-ui) to custom web fonts (like Inter) so font swaps cause zero layout jitter.
• Dynamic Modals: Reserve scrollbar gutter space using CSS scrollbar-gutter: stable to prevent horizontal content jumping when dialogues lock body scrolling.

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.44%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

3. Granular Dynamic Imports & Critical CSS

Monolithic JavaScript bundles delay Time to Interactive (TTI). On projects architected at tirup.in, we split client modules strictly on interaction boundaries:

import dynamic from 'next/dynamic';

// Heavy chart rendering library isolated from primary bundle
const HeavyChart = dynamic(
  () => import('./interactive-timeline').then(mod => mod.InteractiveTimeline),
  {
    ssr: false,
    loading: () => <div className="h-64 w-full animate-pulse bg-white/5 rounded-lg" />,
  }
);