بهینه‌سازی عملکرد در Next.js

این مقاله تکنیک‌های عملی برای بهبود Performance در پروژه‌های Next.js را بررسی می‌کند:

• استفاده از next/image برای بهینه‌سازی تصاویر
• بهینه‌سازی فونت‌ها و CSS
• کاهش JavaScript غیرضروری
• بررسی Core Web Vitals با ابزارهایی مثل Lighthouse

Core Web Vitals در Next.js

برای ارزیابی تجربه واقعی کاربر، سه معیار اصلی Core Web Vitals اهمیت زیادی دارند:

• LCP — Largest Contentful Paint برای سنجش سرعت نمایش محتوای اصلی
• INP — Interaction to Next Paint برای سنجش سرعت پاسخ‌گویی تعاملات کاربر
• CLS — Cumulative Layout Shift برای سنجش ثبات بصری صفحه

مقادیر هدف مناسب:

LCP ≤ 2.5s
INP ≤ 200ms
CLS ≤ 0.1

---

بهبود LCP در Next.js

در بسیاری از صفحات، عنصر LCP می‌تواند تصویر Hero، تصویر Cover یا یک بخش بزرگ از محتوای بالای صفحه باشد.

اگر تصویر اصلی صفحه دیر دانلود شود، زمان نمایش محتوای اصلی افزایش پیدا می‌کند.

در Next.js می‌توان برای تصاویر از next/image استفاده کرد:

import Image from 'next/image'

export default function HeroImage() {
  return (
    <Image
      src="/images/perf-cover.jpg"
      alt="Next.js performance optimization"
      width={1200}
      height={630}
    />
  )
}

مشخص بودن ابعاد تصویر کمک می‌کند مرورگر فضای لازم را از قبل رزرو کند و احتمال Layout Shift کاهش پیدا کند.

---

بهینه‌سازی تصاویر در Next.js

تصاویر معمولاً یکی از بزرگ‌ترین منابع حجم یک صفحه هستند.

کامپوننت next/image امکاناتی مثل:

• بهینه‌سازی خودکار تصویر
• تولید اندازه مناسب برای دستگاه‌های مختلف
• Lazy Loading
• کاهش Layout Shift

را فراهم می‌کند.

برای تصاویر مهم بالای صفحه می‌توان از priority استفاده کرد:

import Image from 'next/image'

export default function HeroImage() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Frontend architecture"
      width={1200}
      height={630}
      priority
    />
  )
}

استفاده از priority باید محدود باشد و فقط برای تصاویر مهمی که در بخش اولیه صفحه نمایش داده می‌شوند استفاده شود.

---

بهینه‌سازی Font و CSS

فونت‌ها و CSS نیز می‌توانند روی سرعت نمایش صفحه تأثیر بگذارند.

در Next.js استفاده از next/font کمک می‌کند فونت‌ها بهتر مدیریت شوند:

import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
})

همچنین بهتر است:

• CSS غیرضروری حذف شود
• componentهای سنگین به بخش‌های کوچک‌تر تقسیم شوند
• فقط JavaScript مورد نیاز هر صفحه بارگذاری شود

---

کاهش JavaScript غیرضروری

یکی از دلایل Performance ضعیف، ارسال JavaScript بیش از نیاز به مرورگر است.

در Next.js بهتر است:

• Server Componentها را تا حد امکان حفظ کنیم
• Client Component فقط زمانی استفاده شود که interaction نیاز داریم
• کتابخانه‌های سنگین را فقط در زمان نیاز load کنیم

برای مثال:

import dynamic from 'next/dynamic'

const Comments = dynamic(() => import('./Comments'))

این کار می‌تواند حجم JavaScript اولیه را کاهش دهد.

---

بررسی Performance با Lighthouse

برای پیدا کردن مشکلات Performance می‌توان از Lighthouse استفاده کرد.

موارد مهم برای بررسی:

• Performance Score
• Largest Contentful Paint
• Total Blocking Time
• Cumulative Layout Shift
• حجم JavaScript

اما همیشه باید نتیجه Lighthouse را در کنار تجربه واقعی کاربران بررسی کرد.

---

جمع‌بندی

Performance در Next.js فقط سریع‌تر باز شدن صفحه نیست.

یک معماری Performance محور شامل:

• تصاویر بهینه
• Rendering مناسب
• JavaScript کمتر
• مدیریت صحیح فونت‌ها
• بررسی مداوم Core Web Vitals

است.

Performance بخشی از معماری Frontend است، نه یک مرحله نهایی بعد از توسعه.