Lista de Cheks de Rendimiento de NextJS

• Aplicaciones
• Imágenes
• Estilos
• Fuentes
• Scripts
• Datos
• Scripts de terceros
• Rendimiento percibido
• Pruebas y análisis

• Los frontends están completamente en caché en CDNs siempre que sea posible ("Jamstacked" https://jamstack.org/)
• Donde eso no sea posible, las páginas se construyen en el tiempo de construcción o en el servidor utilizando la Regeneración Estática Incremental (https://www.smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/)
• Utiliza estrategias de reemplazo de módulos en los enlaces a rutas internas (https://nextjs.org/docs/api-reference/next/link)

• Las imágenes se obtienen ya sea en el momento de la construcción o a pedido desde un CDN
• Las imágenes se obtienen en las dimensiones correctas y los formatos más eficientes (https://ericportis.com/posts/2014/srcset-sizes/)
• Las imágenes de alta prioridad (las que están en el viewport cuando se abre la página) usan preload responsivo (https://www.bronco.co.uk/our-ideas/using-relpreload-for-responsive-images/)
• Las imágenes de baja prioridad se descargan de manera asíncrona usando loading="lazy"
• Utiliza componentes de imágenes de la aplicación cuando sea posible (https://nextjs.org/docs/api-reference/next/image)

• No uses css-in-js (https://pustelto.com/blog/css-vs-css-in-js-perf/)
• Solo los estilos usados se envían al cliente (https://markmurray.co/blog/tree-shaking-css-modules/)
• Si usas css-in-js intenta hacer que el css sea lo más estático posible (https://itnext.io/how-to-increase-css-in-js-performance-by-175x-f30ddeac6bce)
• El CSS está minimizado

• Usa sustitución de fuentes (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display)
• Usa fuentes desde un CDN
• Descarga solo las fuentes necesarias
• Subconjuntos de fuentes cuando sea posible (https://developers.google.com/fonts/docs/getting_started#specifying_script_subsets)

• Solo los elementos interactivos se hidratan en el cliente (https://medium.com/@luke_schmuke/how-we-achieved-the-best-web-performance-with-partial-hydration-20fab9c808d5)
• Solo el JavaScript usado se envía al cliente (https://web.dev/codelab-remove-unused-code/, https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking)
• Considera usar Preact en lugar de React (https://dev.to/dlw/next-js-replace-react-with-preact-2i72)
• El JavaScript está minimizado
• Los scripts están comprimidos usando GZip (bueno) o Brotli (mejor)
• Los paquetes de JavaScript están divididos para permitir una descarga y análisis efectivos
• Solo el JavaScript esencial es bloqueante
• Usa web workers para operaciones intensivas en memoria
• Usa bibliotecas más eficientes (o usa JavaScript nativo) cuando sea posible (por ejemplo, Lodash vs Underscore, API Temporal vs Moment)

• Solo obtén los datos que necesitas (considera usar GraphQL)
• Sin encadenamiento de API (considera usar GraphQL)
• Minimiza la normalización de datos (descarga a una función independiente o backend)

• Los scripts de terceros no son bloqueantes (https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript)
• Usa sugerencias de recursos para paralelizar descargas (https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript)

• Se utilizan marcadores de posición en la UI para los estados de carga
• La pérdida de conectividad resulta en una notificación y muestra el estado anterior (https://www.apollographql.com/docs/react/data/queries/#previousdata)
• Los estados de acción completados se muestran cuando los datos han sido enviados, no recibidos por el servidor
• Prevenir el salto de contenido / cambio de diseño
• Reducir el tiempo de resolución de DNS y negociación SSL cuando sea posible (https://zoompf.com/blog/2014/12/optimizing-tls-handshake/)

• Los PR que degradan el rendimiento se identifican en la pipeline
• Se mide el rendimiento del frontend (https://speedcurve.com/)
• El rendimiento del frontend se analiza regularmente
• El análisis se convierte en elementos accionables del backlog