Tối ưu Web Performance thực chiến: Kỹ thuật đạt điểm 99+ Lighthouse & cải thiện INP

// Hàm hỗ trợ chia nhỏ tác vụ nhường quyền cho Main Thread
export async function yieldToMain() {
  if ("scheduler" in window && "yield" in (window as any).scheduler) {
    return await (window as any).scheduler.yield();
  }
  return new Promise((resolve) => setTimeout(resolve, 0));
}

// Ứng dụng trong việc xử lý danh sách lớn
export async function processLargeDataset(items: any[]) {
  const results = [];
  for (let i = 0; i < items.length; i++) {
    results.push(heavyCompute(items[i]));

    // Cứ mỗi 50 items lại yield một lần để trình duyệt kịp vẽ lại UI
    if (i % 50 === 0) {
      await yieldToMain();
    }
  }
  return results;
}

import Image from "next/image";

export function HeroBanner() {
  return (
    <div className="relative w-full aspect-[16/9] md:aspect-[21/9] overflow-hidden rounded-2xl">
      <Image
        src="/hero-banner.webp"
        alt="Hero Showcase"
        fill
        priority // Preload ngay từ HTML header
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
        quality={85}
        className="object-cover"
      />
    </div>
  );
}