Page 9 - Web Performance

A React app that shows a blank screen the moment the network drops is not a Progressive Web App, it is a website with an icon. Genuine offline-first operation requires deliberate caching strategies, background sync and a service worker that knows exactly what it may cache and what it must not.

Brotli has established itself over the past few years as the preferred compression method for HTTP responses, replacing Gzip in most production setups because it produces noticeably smaller files for text content like HTML, CSS, and JavaScript. Zstandard, or Zstd, is now pushing into the web space as a second modern contender, originally built for file systems and network protocols where it stands out mainly for its speed. This article compares both methods soberly on compression ratio and speed, maps out the current browser support situation for Zstd as a content encoding, and shows how both methods can run side by side on the server.

Nitro, the server engine behind Nuxt 3, ships with unstorage, a unified key-value interface that can be backed by Redis, the local filesystem, Cloudflare KV, or plain in-memory storage, without the application code ever needing to know which one is actually in use. Anyone who wants to cache server-side API responses can skip pulling in a separate caching library entirely and simply swap the storage driver per environment through configuration.

Cumulative Layout Shift is one of the three Core Web Vitals and measures how much visible elements on a page unexpectedly change position while a visitor is already interacting with or reading the page. A high CLS score leads to mis-clicks, lost reading position, and a general impression of instability, even when every other performance metric looks good. The four most common causes, images without dimensions, late-loading ad banners, web font swap, and content dynamically inserted above existing content, can be tracked down systematically with the Layout Instability API and the browser DevTools, instead of stumbling onto them by accident during testing.

Anyone who hunts performance problems in PHP applications only through gut feeling and spot-checks in production wastes time on the wrong places. Blackfire and XHProf deliver reliable callgraphs, separate exclusive and inclusive times, as well as standalone wall time, CPU time, and I/O wait metrics, letting you clearly distinguish real bottlenecks from harmless symptoms, whether in a monolith, a microservice, or a CLI script.

Scattering preload, prefetch, and preconnect across the head without a plan wastes exactly the bandwidth and priority class the truly critical resource needs. This article explains how the browser's preload scanner works, when each resource hint actually helps, and how to reliably detect, measure, and avoid overuse with Chrome DevTools.

Blindly wrapping every object in Vue 3 with reactive costs a measurable Proxy overhead once datasets grow large. This Vue reactivity performance guide shows how shallowRef, shallowReactive, markRaw and toRaw relieve the reactivity system deliberately, without losing functionality.

JavaScript is single-threaded by nature, but with SharedArrayBuffer and Atomics there is true shared memory between threads. This solves scenarios that could not be handled efficiently with postMessage: fast image processing, parsers, WASM integration and lock-free data structures.

Without fixed thresholds, performance decay creeps in unnoticed over months, one new script here, one extra image there. A performance budget turns load time, Core Web Vitals, and bundle size into hard criteria every merge request must satisfy before it reaches production.

A service worker runs as its own thread between the browser and the network, able to intercept requests, answer them from a local cache, and update that cache in the background. Used correctly, this delivers instant load times on repeat visits, working fallback pages without a network connection, and noticeably less server load, all without users noticing the difference from a native app.