39 blog posts · React, performance, and systems engineering
What each JSON.parse() SyntaxError actually means, how to find the real cause fast, and when parsing large JSON becomes a main thread performance problem.
React's 45KB comes from synthetic events and compatibility layers Preact drops. At 3KB, it calls native DOM directly. Here is what that trade-off means.
The best network request never happens. Service workers intercept and serve from cache. Here are the three Workbox caching strategies and when to use each.
Three resource hints, three different jobs. Using the wrong one wastes bandwidth and slows the current page. How each one works and when to apply it.
The browser cannot paint until it builds the CSSOM. CSS in an external file means a round trip before the first pixel. Inlining critical CSS removes that.
Domain sharding, CSS sprites, and JS concatenation were correct for HTTP/1.1. HTTP/2 turned them into anti-patterns. Here is what changed and why.
React.lazy() makes a 5MB app's first load equal to just the landing route cost. Here is how route code splitting works and where it silently fails.
Perceived and measured performance diverge more than most developers expect. LinkedIn's skeleton screen research explains why, and when skeletons hurt.
The correct image for any device depends on viewport width, pixel density, and connection speed. srcset and sizes make that computable at the HTML level.
Google's profiling found 30-50% of bandwidth goes to below-fold images. loading="lazy" defers them, but two cases where it actively hurts LCP.
All blogs in the React & JS Performance series in reading order, plus quick reference on layout thrashing, will-change, passive listeners, and INP.
How to answer practical frontend performance interviews in React: a seven-area framework—rendering, network, mobile, bundles, assets, memory, and measurement.
Why a perfect Lighthouse score doesn't prevent out-of-memory tab crashes in long-running SPAs — and how to build apps that survive 8-hour sessions.
Your 2MB bundle isn't fate. How bundlers merge modules, why tree shaking fails silently, and how to split code so users only load what they need.
How image formats, font loading, and third-party tag managers silently destroy LCP and CLS scores, and the exact fixes for each that actually work.
How V8's generational garbage collector works, why high allocation rate causes jank, and practical strategies to reduce GC pressure in frontend code.
How WebSocket subscriptions, stale closures, and unbounded caches create memory leaks in React apps — and how to find and fix them with Chrome DevTools.
Budget Android devices run your JS 5-10x slower than your MacBook. Content-visibility, CSS containment, touch scroll, and real debugging on low-end hardware.
Why React SPAs refetch data you already have, and how to fix it: HTTP cache headers, stale-while-revalidate, request deduplication, and prefetch strategies.
Origin Private File System gives browsers a real sandboxed filesystem. How it compares to IndexedDB, Cache API, and why it's the right tool for 200MB+ assets.
CPU-heavy tasks block the UI — Web Workers fix that. Integrate Workers in React with Comlink, custom hooks, and Vite, with before/after profiling results.
10,000 DOM nodes is slow even if they're not visible. When to paginate, when to infinite scroll, when to virtualize — and the real cost of each approach.
How startTransition and useDeferredValue fix frozen inputs and laggy UIs by separating urgent updates from deferred ones — with real before/after examples.
Most React memoization is premature. This breaks down when memo, useMemo, and useCallback actually help and when they add memory overhead with no real gain.
Render phase vs commit phase, reconciliation and fibers, what triggers re-renders, referential equality traps, context pitfalls, and React 18 batching.
How Aadhaar's ABIS deduplicates biometrics at billion scale: fingerprint templates, iris codes, sharded search, multi-engine consensus, and score fusion.
What >50ms Long Tasks are, why they destroy INP, and how to chunk work with scheduler.yield(), postTask(), and Web Workers to keep the UI responsive.
How Lottie works: JSON After Effects timelines rendered by cross-platform runtimes. Why Airbnb chose vector JSON over GIF and video for UI animations.
LCP, CLS, INP, and TTFB explained at the technical level. What lab scores miss about real users, how CrUX data differs, and what to fix when metrics look green.
Why Picture-in-Picture can bypass DRM black-screen protection in browsers: compositor paths, Widevine L3 vs L1 decode routing, and why 4K stays stubborn.
How Meta StyleX compiles JS-authored styles into atomic static CSS. No runtime injection, smaller bundles, and why the build-time approach matters at scale.
Rapido's fixed 4-digit Rapid PIN vs dynamic OTP: UX, SMS cost, and why physical pickup context matters more than brute-force odds.
At 60Hz the browser has ~16.6ms per frame for JS, layout, and paint. Why load scores miss jank and what it means for trading and live data UIs.
Live traffic in Google Maps: how probe data, graph routing, Waze-style reports, and historical speed curves combine to show jams and update ETAs at huge scale.
Redux, Zustand, Jotai, and Valtio compared from the inside. Centralized, atomic, and proxy-based React state patterns and when each one wins on scale.
React error boundaries use class lifecycles, not hooks: what render errors they catch, what async and event errors they skip, and how to structure fallbacks.
Parse → DOM → CSSOM → Layout → Paint → Composite. What the main thread does each frame, what jank physically is, and how to stop causing it.
Why streaming apps go black on screen capture: EME, CDMs, Widevine L1 vs L3, and the secure compositor paths that keep decrypted frames off the capture surface.
Browsers share one CSS model; Figma uses WASM and GPU shaders. Where design-to-code breaks: radius, strokes, blur, gap, and what to verify before you build.