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

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

Мәселе

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

Шешімдер

1. Code splitting

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

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

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

3. SSR және SSG

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

Нәтижелер

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

Қорытынды

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

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

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