Emoji Kitchen Performance: How We Ship 76KB
Zero frameworks, lazy-loaded pages, Canvas rendering — how we built a tool that loads in 130ms. Emoji Kitchen ships 76KB gzipped and loads in under 150ms. Here's how. React + Lazy Loading — We use React.lazy() for every page. The Kitchen (home page) loads first at 11KB. Gallery, Blog, and other pages load on-demand. You never download code you don't need. Zero CSS Frameworks — No Tailwind, no Bootstrap, no component library. Every style is hand-written CSS with custom properties. The entire stylesheet is 2.5KB gzipped. Canvas Rendering — All emoji compositing happens on Canvas — no DOM manipulation, no re-renders. The Canvas API handles everything at native speed. No External Dependencies — react, react-dom, react-router-dom. That's it. No state management library, no animation library, no icon library. Deterministic Rendering — No API calls, no database queries, no server-side processing. Everything runs in the browser. That means zero network latency between interaction and result. Code Splitting — Each page is a separate chunk. BlogPost is 0.97KB. Tools is 1.52KB. The heaviest page (Kitchen at 11KB) is still smaller than most websites' hero images. The result: a tool that feels instantaneous, works offline, and costs nothing to host. Read the full article on Emoji Kitchen, then try the ideas yourself in the emoji kitchen editor or browse examples in the mashup gallery.