Core Web Vitals در ۲۰۲۵: LCP، INP، CLS — راهنمای بهبود

import Image from "next/image";
import { GeistSans } from "next/font/google";

const font = GeistSans({ subsets: ["latin"], display: "swap" });

export default function Hero(){
  return (
    <section className={`relative ${font.className}`}>
      <Image
        src="/images/hero.webp"
        alt="قهرمان"
        fill
        priority
        sizes="100vw"
        className="object-cover"
      />
      <div className="relative z-10 p-8">
        <h1 className="text-3xl font-extrabold">سلام کارایی 👋</h1>
      </div>
    </section>
  );
}

import Image from "next/image";

export function Card(){
  return (
    <Image
      src="/images/card.webp"
      alt="کارت"
      width={800}
      height={450}
      placeholder="blur"
      blurDataURL="data:image/webp;base64,UklGR..."
    />
  );
}

import { useState, useTransition } from "react";

export function SearchBox(){
  const [isPending, startTransition] = useTransition();
  const [q, setQ] = useState("");

  function onInput(e: React.ChangeEvent<HTMLInputElement>){
    const value = e.target.value;
    setQ(value);
    startTransition(() => {
      // فراخوانی فیلتر/جستجوی سنگین
    });
  }

  return (
    <input className="input" value={q} onChange={onInput} />
  );
}