--- title: How we made a 9 MB WebAssembly module feel faster... description: An engineer at Recraft Studio describes cutting first-render time on their canvas editor by 15-19% at p50/p75/p90 without reducing the 16.71 MB payload. The... canonical: https://daily.dev/posts/how-we-made-a-9-mb-webassembly-module-feel-faster-without-removing-a-single-byte-d5jyrfe1s twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How we made a 9 MB WebAssembly module feel faster without removing a single byte | daily.dev og:description: An engineer at Recraft Studio describes cutting first-render time on their canvas editor by 15-19% at p50/p75/p90 without reducing the 16.71 MB payload. The... og:url: https://daily.dev/posts/how-we-made-a-9-mb-webassembly-module-feel-faster-without-removing-a-single-byte-d5jyrfe1s og:image: https://api.daily.dev/og/posts/d5JYRFE1s.png og:image:alt: How we made a 9 MB WebAssembly module feel faster without removing a single byte og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How we made a 9 MB WebAssembly module feel faster without removing a single byte **[DEV](https://daily.dev/sources/devto)** · 13 min read · 10 upvotes · 1 comments ## Summary An engineer at Recraft Studio describes cutting first-render time on their canvas editor by 15-19% at p50/p75/p90 without reducing the 16.71 MB payload. The fix targeted request order: the 9.2 MB Skia-based WASM rendering engine was requested last, buried behind React Suspense waterfalls, auth, websocket connection, and style fetches. By adding preload links in the document head and hoisting Skia/font initialization to module scope, the WASM download started roughly 1.5 seconds earlier, in parallel with the initial document. A/B tested with ~18k users per arm, the change traded a small loading-state-shown regression (~120ms at p75) for large canvas-rendered gains, later recovered via code splitting and hover-based prefetching that cut loading-state-shown by up to 85%. The author also clarifies the preload vs prefetch distinction for the editor page versus the project listing page. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How can I make a large WebAssembly module download earlier without reducing its file size? Add a preload link tag for the WASM file in the document head instead of relying on a lazy-loaded JS import, and hoist the initialization call to module scope so it fires immediately rather than waiting behind React Suspense boundaries. This let a 9.2 MB WASM module start downloading roughly 1.5 seconds earlier, alongside the HTML document, cutting time-to-render by 15-19% across p50/p75/p90 with zero bytes removed. _Teams chasing this kind of load-order fix swap real-world performance writeups on daily.dev._ ### What is the difference between rel=preload and rel=prefetch for loading resources on different pages? Preload tells the browser a resource is needed immediately on the current page, while prefetch tells it the resource will be needed on the next page and can be fetched at lower priority after critical resources. Using preload on a listing page that doesn't need the resource yet caused a resource race with other critical requests; switching to prefetch on that page and keeping preload only on the page that actually used the resource fixed it. _Developers tuning loading priorities often compare these browser hint tradeoffs on daily.dev._ ### Does compiling a 9 MB WebAssembly module block the main thread during download? No, WebAssembly streaming compilation runs in parallel with the download on a background thread, so a 9.2 MB module is not a CPU bottleneck. Instantiating from cache afterward takes about 5-10 milliseconds, and the main thread stays mostly idle during that time, meaning the real bottleneck was network request timing, not compilation cost. _Engineers debugging WASM load performance trade notes on streaming compilation via daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@diyweb** · 0 upvotes > Great write-up. Preload links for the WASM file are such a simple fix compared with trying to shrink the module. Nice that you A/B tested it properly and shared the small regression too. ## Similar posts on daily.dev - [I Reduced Our React Bundle by 70% Without Removing a Single Feature](https://daily.dev/posts/i-reduced-our-react-bundle-by-70-without-removing-a-single-feature-szhhzvcpd) · Medium · 18 upvotes · 3 comments - [The 7 Walls JavaScript Hits — and How WebAssembly Gets Past Them](https://daily.dev/posts/the-7-walls-javascript-hits-and-how-webassembly-gets-past-them-isxmm7isd) · DEV · 2 upvotes · 0 comments - [Web Performance 2025: The Shift from Optimization to Prediction](https://daily.dev/posts/web-performance-2025-the-shift-from-optimization-to-prediction-emdlyovyv) · Web Performance Calendar · 0 upvotes · 0 comments - [Bypassing the DOM: How We Built a 60 FPS GPU Playground in React](https://daily.dev/posts/bypassing-the-dom-how-we-built-a-60-fps-gpu-playground-in-react-bjjoodryo) · Medium · 1 upvotes · 0 comments - [WebAssembly vs. JavaScript: Testing Side-by-Side Performance](https://daily.dev/posts/webassembly-vs-javascript-testing-side-by-side-performance-uai1ulk0u) · The New Stack · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#react](https://daily.dev/tags/react), [#frontend](https://daily.dev/tags/frontend), [#nextjs](https://daily.dev/tags/nextjs), [#webassembly](https://daily.dev/tags/webassembly) [View this post on daily.dev](https://daily.dev/posts/how-we-made-a-9-mb-webassembly-module-feel-faster-without-removing-a-single-byte-d5jyrfe1s) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How we made a 9 MB WebAssembly module feel faster without removing a single byte","url":"https://daily.dev/posts/how-we-made-a-9-mb-webassembly-module-feel-faster-without-removing-a-single-byte-d5jyrfe1s","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-we-made-a-9-mb-webassembly-module-feel-faster-without-removing-a-single-byte-d5jyrfe1s"},"datePublished":"2026-10-08T16:05:24.160Z","dateModified":"2026-10-08T16:41:59.223Z","description":"An engineer at Recraft Studio describes cutting first-render time on their canvas editor by 15-19% at p50/p75/p90 without reducing the 16.71 MB payload. The...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ce33cba714deeee532e9848ff5bed957?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ce33cba714deeee532e9848ff5bed957?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"DEV","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"DEV","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/devto","url":"https://daily.dev/sources/devto"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/how-we-made-a-9-mb-webassembly-module-feel-faster-without-removing-a-single-byte-d5jyrfe1s","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":10},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"webdev,react,frontend,nextjs,webassembly","timeRequired":"PT13M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"DEV","item":"https://daily.dev/sources/devto"},{"@type":"ListItem","position":3,"name":"How we made a 9 MB WebAssembly module feel faster without removing a single byte"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/how-we-made-a-9-mb-webassembly-module-feel-faster-without-removing-a-single-byte-d5jyrfe1s","comment":[{"@type":"Comment","text":"Great write-up. Preload links for the WASM file are such a simple fix compared with trying to shrink the module. Nice that you A/B tested it properly and shared the small regression too.","datePublished":"2026-10-10T16:24:14.067Z","url":"https://daily.dev/posts/d5JYRFE1s#c-V7veHFY2G","author":{"@type":"Person","name":"DiyWeb","url":"https://daily.dev/diyweb","image":"https://media.daily.dev/image/upload/s--dgS6jDeN--/f_auto/v1790879420/avatars/avatar_774zDwMaRTNS1fv5OKStX?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-we-made-a-9-mb-webassembly-module-feel-faster-without-removing-a-single-byte-d5jyrfe1s#faq","mainEntity":[{"@type":"Question","name":"How can I make a large WebAssembly module download earlier without reducing its file size?","acceptedAnswer":{"@type":"Answer","text":"Add a preload link tag for the WASM file in the document head instead of relying on a lazy-loaded JS import, and hoist the initialization call to module scope so it fires immediately rather than waiting behind React Suspense boundaries. This let a 9.2 MB WASM module start downloading roughly 1.5 seconds earlier, alongside the HTML document, cutting time-to-render by 15-19% across p50/p75/p90 with zero bytes removed. Teams chasing this kind of load-order fix swap real-world performance writeups on daily.dev."}},{"@type":"Question","name":"What is the difference between rel=preload and rel=prefetch for loading resources on different pages?","acceptedAnswer":{"@type":"Answer","text":"Preload tells the browser a resource is needed immediately on the current page, while prefetch tells it the resource will be needed on the next page and can be fetched at lower priority after critical resources. Using preload on a listing page that doesn't need the resource yet caused a resource race with other critical requests; switching to prefetch on that page and keeping preload only on the page that actually used the resource fixed it. Developers tuning loading priorities often compare these browser hint tradeoffs on daily.dev."}},{"@type":"Question","name":"Does compiling a 9 MB WebAssembly module block the main thread during download?","acceptedAnswer":{"@type":"Answer","text":"No, WebAssembly streaming compilation runs in parallel with the download on a background thread, so a 9.2 MB module is not a CPU bottleneck. Instantiating from cache afterward takes about 5-10 milliseconds, and the main thread stays mostly idle during that time, meaning the real bottleneck was network request timing, not compilation cost. Engineers debugging WASM load performance trade notes on streaming compilation via daily.dev."}}]} ```