<!-- Preload de imagen LCP -->
<link rel="preload" href="/hero-image.webp" as="image" fetchpriority="high">

<!-- Preload de fuentes críticas -->
<link rel="preload" href="/fonts/main-font.woff2" as="font" type="font/woff2" crossorigin>

<!-- CSS crítico inline -->
<style>
  /* CSS mínimo necesario para renderizar la parte visible */
  .hero-section {
    display: flex;
    height: 80vh;
    align-items: center;
  }
  .hero-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
</style>

<!-- Carga diferida de CSS no crítico -->
<link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'">

Este código muestra cómo priorizar la carga de recursos críticos para mejorar el LCP. Incluye preload de la imagen principal, fuentes críticas, CSS crítico inline y carga diferida de CSS no crítico.

// Crear un Web Worker para operaciones intensivas
const worker = new Worker('/js/data-processor.js');

// Enviar datos al worker en lugar de procesarlos en el hilo principal
document.querySelector('#process-button').addEventListener('click', () => {
  const data = collectDataFromPage();
  
  // Enviar datos al worker
  worker.postMessage(data);
  
  // Mostrar indicador de carga
  showLoadingIndicator();
});

// Recibir resultados procesados del worker
worker.addEventListener('message', (event) => {
  // Actualizar UI con los resultados
  updateUIWithResults(event.data);
  
  // Ocultar indicador de carga
  hideLoadingIndicator();
});

// Implementar throttling para eventos de scroll
let isScrolling = false;
window.addEventListener('scroll', () => {
  if (!isScrolling) {
    window.requestAnimationFrame(() => {
      updateScrollEffects();
      isScrolling = false;
    });
    isScrolling = true;
  }
});

Este código muestra dos técnicas para mejorar el INP: el uso de Web Workers para mover tareas intensivas fuera del hilo principal y la implementación de throttling para eventos de scroll. Ambas técnicas ayudan a mantener el hilo principal libre para responder rápidamente a las interacciones del usuario.

/* Reservar espacio para imágenes */
img, video, iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}

/* Contenedor para anuncios */
.ad-container {
  min-height: 250px;
  width: 100%;
  background-color: #f9f9f9;
}

/* Prevenir shifts con fuentes */
@font-face {
  font-family: 'MainFont';
  src: url('/fonts/main-font.woff2') format('woff2');
  font-display: swap;
}

/* Usar propiedades que no causan reflow */
.animated-element {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.3s, opacity 0.3s;
}

.animated-element:hover {
  transform: translateY(-10px);
  opacity: 0.8;
}

Este código CSS muestra técnicas para prevenir layout shifts: establecer aspect-ratio para imágenes, crear contenedores de tamaño fijo para anuncios, configurar font-display: swap para fuentes, y usar transform para animaciones en lugar de propiedades que causan reflow.