Com hem optimitzat el rendiment d'una app Next.js al 98 a Lighthouse

Quan un client ens va portar la seva plataforma e-commerce amb una puntuació de 52 a Lighthouse, sabíem que hi havia feina a fer. En aquest article detallem el procés complet d'optimització.

El punt de partida

L'aplicació carregava més de 8MB de JavaScript al bundle inicial, imatges sense optimitzar i sense cap tipus de code splitting. El temps fins a interactiu (TTI) superava els 12 segons en connexions 3G.

Tècniques aplicades

Les principals optimitzacions que hem aplicat han estat:

• next/image: Hem migrat totes les imatges al component optimitzat de Next.js, reduint el pes total en un 65%.
• Dynamic imports: Hem dividit els components pesats amb dynamic() per carregar només el necessari.
• Route prefetching: Hem configurat correctament el prefetching de Next.js per millorar la navegació.
• Font optimization: Fem servir next/font per eliminar el layout shift causat per les fonts.

Resultats

Després d'aplicar aquestes tècniques, la puntuació de Lighthouse va passar de 52 a 98. El temps de càrrega principal va baixar de 4.2s a 0.8s i el TTI de 12s a 2.1s.

La lliçó més important: l'optimització no és un pas final, és una part integral del procés de desenvolupament.