Cutting a Shopify storefront bundle from ~100 KB to 28 KB

A storefront widget is a guest in someone else’s house. Instagram Feed loads on merchants’ product, home and collection pages, so every byte of its entry script is paid on every page view, by shoppers who often never scroll down to the feed at all.

The entry bundle had grown to about 100 KB. It imported the whole feed renderer up front: every layout, the slider, the popup viewer. A page with a single grid still downloaded all of it before anything showed.

The fix was a lazy import. The entry now only finds the feed blocks on the page and loads the renderer when one is there, and the heavier pieces load when they are actually used. The entry went from about 100 KB to 28 KB, roughly 70% smaller.

The second step was data. Feed data used to be printed inline into every page. Now only what the first paint needs stays inline, and the rest is fetched through the Storefront API with a cached token, falling back to the old inline mode when the store has not granted the scope.

Neither change was clever. The lesson is to look at what the first paint actually needs and make everything else wait.