Skip to content

optimization

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

optimization

Folders and files

README.md

Optimization & Performance Workshop - ACME Edition

Slides: https://tkmaxx-workshop-optimization.vercel.app/optimization

Welcome to ACME's performance optimization workshop! Learn to identify and fix common performance issues in Next.js applications.

Prerequisites

  • Node.js 18+ installed
  • Basic knowledge of Next.js App Router
  • Understanding of React Server Components

Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

# Visit http://localhost:3000

Current Implementation (Unoptimized)

The Portfolio application is intentionally unoptimized with these issues:

  • Uses <img> tags instead of next/image
  • Loads Google Fonts via <link> tag instead of next/font
  • Sequential data fetches on homepage (waterfall)
  • Entire projects page is 'use client' with useEffect
  • Barrel imports (components/index.ts) prevent tree-shaking
  • Heavy Chart component statically imported (not code-split)
  • No metadata or SEO optimization
  • No remotePatterns configured for images

Tasks

Task 1: Image Optimization

Replace all <img> tags with next/image:

  • Add priority to the hero image (LCP candidate)
  • Set proper sizes attribute for responsive images
  • Configure remotePatterns in next.config.ts for picsum.photos and avatars.githubusercontent.com

Task 2: Font Optimization

Remove the <link> Google Fonts tag from the layout:

  • Use next/font/google to load Inter
  • Configure subsets, display: 'swap', and variable
  • Apply the font via CSS variable

Task 3: Fix Data Waterfalls

The homepage fetches data sequentially (250ms + 500ms + 300ms = 1050ms):

  • Use Promise.all() to fetch in parallel
  • Or wrap sections in <Suspense> for streaming

Task 4: Server Component Extraction

The projects page is entirely 'use client':

  • Convert the page itself to a Server Component
  • Only keep ProjectFilter as a Client Component
  • Fetch data on the server instead of via API route

Task 5: Metadata & SEO

Add proper metadata:

  • Static metadata export in layout.tsx (title, description)
  • generateMetadata in project detail page
  • Create sitemap.ts at app root

Task 6: Bundle Optimization

Fix barrel imports and code splitting:

  • Replace import { X } from "@/components" with direct imports
  • Use next/dynamic to lazy-load the Chart component on the contact page

Task 7: Bonus — Loading States

Add loading.tsx and Suspense boundaries for a polished loading experience.

Task 8: Bonus — Link Prefetching

Audit the navigation links instead of forcing every one to prefetch. Keep the default for Home and Projects, then compare it with prefetch={true} on one representative project-detail link in a production run. Do not add it to every card in the grid.

Resources

Happy coding!