What are the ways to optimise front-end performance?

Front-end performance optimisation overview

Think about performance along the three phases of how users perceive your page:

Loading — how quickly resources are downloaded and ready.
Rendering — how quickly the browser can paint.
Runtime / Interaction — how smooth execution and interactions feel.

These map to Core Web Vitals: LCP (loading), CLS (visual stability), INP (interaction).

1. Network / resource loading

Compression: enable Gzip / Brotli; use WebP or AVIF for images; minify SVGs.
HTTP/2 & HTTP/3: multiplexing and fewer connection handshakes.
CDN: serve static assets from the edge, closer to users.
HTTP caching: Cache-Control, ETag, hashed filenames + immutable.
Preconnect / preload:
- <link rel="preconnect"> opens connections early
- <link rel="dns-prefetch"> resolves DNS early
- <link rel="preload"> fetches critical assets (fonts, LCP image)
- <link rel="prefetch"> fetches next-page assets
Image optimisation:
- srcset / <picture> for responsive images
- loading="lazy" for off-screen images
- decoding="async"
- Always set width / height to avoid CLS

2. JavaScript

Code splitting per route / component so only the needed code is loaded.
Tree shaking to drop unused exports.
Lazy loading via dynamic import(), React lazy, Vue defineAsyncComponent.
Minify / compress with Terser, esbuild, or SWC.
Keep the main thread free: break up long tasks, use requestIdleCallback, move heavy work into Web Workers.
async / defer on external scripts so they don't block HTML parsing.
Drop unused polyfills / libraries.

3. CSS

Critical CSS inlined in <head>; defer the rest.
Keep selectors simple; avoid deep descendant chains.
Use contain: layout / paint and content-visibility: auto to limit rendering work.
Avoid @import — it blocks downloads.

4. Rendering

Animate with transform / opacity so they stay on the composite pipeline (no layout / paint).
Avoid layout thrashing (interleaved reads and writes).
Virtualise long lists (react-window, vue-virtual-scroller).
Debounce / throttle high-frequency events (input, scroll, resize).
Use loading="lazy" for images and iframes.
Use will-change sparingly to promote elements to a composite layer.

5. Framework level (React / Vue)

React.memo, useMemo, useCallback to avoid unnecessary re-renders.
In Vue, choose v-show vs v-if per scenario; set key correctly.
Paginate or virtualise long lists.
SSR / SSG (Next.js, Nuxt) to improve first LCP.
Islands architecture / RSC to hydrate only the interactive parts.

6. Mapping to Core Web Vitals

Metric	Target	Key techniques
LCP	≤ 2.5s	Preload LCP image, compress images, SSR, reduce render-blocking
CLS	≤ 0.1	Set `width/height`, reserve space, `font-display: optional`
INP	≤ 200ms	Break up long tasks, ship less JS, use Web Workers
FCP	≤ 1.8s	Inline critical CSS, reduce render-blocking resources
TTFB	≤ 800ms	CDN, edge compute, HTTP/2, faster backend

7. Tooling & monitoring

Lighthouse / PageSpeed Insights
Chrome DevTools — Performance & Coverage panels
WebPageTest
web-vitals library for RUM (real-user monitoring)

Takeaway

Performance is a systems problem — every layer from network → parse → execution → render can be optimised. In practice, measure first with Lighthouse / Web Vitals, find the biggest bottleneck, and optimise that; don't try to do everything at once.