Performance Audit & Fix

Objective

You are given a React application with severe performance problems. Your task is to identify and fix issues affecting all three Core Web Vitals: LCP, CLS, and INP.

The Problem Application

The application is a product listing page with the following deliberate performance issues:

LCP Issues

• Hero image is a 2MB unoptimized PNG with no width/height attributes
• Three render-blocking Google Fonts loaded via <link> in the head
• All CSS is in a single large bundle (no critical CSS extraction)
• No preloading of the hero image

CLS Issues

• Product images have no width/height or aspect-ratio set
• A promotional banner is dynamically injected after 2 seconds
• Web font swap causes visible layout shift (no size-adjust)
• An ad placeholder has no reserved height

INP Issues

• Product filtering runs a synchronous loop over 10,000 items on every keystroke
• Sort function blocks the main thread for 300ms+
• Click handlers trigger synchronous layout recalculations (forced reflow)

Your Tasks

Task 1: Fix LCP (35 points)

• Convert the hero image to use <picture> with AVIF/WebP sources and a JPG fallback
• Add width, height, and fetchpriority="high" to the hero image
• Add <link rel="preload"> for the hero image
• Use font-display: swap for custom fonts and preload the primary font file
• Extract critical above-the-fold CSS into an inline <style> block

Task 2: Fix CLS (30 points)

• Add width and height attributes (or CSS aspect-ratio) to all product images
• Reserve space for the promotional banner using min-height before it loads
• Add size-adjust, ascent-override, and descent-override to the @font-face rule to minimize font swap shift
• Set a fixed min-height on the ad placeholder container

Task 3: Fix INP (35 points)

• Debounce the search/filter input with a 300ms delay
• Break the product filtering into chunks using setTimeout(fn, 0) or scheduler.yield() to yield to the main thread
• Move the sort comparison into a Web Worker or break it into yielding chunks
• Replace forced reflow patterns (reading offsetHeight after writing styles) with requestAnimationFrame batching

Starter Code

The starter code below represents the broken application. Fix the issues in place.

Evaluation Criteria

Your submission will be evaluated on whether the fixes correctly address each Core Web Vital issue. You do not need to run Lighthouse — the grading rubric checks your code for the specific optimization patterns.

---

What to Submit

Your submission should contain 1 file section in the editor below: the fixed React application code with all performance issues resolved.