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
Declare a second @font-face for the fallback (src: local(...)) carrying size-adjust, ascent-override, and descent-override tuned to BrandFont's metrics, and put it in the font-family stack ahead of the generic. Do not put those descriptors on BrandFont's own rule — that changes how BrandFont renders instead of matching the fallback to it
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
Reorder the click handler so the offsetHeight read happens before any style write, then apply the writes (a requestAnimationFrame callback is a good place for them). Reordering is what removes the forced layout; rAF alone does not

Starter Code

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

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.

Instructions