Enhancing Website Performance with Next.js

Objective

The main goal of the project was to improve the performance of our website across both mobile and web platforms. The focus was on reducing key performance metrics such as First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Total Blocking Time (TBT) by leveraging best practices in Next.js and React.

Challenges

1. Initial Load Performance: The website needed faster rendering on the first load, especially on mobile networks.
2. Image Loading: Non-critical images were delaying initial render performance, negatively affecting FCP.
3. Unwanted Renders: Re-renders of non-critical components were causing unnecessary CPU overhead.
4. Unused CSS: The accumulation of unused CSS was increasing the styling payload, further slowing down the rendering process.

Optimization Strategies

1. Leveraging Next.js for Performance

1. Static Site Generation (SSG):
2. Static pages for content that does not change frequently were pre-rendered at build time.
3. This approach reduced the server load and ensured near-instant page loads.
4. Server-Side Rendering (SSR):
5. For dynamic content, SSR was used to generate pages on the fly, ensuring that dynamic data was always up-to-date while still benefiting from improved initial load times.
6. The use of SSR helped in reducing FCP by rendering the critical components more quickly.

2. Image Optimization

1. Lazy Loading:
2. Images used for initial render were loaded immediately, while non-critical images were deferred using lazy loading techniques.
3. This reduced the initial payload and helped improve FCP and LCP, as the browser wasn’t blocked by images that were not immediately visible.
4. Optimized Image Formats:
5. Depending on the user’s device and network conditions, appropriate image formats and responsive image techniques were used to serve the best balance of quality and performance.

3. Reducing Unwanted Re-renders

1. Code Splitting:
2. The application was divided into smaller bundles using code splitting. This technique ensured that only the necessary code was loaded during the initial render.
3. By isolating components that were not immediately visible or needed at page load, unnecessary re-renders were minimized, enhancing the overall responsiveness of the website.

4. CSS Optimization

1. PurgeCSS Integration:
2. Unused CSS was systematically removed with PurgeCSS during the build process.
3. This optimization reduced the CSS file size, leading to faster style computations and improved rendering speed.

5. Third-Party Library Minimization

Removed unnecessary libraries to reduce JavaScript bundle size.

We conducted an audit and removed unnecessary third-party libraries that were bloating the application, leading to an increase in the JavaScript bundle size.

Reducing the size of the JavaScript bundle, we reduced TBT and FCP, making the page load faster and respond more efficiently.

6. Removed Unused CSS/JS

Cleaned up unused styles/scripts using PostCSS tools to boost performance metrics.

We removed unused CSS and JavaScript files and ensured that only the required styles and scripts were loaded.

This reduces the overall bundle size and eliminates unnecessary downloads, improving both FCP and LCP.

7. Technical SEO Enhancements

• Fixed soft 404 and canonical errors
• Refactored URLs (e.g. /EachState → /us-state)
• Added meta tags, OG tags, XML sitemap, and robots.txt

8. React Codebase Refactoring

Refactored code using modern React patterns (hooks, context, React.memo) to reduce prop drilling and enhance maintainability.

9. Code Quality & Standards

Added ESLint, Prettier, and Git pre-hooks to ensure consistent, clean code.

Performance Outcomes

Improved First Contentful Paint (FCP):

1. The combined strategy of SSR for dynamic content and SSG for static pages led to noticeably faster initial rendering.
2. Critical resources were prioritized in the head, ensuring faster paint of above-the-fold content.
3. Unused CSS and JavaScript were removed to reduce the render-blocking resources.
4. Optimized font loading using "font-display: swap", reducing visual delays.
5. Minimized external scripts to improve the browser’s critical rendering path.

Enhanced Largest Contentful Paint (LCP):

1. Optimizations in image loading and critical content rendering significantly reduced LCP metrics.
2. Hero section images were served using "next/image" with "priority" flag enabled.
3. Preloading of fonts and hero images ensured faster rendering of largest visible elements.
4. Reduced the number of DOM elements above-the-fold, lowering layout recalculation time.
5. Critical content was loaded early using "link rel="preload"" and smart hydration techniques.

Reduced Total Blocking Time (TBT):

1. Through code splitting and lazy loading, the blocking time experienced by users during interactions was minimized.
2. React.memo and useCallback were used to prevent unnecessary re-renders.
3. Heavy third-party scripts were deferred or removed entirely.
4. Minimized main-thread JavaScript execution by deferring low-priority logic.
5. Reduced JS bundle size by removing unused dependencies and redundant logic.

Overall User Experience:

1. The website’s responsiveness on both mobile and desktop environments was markedly improved, leading to a more engaging user experience.
2. Layout shifts were eliminated, ensuring stable UI behavior during load and interaction.
3. Navigation felt snappier due to reduced payloads and faster hydration of routes.
4. Interactive components loaded faster thanks to async loading and state persistence.
5. Cumulative Layout Shift (CLS) was nearly eliminated, improving visual stability across devices.

Enhancement: Metrics Before & After

Before

After

Results & Impact

Metric	Before Optimization	After Optimization
First Contentful Paint (FCP)	~2.8s	1.3s
Largest Contentful Paint (LCP)	~4.2s	1.9s
Cumulative Layout Shift (CLS)	0.18	0.01
Search Console Errors	40+	0 Remaining
Indexing Status	Partial	Fully Indexed

Tech Stack

• Frontend: Next.js (App Router), React 18
• SEO Tools: Google Search Console, Lighthouse, Web.dev
• Dev Tools: ESLint, Prettier, PostCSS, Git Hooks
• Image Optimization: next/image, WebP, responsive sizes
• Hosting: Vercel

Conclusion

This project demonstrates that using Next.js’ hybrid capabilities of SSG and SSR, combined with precise optimizations in image loading, code management, and CSS cleanup, can greatly enhance web performance. By targeting the critical performance metrics (FCP, LCP, and TBT) and reducing unnecessary overhead, the website not only achieved a smoother load time but also a more responsive user experience across various platforms.

This case study reflects both the technical and strategic efforts that enabled us to deliver a high-performance product that aligns with modern web development best practices.