# Web Performance · Tech watch [Canonical source]() Measuring and improving web application loading, rendering and responsiveness. ## [Modern Web Guidance brings current web practices to coding agents]() Modern Web Guidance gives coding agents expert guidance on browser APIs, CSS, performance, and accessibility, steering them toward native solutions instead of legacy patterns. The repository brings together 232 features and 186 use cases as skills installable in multiple agents. Its CLI searches locally for a guide and adds it to the agent’s context. The guidance incorporates Baseline compatibility data, targeted fallbacks, and automated evaluation; the project is marked as a preview release. 2026-11-01 · [Markdown]() · [Original resource]() ## [Next.js: an AI skill analyzes imports to reduce shipped JavaScript]() Next.js 16.4 includes an AI agent skill that analyzes Turbopack’s module and chunk graph to find imports that add to shipped JavaScript. It can, for example, spot when a static import elsewhere in the bundle prevents a component from staying deferred, then suggest changes for review before applying them. The analyzer also compares snapshots and filters code loaded on the initial render. Vercel reports nearly two megabytes of compressed JavaScript saved across v0 and vercel.com; the fixes were checked on preview deployments. The tool requires Turbopack, the default bundler since Next.js 16. 2026-10-30 · [Markdown]() · [Original resource]() ## [Vinext 1.4 cuts server work and speeds up hydration]() Vinext 1.4 reduces work across several rendering stages: App Router layouts run once per request, prefetching dynamic routes no longer renders the entire page, and the chunks needed for hydration can compile in the background in recent Chrome. On the Hacker News benchmark, the author reports 31.1 ms of CPU per request, versus 54.4 ms in 1.3 and 33.7 ms for Next.js. The release also keeps cached HTML and RSC payload generation in sync. Results still depend on the workload: on a content-site prototype, Next.js paints sooner and uses less CPU per request. A TanStack Redact test shows another trade-off: less JavaScript to download, but substantially more expensive hydration on content-heavy pages. 2026-10-30 · [Markdown]() · [Original resource]() ## [TanStack Redact trims React’s browser runtime]() TanStack Redact 0.2.0 replaces React and React DOM in the browser without changing application code. Its stable integrations support TanStack Start, Vite, Vinext, and Next.js; with the latter two, React still handles server rendering while Redact takes over hydration and client rendering. TanStack’s measurements show bundle reductions from 20.4% to 70.5% across its reference apps, but actual savings vary by project. The tradeoff is explicit: Redact renders synchronously, without React’s time slicing or interruptible rendering. A heavy render can therefore delay input, so compatibility and the busiest screens should be checked in each application. 2026-10-29 · [Markdown]() · [Original resource]() ## [Redact: a smaller React runtime with synchronous rendering]() Tanner Linsley’s AI-driven React projection experiment has become a TanStack project used in production. Redact is a smaller, React-compatible runtime that already works with Start, Next.js, Vinext, and Vite. On the server, React still handles SSR and Server Components. The tradeoff is in rendering: Redact renders synchronously, without React’s time slicing. As the blog post acknowledges, a heavy render can still delay input. The smaller runtime therefore comes with a constraint worth considering for interfaces that need to remain responsive under load. 2026-10-29 · [Markdown]() · [Original resource]() ## [The Website Specification: practical technical criteria for websites]() This specification brings together 178 topics covering a website’s technical responsibilities, including HTML, accessibility, security, performance, SEO, privacy and resilience. Each topic explains why it matters and how to implement it, with items marked as required, recommended, optional or to avoid. A yes/no checklist turns those criteria into an audit that teams can revisit after fixes. Grounded in primary sources and platform-agnostic, the specification is also available to agents through a read-only MCP server, with no authentication required for its reference tools. 2026-10-29 · [Markdown]() · [Original resource]() ## [Fallback Font Generator: reduce font-related CLS]() This tool adjusts a system font to more closely match a brand font while it loads. It generates the required `@font-face` rules—including `size-adjust`, `ascent-override`, `descent-override`, and `line-gap-override`—using a visual preview and adjustable controls. The approach targets layout shifts caused by differences in font metrics. The resulting CSS can be copied into a project, though the page notes that the tool is not supported in Safari. 2026-10-27 · [Markdown]() · [Original resource]() ## [Next.js 16.4: faster navigation without prefetching everything]() To reduce loading skeletons in v0, the team combines Next.js Partial Prefetching with cache rules suited to public and personalized data. Playwright `instant()` tests check that priority content is ready at click time, and remain in the codebase as CI regression checks. Prefetching also responds to user intent: in large grids, details load on hover, focus, or touch rather than for every visible card. That adjustment followed a 2.9× increase in prefetch requests. The overall comparison reports lower daily costs, while cautioning that the change cannot be attributed to this refactor alone. 2026-10-23 · [Markdown]() · [Original resource]() ## [A front-end checklist with more than 350 quality rules]() Front-End Checklist organizes more than 350 rules into review workflows for accessibility, CSS, performance, security, privacy, and SEO. It offers guided launch and audit checklists, and exposes the same standards to agents through MCP for more structured code reviews. 2026-09-18 · [Markdown]() · [Original resource]() ## [Learn JavaScript and web performance patterns with Patterns.dev]() Patterns.dev documents JavaScript design patterns and performance techniques for web apps. Its examples connect architectural choices to their impact on loading and rendering. 2026-05-10 · [Markdown]() · [Original resource]() ## [Vercel’s React best practices organized for agents]() Vercel organizes guidance around major sources of slowness: waterfalls, bundles and unnecessary renders. Prioritization helps agents address costly problems before micro-optimizations. 2026-01-25 · [Markdown]() · [Original resource]() ## [React Intersection Observer: track elements entering the viewport]() The library exposes Intersection Observer through React hooks and components. It reuses compatible observers and provides mocks for testing lazy loading and scroll animations. 2025-11-06 · [Markdown]() · [Original resource]() ## [IPX: resize and convert images through URLs]() IPX combines sharp and svgo to transform local images or images from allowed domains. Size, format and quality can be specified directly in the resource URL. 2025-09-07 · [Markdown]() · [Original resource]() ## [ForesightJS: anticipate navigation to trigger prefetching]() ForesightJS observes cursor movement, keyboard navigation and scrolling to estimate the next target. It can start loading before a click or touch interaction. 2025-08-17 · [Markdown]() · [Original resource]() ## [Paraglide JS: compile translations into typed functions]() Paraglide generates typed message functions and tree-shakable translations. Integrations across frameworks support a shared internationalization approach on client and server. 2025-03-23 · [Markdown]() · [Original resource]() ## [Subfont: generate font subsets tailored to page content]() Subfont analyzes the characters actually used on a page and generates smaller font files. It also adds preload hints to shorten the critical path for text rendering. 2025-02-25 · [Markdown]() · [Original resource]() ## [Transform Directus images with the Unpic provider]() This guide shows how to generate Directus image URLs or use the provider in an Unpic component. CMS-specific options can be passed through without changing the component API. 2025-01-23 · [Markdown]() · [Original resource]() ## [React Scan: visually locate costly renders]() React Scan highlights components worth inspecting for performance problems. Script and package integrations support an initial diagnosis without rewriting application components. 2024-11-24 · [Markdown]() · [Original resource]() ## [ThumbHash: compact image placeholders with transparency]() ThumbHash stores a compact image placeholder alongside application data. It encodes aspect ratio and transparency to improve the display before the full image loads. 2024-09-14 · [Markdown]() · [Original resource]() ## [BlurHash: show placeholders while images load]() BlurHash turns an image into a short string representing a blurred placeholder. Clients can render it immediately to avoid empty boxes during image loading. 2024-09-14 · [Markdown]() · [Original resource]() Page 1 / 2 [Next]()