Page 14 - Web Performance

Route splitting is the standard entry point, but the noticeable improvement often sits one level deeper. Component level splits, deliberate vendor chunking and preload hints together decide whether code splitting merely looks good in the bundle report or actually shortens load time for users.

The Long Animation Frames API delivers a far more granular breakdown of blocking frames than the older Long Tasks API, showing exactly how much of each long frame comes from script execution versus rendering. That makes it a central tool for precisely diagnosing INP regressions.

INP breaks down into three measurable phases that most performance guides only cover on the surface. This deep dive examines input delay, processing time, and presentation delay individually, explains the role of third party scripts and Alpine.js reactivity in Hyva stores, and walks through the Chrome DevTools Performance panel to show exactly how long tasks get found and fixed.

A single, fixed AVIF quality level applied to your whole audience is always a compromise between two extremes that rarely get served well at the same time. Visitors on a fast fiber connection receive images that are more compressed than necessary, while visitors on mobile networks with data saver enabled still pay for quality they explicitly asked to avoid. Client Hints, the Save-Data header, and a connection to an image CDN let you resolve the quality level per request instead of baking one number into the build once and for all.

The edge runtime promises minimal cold start times and global distribution, but gives up central Node APIs in exchange. The Node runtime offers full compatibility, but costs latency for globally distributed users. Deciding deliberately per route gets the best out of both models.

The View Transitions API delivers native, GPU-accelerated transition animations between two page states, entirely without a JavaScript animation loop. Compared to classic transition libraries, main-thread load drops noticeably, and since cross-document view transitions arrived, the same principle now works for classic multi-page navigation too.

Lighthouse CI has established itself as a practical tool for checking performance metrics directly in a pull request, but it works with simulated network conditions on a single machine, usually running locally inside the CI environment. The WebPageTest API takes a different route: it runs real load time tests from real locations, over real network connections with realistic throttling, and additionally delivers a filmstrip view that shows the visual loading sequence frame by frame. This article explains the difference to Lighthouse CI, shows how to define performance budgets as an automated CI gate, and describes how results get compared between deployments to catch regressions early.

Since PHP 8.0, the JIT compiler translates hot opcode paths into native machine code at runtime, but the effect depends entirely on the workload: numerical computation, image processing, and parsing large volumes of data show measurable runtime gains, while classic, database-heavy web applications barely benefit because wait time on syscalls dominates there. This article explains the architecture of Function JIT and Tracing JIT, the relevant opcache.jit configuration values, and a solid benchmark methodology to measure the actual effect in your own project instead of guessing.

Date.now() delivers milliseconds with a precision that is not sufficient for serious performance measurement, and falls into the trap of system clock synchronization. The JavaScript Performance API provides sub-millisecond timestamps, structured marks and measures, a non-blocking observer mechanism, and direct access to Web Vitals without an external library.

The parallel extension brings real multithreading to PHP: Runtime, Future and Channel create isolated operating system threads instead of cooperative concurrency. Anyone who understands the strict data isolation between threads and knows the limits of closures and autoloading can noticeably speed up CPU intensive tasks without switching to external extensions like Swoole.