Skip to main content

Performance

React javascript framework.

Long term performance across all metrics business and technical.

Subjects​

Next Faster​

Github NextFaster

Planning​

Best Practice Workflow with React.

  • Identify your component's different visual states
  • Determine what triggers those state changes
  • Represent the state in memory using useState
  • Remove any non-essential state variables
  • Connect the event handlers to set the state
  • How much complexity?
  • Should complexity be handled at the server?
  • Where will testing provide greatest value?

Lighthouse Scores​

Lighthouse scores.

Key Metrics​

These metrics are weighted to calculate the overall Lighthouse Performance score, with LCP and TBT having the biggest impact.

  1. First Contentful Paint (FCP) - measures when the first piece of content is rendered
  2. Speed Index (SI) - measures how quickly content is visually displayed
  3. Largest Contentful Paint (LCP) - measures when the largest content element is rendered
  4. Total Blocking Time (TBT) - measures the total time the main thread is blocked
  5. Cumulative Layout Shift (CLS) - measures unexpected layout shifts

Optimisation Tips​

Tips to Optimize Next.js for 100% Lighthouse Scores:

  1. Image Optimization - Use Next.js's built-in Image component for automatic lazy loading, resizing, and modern formats like WebP.
  2. Code Splitting - Use Next.js's dynamic imports to split code into separate chunks loaded on-demand. This reduces work on the main thread.
  3. Static Site Generation - Use Next.js static generation to pre-render pages at build time, reducing server response times.
  4. Lazy Loading - Implement lazy loading for images and other non-critical content. Use skeleton loaders while content is fetched.
  5. CDN Usage - Deploy the Next.js app on a platform like Vercel that provides a global CDN for fast content delivery.
  6. Avoid Render-Blocking Resources - Eliminate render blocking CSS/JS and use code splitting to lazy load non-critical modules.
  7. Optimize Fonts - Subset fonts, use font-display, and preload key web fonts.
  8. Avoid Excessive DOM Size - Keep the DOM tree small and avoid too many elements/nesting.
  9. Efficient Hydration - Avoid blocking the main thread with excessive hydration of client-side JS.

Profiling​

Profiling tools.

Architecture​

Going serverless.

Common Pitfalls​

See Clean Architecture