I-profile ko ang iyong React o Next.js app at gagawin itong mas mabilis, na may mga numero

I-order ito kung sa tingin mo ay nagkakahalaga sa iyo ang mabagal na pahina ng mga sign-up o trapiko sa paghahanap at gusto mong panatilihin ang app na mayroon ka. Ang React at Next.js ay nagpapadala na ng karamihan sa kailangan ng isang mabilis na app, kaya ang mga pakinabang ay nagmumula sa paggamit ng mga tool na iyon nang maayos sa halip na magpalit ng mga stack.

Makakakuha ka ng mga numero, hindi mga pang-uri: LCP, CLS, INP at laki ng bundle bawat ruta, sinusukat bago at pagkatapos sa parehong throttled na koneksyon, sa isang talahanayan.

Ang Starter ay ang audit ng isang pahina: ang mga pagpapatakbo, ang mga natuklasan na niraranggo ayon sa benepisyo, walang binagong code. Ang Standard ay nagsisimula mula sa audit na iyon at ginugugol ang natitirang oras sa mga pag-aayos na nagpapagalaw sa mga numerong iyon. Sinasaklaw ng Advanced ang hanggang 5 ruta, inaayos ang pag-render at pag-cache, at nag-iiwan ng bundle budget sa CI upang ang susunod na release ay hindi tahimik na makapag-undo ng trabaho.

Ang trabaho ay nangyayari sa isang branch sa iyong repository, commit by commit, bawat isa ay may dahilan. Walang idine-deploy sa akin maliban kung hilingin mo ito.

Walang tawag. Lahat ay nakasulat, kasama ang mga sukat na hindi sumasang-ayon sa akin.

Mga Hakbang sa Pagkumpleto ng Iyong Proyekto
1. Sukatin kung ano talaga ang nakukuha ng iyong mga user - Lighthouse sa iyong mga live na pahina at isang React profiler session sa mga mabagal, sa isang pinaghihigpitang koneksyon. LCP, CLS, INP at laki ng bundle bawat ruta, isinulat bago hawakan ang anumang bagay.
2. Hanapin kung ano ang pinakamalaki ang gastos - Ang bundle at ang network waterfall: kung ano ang ipinapadala na walang gumagamit, kung ano ang humaharang sa unang pintura, aling mga bahagi ang muling nagre-render at bakit. Ang bawat paghahanap ay may tinatayang pagtitipid sa millisecond o kilobyte.
3. Ayusin ito, pinakamalaking panalo muna - Paghihiwalay ng code, paghawak ng imahe at font, render-blocking na trabaho, memoization kung saan hinihingi ng profiler, pagkuha ng data na inilipat mula sa kritikal na landas. Isang commit bawat pagbabago, bawat isa ay may dahilan.
4. Sukatin muli, magkatabi - Ang parehong pagpapatakbo sa binagong build: bago at pagkatapos sa isang talahanayan, bawat ruta at bawat sukatan. Kung may nagpabago ng isang bagay na mas masahol, sinasabi ng talahanayan at ibinabalik ang pagbabago.
5. Paglilipat sa iyong repository - Isang sangay o patch sa iyong repo, ang ulat, at isang tapat na listahan ng kung ano ang hindi ko ginawa at kung ano ang halaga nito. Ang pag-deploy ay nananatili sa iyong mga kamay.