> Markdown version of [/videos/605-qwik-making-sure-that-easy-is-same-as-performant?t=0](https://www.wearedevelopers.com/videos/605-qwik-making-sure-that-easy-is-same-as-performant?t=0). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Qwik: Making sure that easy is same as performant

Tired of client-side hydration ruining web performance? Qwik flips the rendering model upside down with resumability so you can ship zero-latency applications without sacrificing developer experience.

- **Speakers:** Miško Hevery
- **Event:** World Congress 2023
- **Published:** August 11, 2023
- **Duration:** 30:59
- **URL:** https://www.wearedevelopers.com/videos/605-qwik-making-sure-that-easy-is-same-as-performant

## Summary

Even as web capabilities expand, modern frontend architectures struggle to meet Google's core web vitals standards due to massive JavaScript payloads. The primary bottleneck is client-side hydration—the process where browsers must download, execute, and reconcile entire component trees simply to attach event listeners. This creates a frustrating "uncanny valley" where the UI appears completely loaded but fails to respond to user inputs. While architectural shifts like partial hydration or server components attempt to mitigate this, they still mandate shipping duplicate logic and application state to the client.\n\nTo eliminate developmental trade-offs between clean code and fast applications, Qwik fundamentally flips the rendering model upside down through a paradigm called "resumability." Instead of bootstrapping from the root component downward, Qwik serializes application state and event listener references directly into the initial HTML. Empowered by a tiny one-kilobyte global script, the framework achieves an O(1) startup time regardless of application complexity. By natively utilizing JavaScript signals and automatic code extraction, Qwik isolates specific interactions—such as logging a console message or updating a cart—and defers their execution entirely until the associated event fires.\n\nTo prevent latency when users finally interact with lazy-loaded features, intelligent service workers silently prefetch interaction logic in the background, relying on statistical analysis to bundle frequently used symbols together. The developer writes unified, full-stack code without manual pre-optimization, while the compiler handles creating optimized execution paths. Seamless backend transitions are handled by wrapping functions in a server wrapper to trigger immediate server-side execution, while built-in image tooling simultaneously prevents cumulative layout shifts. Ultimately, Qwik ensures that "the easy path of building the application is the same thing as a performance path," allowing developers to write scaleable features without compromising end-user experience.

**Keywords:** qwik framework, frontend web performance, client-side hydration, javascript resumability, google core web vitals, cumulative layout shift, service worker prefetching, partial hydration islands, javascript signals, component code extraction, lazy code execution, react server components, vite bundling operations, ui uncanny valley, server-side data loaders

## Chapters

1. **Event welcome and introduction to the Builder ecosystem** (00:00) — Framework-agnostic open source tools enable developers to deploy third-party scripts and design components across platforms.
1. **Addressing failing core web vitals and heavy bundles** (07:11) — Increasing interactivity requires shipping more code to the frontend without overwhelming the initial browser startup phase.
1. **Challenges with hydration and the uncanny valley of interactions** (09:53) — Re-executing massive component trees forces users to wait idly while missing early click interactions.
1. **Using resumability to eliminate duplicate state and reconciliation overhead** (13:00) — Encoding event listeners directly into HTML bypasses heavy client-side rendering for constant baseline performance.
1. **Automating performance optimizations through signals and code extraction** (15:27) — Advanced compilers use signals and extraction patterns to invert execution logic and guarantee small initial payloads.
1. **Demonstrating lazy loading and code extraction in framework components** (18:21) — Delaying network requests until explicit user interaction prevents unnecessary function execution during the initial page load.
1. **Prefetching code and automating application bundling using service workers** (19:53) — Background caching of necessary application chunks ensures rapid script execution even on dropped network connections.
1. **Teleporting closures between the client and server execution environments** (22:36) — Wrapping stateful closures dynamically delegates logic to server endpoints while automatically recovering required application variables.
1. **Optimizing state payloads with selective serialization and server loaders** (23:59) — Efficiently transferring logic requires precise configuration rules to strip unused data scopes out of serialized payloads.
1. **Preventing cumulative layout shifts natively with optimized image components** (25:51) — Specialized asset components automatically inject structural dimensions and varied source sets to stabilize visual load behaviors.
1. **Handling server secrets and fallback strategies for service workers** (27:24) — Differentiating public variables from private environment values prevents accidental leakage of backend keys to client browsers.

## Related Moments

- [Introducing the Qwik open source web framework](https://www.wearedevelopers.com/videos/215-rethinking-web-application-design-for-fastest-possible-time-to-interactive) (from "Rethinking web application design for fastest possible time to interactive")
- [Demonstration of Qwik deferred code execution capabilities](https://www.wearedevelopers.com/videos/215-rethinking-web-application-design-for-fastest-possible-time-to-interactive) (from "Rethinking web application design for fastest possible time to interactive")
- [Modernizing legacy client-rendered components with server-side frameworks](https://www.wearedevelopers.com/videos/1587-web-fragments-incremental-micro-frontends-migration-approach-for-enterprise) (from "Web-Fragments: incremental micro-frontends migration approach for enterprise")
- [Audience Q&A on framework limitations and specific uses](https://www.wearedevelopers.com/videos/456-writing-truly-cross-plattform-applications-using-flutter) (from "Writing truly cross plattform applications using flutter")
- [Optimizing browser performance using modern island architecture](https://www.wearedevelopers.com/videos/872-multiple-ships-to-the-island-micro-frontends-island-architectures) (from "Multiple Ships to the Island - Micro Frontends & Island Architectures")
- [Balancing interactivity and load times with pre-rendering](https://www.wearedevelopers.com/videos/937-sleek-swift-and-sustainable-optimizations-every-web-developer-should-consider) (from "Sleek, Swift, and Sustainable: Optimizations every web developer should consider")

## Related Articles

- [The Best JavaScript Framework to Learn](https://www.wearedevelopers.com/magazine/229-the-best-javascript-framework-to-learn)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)

## Related Jobs

- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Agile Full Stack Engineer](https://www.wearedevelopers.com/jobs/48325-agile-full-stack-engineer) at **synava GmbH**
- [Working Student Frontend Development](https://www.wearedevelopers.com/jobs/ext/1185791-working-student-frontend-development) at **ZEISS Group**
- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**