La pintura con contenido más grande es el tiempo que el contenido principal permanece en blanco. La interacción con Next Paint es el tiempo durante el cual un clic parece ignorado. No dude en abrir Chrome DevTools y observar los números reales en su propia página antes de confiar en una auditoría. Aquí están las correcciones en el orden en que suelen pagar.

LCP: deja de hacer que el navegador adivine

  1. El navegador solo descarga tu imagen hero después de ver que existe. Añadir fetchpriority="high" a esa img la sube en la cola y, medido aquí, mueve el LCP más que cualquier librería.
  2. Precargue la URL principal exacta una vez en la página exacta que la utiliza, no en todas las páginas del sitio.
  3. Envíe al héroe con un tamaño y un formato previos y alojado en una CDN. Un JPEG de 3 MB sobre 4G es donde nacen los sitios web lentos.
  4. Hospede sus fuentes usted mismo, o al menos precargue solo los pesos que realmente usa en el texto LCP.
<img src="/img/hero.webp" fetchpriority="high" decoding="async" />

INP: deja de bloquear el hilo principal

  • Muestre algo en el marco después del toque y termine el trabajo a continuación. Un botón que cambia a 'Trabajando...' en un marco pintado está bien.
  • Un oyente intenso es peor que diez oyentes ligeros. Combine el trabajo con requestIdleCallback cuando nada deba ser instantáneo.
  • Envíe menos JavaScript. Un paquete de 300 KB es una cola, no un lugar para almacenar lógica.
btn.addEventListener("click", () => {
  setState("saving");
  requestAnimationFrame(() => doHeavyWork());
});
Nadie visita el marco. Visitan por la página y la velocidad.

Luego vuelva a medir, en Lighthouse y en un teléfono promedio real, porque los simuladores perdonan cosas que el 4G real no perdona. Las mejoras del veinte por ciento en ambos signos vitales son normales para esta tarde.