Web Performance

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.

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.

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.

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.

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.

Patterns.dev documents JavaScript design patterns and performance techniques for web apps. Its examples connect architectural choices to their impact on loading and rendering.

Vercel organizes guidance around major sources of slowness: waterfalls, bundles and unnecessary renders. Prioritization helps agents address costly problems before micro-optimizations.

The library exposes Intersection Observer through React hooks and components. It reuses compatible observers and provides mocks for testing lazy loading and scroll animations.

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.

ForesightJS observes cursor movement, keyboard navigation and scrolling to estimate the next target. It can start loading before a click or touch interaction.

Paraglide generates typed message functions and tree-shakable translations. Integrations across frameworks support a shared internationalization approach on client and server.

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.

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.

React Scan highlights components worth inspecting for performance problems. Script and package integrations support an initial diagnosis without rewriting application components.

ThumbHash stores a compact image placeholder alongside application data. It encodes aspect ratio and transparency to improve the display before the full image loads.

BlurHash turns an image into a short string representing a blurred placeholder. Clients can render it immediately to avoid empty boxes during image loading.