Next.js өнімділігін оңтайландыру

Бұл мақалада Next.js жобасында жүктеу уақытын 3 секундтан 1.2 секундқа дейін қалай қысқартқаным туралы айтамын.

Мәселе

Алғашында бет 3+ секундта жүктелді — конверсия үшін бұл қауіпті. Барлық кодты қайта жазбай, өнімділікті жақсарту қажет болды.

Шешімдер

1. Code splitting

Ауыр компоненттерді динамикалық импорттау:


1import dynamic from 'next/dynamic';
2
3const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
4  loading: () => <div>Жүктелуде...</div>,
5  ssr: false,
6});

2. Суреттерді оңтайландыру

Next.js Image компоненті суреттерді автоматты түрде оңтайландырады:


1import Image from 'next/image';
2
3<Image
4  src="/hero.jpg"
5  alt="Hero"
6  width={1200}
7  height={600}
8  priority
9  placeholder="blur"
10/>;

3. SSR және SSG

Статикалық контент үшін SSG қолданамыз, ISR‑мен:


1export async function getStaticProps() {
2  return {
3    props: { data },
4    revalidate: 3600, // ISR әр 60 минутта
5  };
6}

Нәтижелер

LCP: 1.2 сек (бұрын 3.2 сек)
FID: 50ms (бұрын 200ms)
CLS: 0.05 (бұрын 0.15)
PageSpeed Score: 96/100

Қорытынды

Қысқаша: алдымен өлшеу, кейін басты тар жерлерді түзету.

LCP/FID/CLS көрсеткіштерін базалық деңгейде өлшеңіз;
code splitting және суреттерді оңтайландыруды енгізіңіз;
сценарийге қарай SSR немесе SSG таңдаңыз.

Өнімділікті оңтайландыру — итеративті процесс. Алдымен өлшеңіз, содан кейін ең маңызды тар орындарды жақсартыңыз.

Next.js өнімділігі: 3 секундтан 1.2 секундқа дейін