Why does Svelte ship less JavaScript than React?

Svelte is a compiler: it converts your components into small, imperative DOM-updating code at build time instead of shipping a virtual-DOM runtime that diffs trees in the browser. Because most of the framework's work happens during compilation, less framework code needs to travel to the user. Svelte 5's runes make its reactivity explicit and signals-based, which keeps updates surgical while still producing lean output.

What replaced First Input Delay in Core Web Vitals?

Interaction to Next Paint (INP) replaced First Input Delay (FID) as a Core Web Vitals metric in March 2024. FID only measured the delay before the browser began processing the first interaction, while INP measures the full latency from interaction to the next visual update across an entire session. A good INP is under 200 milliseconds at the 75th percentile of real-user data.

Do I need a JavaScript library to animate page transitions?

Not anymore. The native View Transitions API lets the browser animate between DOM states or entire pages using CSS, including shared-element transitions via the view-transition-name property. It shipped for same-document transitions in Chromium in 2023 with cross-document support following, and it runs on the compositor, so it is smoother and lighter than JavaScript animation libraries. Frameworks like Astro, SvelteKit, and Next.js provide thin helpers over it.

What is the difference between hydration and resumability?

Hydration downloads a page's component code and re-executes it in the browser to reattach event listeners and rebuild state, so the cost grows with app size. Resumability, used by Qwik, instead serializes state and handler locations into the HTML and lazily fetches handler code only when a user interacts, so the browser resumes rather than replays the server's work. The practical effect is that resumability keeps time-to-interactive nearly flat even as a page grows more complex.

How to Get Started With Astro Content Collections in 2026

This is a practical, up-to-date guide to Started — what it is, why it matters in 2026, and how to apply it in real projects. It is written for developers and founders who want clear answers and proven best practices, not filler.

Whether you're just starting out or leveling up, treat this as a working reference you can return to. Every section is built to be skimmed, applied, and shared.

Core Web Vitals as the performance benchmark

Core Web Vitals are Google's user-centric performance metrics and the practical yardstick most teams optimize against. Largest Contentful Paint (LCP) measures loading, with a good score under 2.5 seconds; Cumulative Layout Shift (CLS) measures visual stability, with a good score under 0.1; and Interaction to Next Paint (INP) measures responsiveness, with a good score under 200 milliseconds, all assessed at the 75th percentile of real-user data. INP replaced First Input Delay in March 2024 because it captures the latency of every interaction across a session, not just the first. These metrics influence search ranking and, more importantly, correlate with engagement and conversion. Because they are measured on real devices in the field, they push architectural decisions — less JavaScript, faster hydration, stable layouts — rather than rewarding synthetic lab scores alone.

Svelte and SvelteKit: the compiler-first approach

Svelte takes a different bet than most frameworks by doing its work at build time. Its compiler turns declarative components into small, imperative JavaScript that surgically updates the DOM, so there is no virtual DOM diffing and little framework runtime shipped to the browser. Svelte 5 introduced runes, an explicit signals-based reactivity system using primitives like dollar-state and dollar-derived, replacing the older implicit reactive-assignment model. SvelteKit is the official application framework built on top, providing file-based routing, server-side rendering, form actions, and deployment adapters for platforms from Node to Cloudflare. Together they consistently top developer-satisfaction surveys because the authoring experience is concise and the output is lean.

How React Server Components change the mental model

React Server Components (RSC) split a component tree into pieces that render only on the server and pieces that run in the browser. Server Components can fetch data directly, import heavy libraries, and read from a database without any of that code being sent to the client, while Client Components marked with the 'use client' directive carry interactivity. This lets you colocate data-fetching with the UI that needs it and stream the rendered output to the browser as it becomes ready. Next.js popularized RSC through its App Router, and the pattern is now a first-class part of React itself rather than a framework add-on. The trade-off is a steeper mental model: developers must reason carefully about the server/client boundary, serialization of props across it, and which code is allowed to run where.

Islands architecture explained

Islands architecture, a term popularized by Katie Sylor-Miller and Jason Miller, describes rendering a page as mostly static HTML with isolated interactive regions — the islands — hydrated independently. Instead of hydrating one monolithic application, each island carries only the code it needs and can hydrate on its own schedule, for example when it scrolls into view or when the browser is idle. This dramatically reduces the JavaScript that must be parsed and executed before a page becomes usable, especially on content-heavy sites where interactivity is sparse. Astro is the best-known implementation, but the concept has influenced partial-hydration features across the ecosystem. The main constraint is that islands are isolated by design, so sharing state across them takes deliberate coordination rather than a shared component tree.

The View Transitions API lets the browser animate between two DOM states — or between two whole pages — with a compact declarative and JavaScript interface, rather than orchestrating animations by hand. It works by capturing a snapshot of the old state, applying the new state, and cross-fading or morphing between them using CSS, with shared-element transitions driven by the view-transition-name property. Same-document transitions shipped first in Chromium in 2023, and cross-document transitions for multi-page apps followed, bringing app-like navigation to server-rendered sites without a client-side router. Astro, SvelteKit, and Next.js all expose helpers that build on the native API. Because the animation runs on the compositor, it is smoother and far lighter than equivalent JavaScript animation libraries.

Astro and the content-first island model

Astro is built for content-driven sites — blogs, marketing pages, documentation, and commerce fronts — where most of the page is static and interactivity is localized. By default Astro renders components to HTML and ships zero JavaScript, and you opt individual components into hydration with client directives such as client:load, client:idle, and client:visible. A distinctive strength is that Astro is framework-agnostic: you can drop React, Svelte, Vue, Solid, or Preact components onto the same page and each island hydrates independently. Astro also supports server-side rendering and on-demand endpoints when you need dynamic behavior, and its Content Collections give type-safe handling of Markdown and MDX. This makes it the default recommendation when Lighthouse scores and shipped-script size matter most.

Started: Key Facts and Data

According to recent industry research and the official documentation linked below:

Astro's islands architecture ships zero JavaScript by default and only hydrates interactive components, which is why content sites migrating to it commonly report large reductions in shipped script.
Core Web Vitals thresholds are concrete: Largest Contentful Paint should be under 2.5 seconds, Interaction to Next Paint under 200 milliseconds, and Cumulative Layout Shift under 0.1, measured at the 75th percentile.
The View Transitions API shipped in Chromium browsers in 2023 for same-document transitions, with cross-document support and broader engine adoption following, making animated route changes possible without heavy JavaScript libraries.

Quick-Reference Summary

A map of what this guide covers:

Topic	What you'll learn
Core Web Vitals as the performance benchmark	Core Web Vitals are Google's user-centric performance metrics and the practical yardstick most teams optimize against.
Svelte and SvelteKit: the compiler-first approach	Svelte takes a different bet than most frameworks by doing its work at build time.
How React Server Components change the mental model	React Server Components (RSC) split a component tree into pieces that render only on the server and pieces that run in the browser.
Islands architecture explained	Islands architecture, a term popularized by Katie Sylor-Miller and Jason Miller, describes rendering a page as mostly
View transitions for native animated navigation	The View Transitions API lets the browser animate between two DOM states — or between two whole pages — with a compact declarative and JavaScript interface
Astro and the content-first island model	Astro is built for content-driven sites — blogs

How to Get Started with Started

A simple path that works:

Learn the fundamentals of Started from primary sources, not just tutorials.
Build one small, real project end to end.
Get feedback, refactor, and add tests.
Ship it publicly and document what you learned.
Repeat with a slightly harder project each time.

Build It with a World-Class Full Stack Developer

Sandeep Kumar Chaudhary is a full stack world-class developer. If you want to turn this into a real, production-ready product, get in touch — message directly on WhatsApp at +9779802348957 for a fast, no-pressure consult.

You can also explore the projects already shipped to thousands of users, or start a conversation here.

Final Thoughts

Use the native View Transitions API before adding an animation library — it is smaller, GPU-accelerated, and framework-agnostic. The developers and teams who win in 2026 pair strong fundamentals with consistent shipping. Start small, stay curious, build in public, and revisit this guide as your skills grow.