Get help on Discord

Sanity Speed Optimization for Shopify Without Going Headless?

4 replies
Last updated: Sep 9, 2021
So SHOPIFY and SPEED - yes, im sure you know that already and its the opposites of each other like fire and water .. now the thing is I'm wondering if Sanity can provide a speed optimization somehow without the Shopify headless solution and how Prima (which is using sanity) have nice speed when the google speed test and pingdom showing the opposite and saying its not really true... Also there is a way to keep everything in shopify or i will need to use Sanity as a frontend and shopify as a backend. Clarification will help, thanks
AI Update

Great question! Let me break down the Shopify + speed situation and how Sanity fits in.

First, the architecture clarification: Sanity doesn't have a frontend - it's a headless CMS, meaning it's a backend content platform. You'll need a custom frontend (built with Next.js, Remix, Nuxt, etc.) that connects to both Sanity for content and Shopify for commerce functions. You can't use Sanity without going headless, but that's actually where the speed benefits come from.

How this setup improves speed:

  1. Sanity's Image CDN: One of the biggest performance wins is Sanity's Image Pipeline, which automatically optimizes images through URL parameters. You get automatic format conversion (WebP, AVIF), responsive sizing, and delivery through Google's global CDN. This alone can dramatically reduce page weight compared to standard Shopify image handling.

  2. Modern frontend frameworks: By using frameworks like Shopify Hydrogen (built on Remix) or Next.js, you get React Server Components, smart caching, and optimized data fetching that traditional Shopify themes can't match.

  3. Separation of concerns: Shopify handles what it does best (inventory, checkout, payments), while your frontend handles the presentation layer with full control over performance optimization.

About Prima and those speed test scores:

Here's the thing about PageSpeed Insights and Pingdom - they've changed how they measure performance, and there's an important distinction between lab data (synthetic tests) and field data (real user metrics). As one community member noted in this discussion:

"Sites that would rate 100 across all categories a year ago are now seeing rates in the 20s. Your visitors may still experience a fast site however, especially for clicking around (if you click around on Prima you'll notice near instant page transitions) but Google only measures the initial page load and their recent changes seem to penalize JavaScript heavily, especially on mobile."

The perceived speed and actual user experience can be excellent even when lab scores look mediocre. Modern JavaScript frameworks enable instant page transitions after initial load, which creates a much faster feeling experience than traditional page-by-page navigation.

Getting started:

Why Sanity for e-commerce:

Sanity excels at giving you flexible content modeling for rich product stories, landing pages, and marketing content that extends beyond what Shopify's native CMS offers. You get structured content patterns that work across all your channels, real-time collaboration for your team, and the ability to create truly custom shopping experiences.

Major retailers like PUMA use this approach to manage global content operations while maintaining fast, flexible storefronts.

The bottom line: Yes, Sanity can absolutely help with speed optimization, but it requires going headless with a custom frontend. The investment pays off in performance, flexibility, and the ability to create differentiated shopping experiences.

Show original thread
4 replies
You’ve come to the right place to ask these questions.
First off, Sanity doesn’t have a frontend. That would be provided by you (or your developer). Sanity is a headless solution, so you wouldn’t be able to use it with Shopify without headless. Both Sanity and Shopify will be backend services that your frontend connects to. That frontend can be created using any frontend framework.

The way Sanity fits into a Shopify stack is to provide a more flexible home for your content. Most of the time this means all pages except product and collection pages are created in Sanity, including blog posts. Sometimes it means you extend the product pages with additional information as well. Shopify then takes on the role of PIM (Product Information Management) to handle things such as inventory, shipping and transactions as well as integrations with other services.

Google page speed has made some changes in the last year on how they rank the speed of sites. Sites that would rate 100 across all categories a year ago are now seeing rates in the 20s. Your visitors may still experience a fast site however, especially for clicking around (if you click around on Prima you’ll notice near instant page transitions) but Google only measures the initial page load and their recent changes seem to penalize JavaScript heavily, especially on mobile. Imo Google page speed isn’t that important a metric. Yes, you should pay attention to it, but your content and the UX provided once on your site and your customers move around is far more important.

There are a few Sanity starters that connect with Shopify. They could be a good starting point for you to get something up and running, but will require some technical knowledge. You can then either learn it as you go, or hire someone to help you out (the
jobs channel here is a good place to look for a qualified dev).
Hope some of this helps.
Hi, thanks for your response, I'm wondering if builder.io will work like a page builder with sanity to save some extra costs that aren't needed. Also, there is some YouTube video you are recommended to watch to understand deeper about this Sanity solution with Shopify? ------Also how Sanity is different from the competition, let's say Vercel/Netlify/Contentful etc ?
Hey User! I'm not totally certain that Builder would work, but their docs do have some information on adding data via an API so that's promising. I'd suggest doing a some research there before taking the plunge!
As
user S
mentioned, I think it may be best for you to give one of these ecommerce starters a try. They'll give you a deployed frontend and a functional studio fairly quickly. There's also a guide you can follow to create a Sanity/Shopify/Next.js site here .
Regarding competitors, it's important to note that Netlify and Vercel are hosting services, not content platforms. You can even host your Studio on Netlify or Vercel! I'm biased when it comes to Contentful, but I would say that we offer much more flexibility in content modeling and usage, even on the free tier.
Ok thanks, for sure i will check it hope soon if there is something special i need to know will be happy to hear ...thanks again

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?