DEV Community: Hitesh Singh

Fixing INP on Shopify stores: a practical guide for theme developers

Hitesh Singh — Thu, 15 Oct 2026 06:09:24 +0000

Most Shopify performance work still focuses on load speed: compress the hero image, lazy-load below the fold, trim the app list. That matters, but it misses the metric that most often fails on real stores today: Interaction to Next Paint (INP).

INP measures how quickly the page responds visually after a user does something: taps a variant swatch, opens the cart drawer, types in predictive search, clicks "Add to cart". It replaced First Input Delay as a Core Web Vital in March 2024, and it is much harder to pass, because it looks at (nearly) every interaction across the whole visit rather than only the first one.

This post walks through how we find and fix INP problems on Shopify themes. It is aimed at developers who are comfortable in Liquid and JavaScript and want a repeatable process rather than a list of generic tips.

What INP actually measures

An interaction has three phases:

Input delay: the time between the tap and your event handler starting. This is usually caused by something else hogging the main thread (a third-party script, a hydration task, a long-running timer).
Processing time: how long your event handlers take to run.
Presentation delay: the time for the browser to recalculate styles, lay out and paint the next frame after your handlers finish.

The page's INP is roughly its slowest interaction (outliers are trimmed on pages with many interactions). Google's thresholds, measured at the 75th percentile of real users, are:

Good: 200 ms or less
Needs improvement: 200 to 500 ms
Poor: over 500 ms

The important part is "real users". INP is a field metric. Lighthouse in a lab run cannot report it because nobody is clicking anything, so you need field data to know where you stand.

Step 1: Find out which pages and interactions are slow

Start with the data you already have:

Shopify admin: the Web performance report in the admin shows INP alongside LCP and CLS for your storefront, with a timeline you can line up against app installs and theme changes.
PageSpeed Insights / CrUX: if the store has enough traffic, the "Discover what your real users are experiencing" section gives you INP at the URL and origin level.
Search Console: the Core Web Vitals report groups failing URLs by template, which on Shopify usually maps neatly to product, collection, cart and home.

Those tell you where. To learn which interaction and why, add the attribution build of Google's web-vitals library. A small snippet in theme.liquid is enough:

<script type="module">
  import { onINP } from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js?module';

  onINP(({ value, rating, attribution }) => {
    if (rating === 'good') return;
    const payload = {
      value: Math.round(value),
      target: attribution.interactionTarget,
      type: attribution.interactionType,
      inputDelay: Math.round(attribution.inputDelay),
      processing: Math.round(attribution.processingDuration),
      presentation: Math.round(attribution.presentationDelay),
      page: location.pathname,
    };
    navigator.sendBeacon('https://your-endpoint.example.com/inp', JSON.stringify(payload));
  });
</script>

Send it wherever suits you: a GA4 custom event, a small serverless endpoint, or your existing analytics. After a few days you will have a list like "variant-picker input on product pages, mostly processing time" or "cart-drawer button, mostly input delay". That breakdown tells you which fix to reach for.

For local debugging, Chrome DevTools' Performance panel shows live INP as you click around, and recording an interaction shows you exactly which tasks ran. Turn on CPU throttling (4x or 6x) so a fast laptop behaves more like a mid-range phone.

Step 2: Fix the usual Shopify culprits

In our experience, slow INP on Shopify almost always comes from a handful of patterns.

Variant pickers that do too much at once

A typical variant change handler updates the price, swaps the gallery image, rewrites the URL, re-renders the buy buttons, recalculates stock messaging and fires analytics events, all synchronously. Each piece is small; together they block the next paint.

The fix is to paint the visible change first and defer the rest:

function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    return scheduler.yield();
  }
  return new Promise((resolve) => setTimeout(resolve, 0));
}

async function onVariantChange(variant) {
  // 1. The thing the user is looking at
  updateSelectedSwatch(variant);
  updatePrice(variant);

  // 2. Let the browser paint
  await yieldToMain();

  // 3. Everything else
  updateGallery(variant);
  history.replaceState({}, '', `?variant=${variant.id}`);
  sendAnalytics('variant_change', variant.id);
}

scheduler.yield() is available in Chromium-based browsers; the setTimeout fallback keeps it working elsewhere.

Re-rendering whole sections on every change

Dawn-style themes often call the Section Rendering API on variant change and replace a large chunk of the DOM with the response. Replacing big subtrees forces expensive style and layout work, which shows up as presentation delay. Where you can, swap only the nodes that changed (price, availability, buy button) instead of the whole section, and abort stale requests with an AbortController when the user clicks through variants quickly.

Third-party apps on the main thread

Reviews widgets, upsell popups, chat bubbles, heatmaps and tracking pixels all compete for the main thread. When a long task from one of them is running, your tap waits. This is the main source of input delay.

Practical steps:

Audit app embeds in the theme editor and remove anything that isn't earning its keep. Uninstalling an app doesn't always remove its leftover snippets, so check theme.liquid and snippets/ too.
Load non-critical widgets on interaction or when they scroll into view, rather than on page load.
Move tracking pixels into Shopify's Customer Events (web pixels), which load in a sandboxed environment instead of as scripts injected straight into the theme.
Use the Long Animation Frames API (PerformanceObserver with type long-animation-frame) to see which script URLs are behind long frames. It names the scripts responsible, which makes app conversations much more concrete.

Cart drawers and predictive search

The cart drawer often fetches /cart.js, re-renders, runs a free-shipping bar calculation and opens an animation, all in one handler. Open the drawer immediately with a loading state, then fill it in. For predictive search, debounce input (around 150 to 300 ms) and cancel in-flight requests so typing never queues up work.

Large DOMs and expensive CSS

Collection pages with hundreds of product cards, mega menus rendered in full on every page, and heavy CSS selectors all make each frame costlier. Paginate or progressively render long grids, render mega menu content only when it's opened, and consider content-visibility: auto for off-screen sections so the browser can skip their rendering work.

Step 3: Verify and keep it fixed

After shipping a fix, confirm it the same way you found the problem: re-run the interaction in DevTools with throttling, then watch your field data. CrUX and Search Console use a rolling 28-day window, so give it a few weeks before calling it done; your own web-vitals beacon will show movement much sooner.

To stop regressions:

Keep the attribution snippet running permanently and alert when the 75th percentile crosses 200 ms on a key template.
Add a quick INP check to your process whenever a new app is installed or the theme is updated.
Keep a short "performance budget" note in the theme repo: maximum app embeds, no synchronous third-party scripts in <head>, and so on.

Why this is worth the effort

INP failures are felt directly as a store that seems "laggy" on mobile, and those moments happen on the pages closest to purchase: product, cart and checkout entry points. Fixing them also feeds into Core Web Vitals reporting in Search Console, which is part of the wider page experience picture for SEO.

If you'd like a second pair of eyes on a store's Core Web Vitals, or a broader technical SEO and CRO review, our team at Web Consulting Agency does this kind of work for Shopify and custom ecommerce builds.

Written by the team at Web Consulting Agency, a Dublin-based web, SEO and growth consultancy working with ecommerce brands and app companies.

How ecommerce brands can show up in AI answers (GEO) in 2026: a practical checklist

Hitesh Singh — Fri, 09 Oct 2026 01:53:37 +0000

More shoppers now start product research by asking an AI assistant instead of typing keywords into Google. They ask things like "what is a good gradual self-tan for pale skin" or "best CBD balm for runners" and get a short answer with a few brands named. If your brand is not in that answer, you are not in the consideration set.

Generative Engine Optimization (GEO), sometimes called Answer Engine Optimization (AEO), is the work of making your brand easy for these systems to find, understand and trust. It builds on SEO rather than replacing it. Here is the checklist we use with ecommerce brands.

1. Find out where you stand today

Before changing anything, measure.

Write 20 to 30 prompts a real customer would ask. Mix category questions ("best vegan self-tan"), problem questions ("how to stop gym clothes smelling") and comparison questions ("Brand A vs Brand B").
Run them in ChatGPT, Perplexity, Gemini, Copilot and Google (to see AI Overviews).
For each prompt, record: is your brand mentioned, is your site cited as a source, which competitors appear, and which third-party pages are cited.

That last column is the most useful. It tells you which review sites, publications, forums and marketplaces the AI tools lean on in your category.

2. Make sure AI crawlers can actually read your site

You cannot be cited if your pages cannot be fetched.

Check robots.txt. Make sure you are not blocking search-related crawlers such as Googlebot, Bingbot, OAI-SearchBot (ChatGPT search) and PerplexityBot. Decide separately whether to allow training crawlers like GPTBot and Google-Extended; that is a business choice, not a ranking requirement.
Check your CDN or firewall. Bot protection rules sometimes block these crawlers by accident.
Make sure key content is in the HTML. If product descriptions, prices or reviews only load through JavaScript, some crawlers will miss them. View the page source and confirm the important text is there.
Keep pages fast and stable. Slow, error-prone pages get crawled less.

3. Turn product pages into clear answers

AI tools pull facts. Give them clean, specific facts.

State plainly what the product is, who it is for and what problem it solves, in the first few lines.
List the details people ask about: ingredients or materials, sizes, usage, shade or fit guidance, shipping times, returns policy.
Add a short FAQ on each key product page using real questions from your customer service inbox and reviews.
Avoid vague copy like "the ultimate glow experience". A sentence like "a gradual self-tan lotion for fair to medium skin that develops in 4 to 6 hours" is far easier to quote.

4. Add structured data

Schema markup helps machines understand your pages without guessing.

Product and Offer schema on product pages (name, brand, price, currency, availability, GTIN or SKU).
AggregateRating and Review schema, only for genuine reviews shown on the page.
Organization schema on the homepage, with your logo, contact details and sameAs links to your official social profiles.
FAQPage schema where you have real FAQ content.
Validate with Google's Rich Results Test and the Schema Markup Validator.

5. Publish content that answers buying questions

Look at the prompts from step 1 and create pages that answer them directly.

Buying guides: "How to choose a gradual tan for sensitive skin."
Comparisons: your product vs a common alternative, written fairly.
Problem pages: "Why gym clothes still smell after washing, and what helps."
Start each page with a two or three sentence direct answer, then go deeper. Use clear headings that match how people phrase the question.
Add an author or reviewer with real expertise where it matters, especially in skincare, supplements and wellness.

6. Build your presence beyond your own site

AI answers often cite third-party sources more than brand sites.

Use the "cited sources" list from step 1. If a category roundup on a publication keeps getting cited, that is where you want a mention.
Keep your brand name, description and contact details consistent across your site, marketplaces, social profiles and directories.
Encourage reviews on the platforms that show up in answers for your category.
Take part honestly in communities like Reddit where your customers already ask questions. Helpful answers age well; promotional posts do not.
Pursue digital PR: expert comments, original data from your own customers, and founder stories.

7. Keep product feeds clean

Shopping answers in Google and in AI assistants rely heavily on product data.

Keep your Google Merchant Center feed accurate: titles, prices, availability, images, GTINs and shipping.
Make sure feed data matches the live page exactly. Mismatched prices or stock hurt trust.
Watch merchant programmes from AI assistants as they open up in your markets, and make sure your feed is ready.

8. Handle regulated categories with care

If you sell CBD, supplements or skincare with active ingredients, be precise.

Avoid medical claims you cannot support. AI tools and ad platforms are both cautious here.
Publish lab reports, certificates of analysis and ingredient sourcing where relevant. Verifiable documents are good citation material.
Explain what your product does and does not do in plain language.

9. Measure and repeat monthly

Re-run your prompt list every month and track mentions and citations over time.
In GA4, watch referral traffic from chatgpt.com, perplexity.ai, gemini.google.com and copilot.microsoft.com. ChatGPT often adds utm_source=chatgpt.com to links.
Note which pages get cited and build more pages like them.

A simple starting order

If you only have a few hours this month:

Run the prompt audit (step 1).
Fix crawler access and HTML rendering (step 2).
Rewrite your top five product pages with clear facts and FAQs (step 3).
Add Product and Organization schema (step 4).

That alone puts many brands ahead of their competitors, because most ecommerce sites have not done the basics yet.

I'm Hitesh Singh, Sales & Marketing Director at Web Consulting Agency, a Dublin team that helps ecommerce and wellness brands with website design, SEO, GEO and paid media. If you'd like a second pair of eyes on how your brand shows up in AI answers, we offer a free 30-minute consultation.