Identify and fix performance issues to create faster, smoother user experiences.

Assess Performance Issues

Understand current performance and identify problems:

Measure current state

:

Core Web Vitals

LCP, FID/INP, CLS scores

Load time

Time to interactive, first contentful paint

Bundle size

JavaScript, CSS, image sizes

Runtime performance

Frame rate, memory usage, CPU usage

Network

Request count, payload sizes, waterfall

Identify bottlenecks

:

What's slow? (Initial load? Interactions? Animations?)

What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)

How bad is it? (Perceivable? Annoying? Blocking?)

Who's affected? (All users? Mobile only? Slow connections?)

CRITICAL

Measure before and after. Premature optimization wastes time. Optimize what actually matters.

Optimization Strategy

Create systematic improvement plan:

Loading Performance

Optimize Images

:

Use modern formats (WebP, AVIF)

Proper sizing (don't load 3000px image for 300px display)

Lazy loading for below-fold images

Responsive images (

srcset

,

picture

element)

Compress images (80-85% quality is usually imperceptible)

Use CDN for faster delivery

<

img

src

=

"

hero.webp

"

srcset

=

"

hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w

"

sizes

=

"

(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px

"

loading

=

"

lazy

"

alt

=

"

Hero image

"

/>

Reduce JavaScript Bundle

:

Code splitting (route-based, component-based)

Tree shaking (remove unused code)

Remove unused dependencies

Lazy load non-critical code

Use dynamic imports for large components

// Lazy load heavy component

const

HeavyChart

=

lazy

(

(

)

=>

import

(

'./HeavyChart'

)

)

;

Optimize CSS

:

Remove unused CSS

Critical CSS inline, rest async

Minimize CSS files

Use CSS containment for independent regions

Optimize Fonts

:

Use

font-display: swap

or

optional

Subset fonts (only characters you need)

Preload critical fonts

Use system fonts when appropriate

Limit font weights loaded

@font-face

{

font-family

:

'CustomFont'

;

src

:

url

(

'/fonts/custom.woff2'

)

format

(

'woff2'

)

;

font-display

:

swap

;

/ Show fallback immediately /

unicode-range

:

U+

0020

-007

F

;

/ Basic Latin only /

}

Optimize Loading Strategy

:

Critical resources first (async/defer non-critical)

Preload critical assets

Prefetch likely next pages

Service worker for offline/caching

HTTP/2 or HTTP/3 for multiplexing

Rendering Performance

Avoid Layout Thrashing

:

// ❌ Bad: Alternating reads and writes (causes reflows)

elements

.

forEach

(

el

=>

{

const

height

=

el

.

offsetHeight

;

// Read (forces layout)

el

.

style

.

height

=

height

*

2

;

// Write

}

)

;

// ✅ Good: Batch reads, then batch writes

const

heights

=

elements

.

map

(

el

=>

el

.

offsetHeight

)

;

// All reads

elements

.

forEach

(

(

el

,

i

)

=>

{

el

.

style

.

height

=

heights

[

i

]

*

2

;

// All writes

}

)

;

Optimize Rendering

:

Use CSS

contain

property for independent regions

Minimize DOM depth (flatter is faster)

Reduce DOM size (fewer elements)

Use

content-visibility: auto

for long lists

Virtual scrolling for very long lists (react-window, react-virtualized)

Reduce Paint & Composite

:

Use

transform

and

opacity

for animations (GPU-accelerated)

Avoid animating layout properties (width, height, top, left)

Use

will-change

sparingly for known expensive operations

Minimize paint areas (smaller is faster)

Animation Performance

GPU Acceleration

:

/ ✅ GPU-accelerated (fast) /

.animated

{

transform

:

translateX

(

100

px

)

;

opacity

:

0.5

;

}

/ ❌ CPU-bound (slow) /

.animated

{

left

:

100

px

;

width

:

300

px

;

}

Smooth 60fps

:

Target 16ms per frame (60fps)

Use

requestAnimationFrame

for JS animations

Debounce/throttle scroll handlers

Use CSS animations when possible

Avoid long-running JavaScript during animations

Intersection Observer

:

// Efficiently detect when elements enter viewport

const

observer

=

new

IntersectionObserver

(

(

entries

)

=>

{

entries

.

forEach

(

entry

=>

{

if

(

entry

.

isIntersecting

)

{

// Element is visible, lazy load or animate

}

}

)

;

}

)

;

React/Framework Optimization

React-specific

:

Use

memo()

for expensive components

useMemo()

and

useCallback()

for expensive computations

Virtualize long lists

Code split routes

Avoid inline function creation in render

Use React DevTools Profiler

Framework-agnostic

:

Minimize re-renders

Debounce expensive operations

Memoize computed values

Lazy load routes and components

Network Optimization

Reduce Requests

:

Combine small files

Use SVG sprites for icons

Inline small critical assets

Remove unused third-party scripts

Optimize APIs

:

Use pagination (don't load everything)

GraphQL to request only needed fields

Response compression (gzip, brotli)

HTTP caching headers

CDN for static assets

Optimize for Slow Connections

:

Adaptive loading based on connection (navigator.connection)

Optimistic UI updates

Request prioritization

Progressive enhancement

Core Web Vitals Optimization

Largest Contentful Paint (LCP < 2.5s)

Optimize hero images

Inline critical CSS

Preload key resources

Use CDN

Server-side rendering

First Input Delay (FID < 100ms) / INP (< 200ms)

Break up long tasks

Defer non-critical JavaScript

Use web workers for heavy computation

Reduce JavaScript execution time

Cumulative Layout Shift (CLS < 0.1)

Set dimensions on images and videos

Don't inject content above existing content

Use

aspect-ratio

CSS property

Reserve space for ads/embeds

Avoid animations that cause layout shifts

/ Reserve space for image /

.image-container

{

aspect-ratio

:

16

/

9

;

}

Performance Monitoring

Tools to use

:

Chrome DevTools (Lighthouse, Performance panel)

WebPageTest

Core Web Vitals (Chrome UX Report)

Bundle analyzers (webpack-bundle-analyzer)

Performance monitoring (Sentry, DataDog, New Relic)

Key metrics

:

LCP, FID/INP, CLS (Core Web Vitals)

Time to Interactive (TTI)

First Contentful Paint (FCP)

Total Blocking Time (TBT)

Bundle size

Request count

IMPORTANT

Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.

NEVER

:

Optimize without measuring (premature optimization)

Sacrifice accessibility for performance

Break functionality while optimizing

Use

will-change

everywhere (creates new layers, uses memory)

Lazy load above-fold content

Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first)

Forget about mobile performance (often slower devices, slower connections)

Verify Improvements

Test that optimizations worked:

Before/after metrics

Compare Lighthouse scores

Real user monitoring

Track improvements for real users

Different devices

Test on low-end Android, not just flagship iPhone

Slow connections

Throttle to 3G, test experience

No regressions

Ensure functionality still works

User perception

Does it feel faster? Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.