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

در حال بارگذاری پست...

بهبود LCP در Next.js

تصویر قهرمان (Hero) را با next/image و priority رندر کن.
فونت‌های مهم را با next/font لود کن.
Critical CSS را سریع برسان و از بلاکینگ‌های غیرضروری پرهیز کن.

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>
  );
}

بهینه‌کردن تصویر LCP و فونت

کاهش CLS (جهش چیدمان)

ابعاد تصاویر/تبلیغات را از قبل مشخص کن، از Placeholders استفاده کن و فونت‌ها را با display: swap لود کن.

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..."
    />
  );
}

بهبود INP (پاسخ‌گویی تعاملات)

• کارهای سنگین را با Web Worker/server actions از مسیر تعامل جدا کن. • از virtualization در لیست‌ها استفاده کن. • در React از useTransition برای تغییرات غیرضروری فوری استفاده کن.

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} />
  );
}

تعامل روان با useTransition

Listenerهای عمومی روی document را کم کن؛ delegation هدفمند روی کانتینرهای کوچک‌تر، INP را بهبود می‌دهد.

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

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

Core Web Vitals در یک نگاه (۲۰۲۵)

سنجش میدانی vs آزمایشگاهی

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

Core Web Vitals در یک نگاه (۲۰۲۵)

سنجش میدانی vs آزمایشگاهی

بهبود LCP در Next.js

کاهش CLS (جهش چیدمان)

بهبود INP (پاسخ‌گویی تعاملات)

جمع‌بندی