Ik zal je React- of Next.js-app profileren en sneller maken, met cijfers

Bestel dit als u denkt dat trage pagina's u aanmeldingen of zoekverkeer kosten en u de app die u heeft wilt behouden. React en Next.js leveren al het meeste van wat een snelle app nodig heeft, dus de winst komt van het goed gebruiken van die tools in plaats van het wisselen van stacks.

U krijgt cijfers, geen bijvoeglijke naamwoorden: LCP, CLS, INP en bundelgrootte per route, gemeten voor en na op dezelfde beperkte verbinding, in één tabel.

Starter is de audit van één pagina: de runs, de bevindingen gerangschikt op opbrengst, geen code gewijzigd. Standard begint met die audit en besteedt de rest van de tijd aan de oplossingen die die cijfers beïnvloeden. Advanced omvat tot 5 routes, stemt rendering en caching af, en laat een bundelbudget achter in CI, zodat de volgende release het werk niet stilletjes ongedaan kan maken.

Werk gebeurt op een branch in uw repository, commit voor commit, elk met zijn reden. Niets wordt door mij geïmplementeerd, tenzij u erom vraagt.

Geen telefoontjes. Alles schriftelijk, inclusief de metingen die het niet met mij eens zijn.

Stappen voor het voltooien van uw project
1. Meet wat uw gebruikers daadwerkelijk krijgen - Lighthouse op uw live pagina's en een React profiler-sessie op de trage, op een beperkte verbinding. LCP, CLS, INP en bundelgrootte per route, opgeschreven voordat er iets wordt aangeraakt.
2. Zoek wat het meeste kost - De bundel en de netwerkwaterval: wat wordt verzonden dat niemand gebruikt, wat de eerste weergave blokkeert, welke componenten opnieuw renderen en waarom. Elke bevinding heeft een geschatte besparing in milliseconden of kilobytes.
3. Repareer het, grootste winst eerst - Code splitting, afbeeldings- en lettertypeverwerking, render-blokkerend werk, memoization waar de profiler erom vraagt, gegevens ophalen verplaatst van het kritieke pad. Eén commit per wijziging, elk met zijn reden.
4. Meet opnieuw, naast elkaar - Dezelfde runs op de gewijzigde build: voor en na in één tabel, per route en per metric. Als een wijziging iets erger heeft gemaakt, zegt de tabel dat en wordt de wijziging teruggedraaid.
5. Overdracht in uw repository - Een branch of patch in uw repo, het rapport en een eerlijke lijst van wat ik niet heb gedaan en wat het waard zou zijn. Implementatie blijft in uw handen.