How to fix Core Web Vitals on Shopify (without a developer)

Search Console emails you. “Core Web Vitals issues detected on your site.” Suddenly your inbox is full of “URLs are now classified as Poor” and you have no idea what an LCP is.

Don’t panic. About 60% of what causes “Poor” CWV on Shopify is fixable without writing a single line of code. The other 40% needs a developer, but you’ll know which is which by the end of this post.

Sub-post of the Shopify Speed Optimization Guide.

The three Core Web Vitals, in 30 seconds

• LCP (Largest Contentful Paint) — how long until the biggest thing on the page paints. On Shopify this is almost always your hero image or the first product image. Target: < 2.5s on mobile.
• INP (Interaction to Next Paint) — how snappy the page feels when users tap, scroll, or type. Target: < 200ms on mobile.
• CLS (Cumulative Layout Shift) — how much stuff jumps around as the page loads. Target: < 0.1.

Google ranks on real-user data (CrUX), not lab data. So your fix has to actually move the real-user number, not just the Lighthouse score.

How to know which one is failing

Open Google Search Console → Core Web Vitals. Look at the Mobile section. You’ll see one of:

• Good — green, you’re done. Ignore.
• Needs improvement — yellow, can be a ranking ceiling but not a Search Console error.
• Poor — red, this is the one Google emails you about.

Click into “Poor” and Search Console tells you which Core Web Vital is failing and on which URLs. That’s where you start.

Or use PageSpeed Insights — same data, prettier UI, plus diagnostics.

Fixing LCP (Largest Contentful Paint)

The single most common Shopify CWV failure. Almost always one of these:

What you can fix yourself

1. Hero image too big. Open a banner image you uploaded → if the file is over 500 KB, it’s a likely culprit. Re-export at the right size:

• Hero / banner image: 1600×900px max, < 250 KB
• Collection card image: 600×600px, < 80 KB
• Product image: 1200×1200px, < 200 KB

Free tools: Squoosh (re-encodes to AVIF/WebP), TinyPNG. Replace in Shopify admin → Online Store → Themes → Customize → Edit your hero section.

2. Wrong format. JPEGs from 5 years ago weigh 4× more than the same image as AVIF. If you’re uploading PNGs of photos, that’s even worse — PNGs are for graphics with transparency, not for photographs. Convert to JPEG or AVIF.

3. The hero section is loading after a slideshow / video / app. Some merchants put a popup, slideshow, or video block above their hero. If the LCP element is the slideshow or video, those load slower than a static image.

What needs a developer

• fetchpriority="high" on the LCP image. This tells the browser to prioritize the hero image download. Most themes don’t set this by default — it’s a small but high-impact code change.
• Responsive srcset with proper widths. Without it, mobile users download the desktop image. This is theme code.
• Self-hosting fonts if the LCP is text. Google Fonts add an extra DNS lookup + connection setup per visit; self-hosting cuts that.

→ More technical detail: Why your Shopify collection page LCP is slow.

Fixing INP (Interaction to Next Paint)

INP is the one that’s broken on most Shopify stores in 2026. It measures how snappy the page feels — taps, scrolls, form inputs. JavaScript blocking the main thread is the cause.

What you can fix yourself

1. Audit your apps. Every Shopify app ships its own JavaScript. The most common INP killers I see:

• Personalization apps (run code on every page view)
• Recommendation/upsell apps (run code on every product page)
• Live chat widgets that load eagerly
• Reviews apps that hydrate on page load
• Analytics/session replay (Hotjar, Microsoft Clarity, FullStory)

For each, ask: do I actually use this? Most stores can remove 30–50% of their installed apps with no business impact. → Are Shopify apps slowing down your store?

2. Defer your chat widget. Most chat apps (Tidio, Gorgias, Crisp, Intercom) have a setting like “show after 5 seconds” or “show on scroll”. Turn it on. INP often improves by 50–100ms from this alone.

3. Strip GTM if you don’t actually use it. Lots of stores have Google Tag Manager loading 6 tags they set up two years ago and forgot. Open your GTM workspace and prune.

What needs a developer

• Code-splitting your theme JS. Older themes load one big bundle on every page. Modern pattern: load only what each template needs.
• Deferring third-party scripts that don’t have a setting (legacy retargeting pixels, custom app integrations).
• Investigating long tasks — finding which specific JS function is blocking. Requires Chrome DevTools Performance profiling.

Fixing CLS (Cumulative Layout Shift)

The easiest of the three. CLS happens when stuff loads in after the page first paints, pushing existing content around.

What you can fix yourself

1. Disable the announcement bar that appears on scroll. Many themes have an announcement bar that fades in after the page loads. If it pushes everything down, that’s CLS.

2. Disable popups that fire before page load completes. Some popup apps fire on page load — that’s a guaranteed CLS event. Configure them to fire on scroll, exit intent, or after a delay.

3. Configure your image apps to reserve space. Apps that swap product images post-load (lazy-loaded reviews with photos, dynamic recommendations) can cause CLS if they don’t reserve their space first. Most have a “set container height” setting.

What needs a developer

• Adding width and height attributes (or aspect-ratio CSS) to every image so the browser reserves space.
• Reserving space for ads, embeds, or third-party widgets that load after the page.
• Stopping fonts from causing FOIT/FOUT layout shift (font fallback metrics matching).

A 1-week DIY plan

If you have a “Poor” CWV warning today and want to chase it down before calling a dev:

Day	Task
Mon	Read your Search Console CWV report. Note which CWV is failing.
Tue	Run PSI on three URLs in the failing list. Cross-reference the diagnostic warnings.
Wed	App audit. Remove or pause anything not earning its slot.
Thu	Image audit. Replace any hero/banner over 500 KB.
Fri	Defer chat widget, disable load-time popups, prune GTM.
Mon	Re-test in PSI (lab) + check Shopify analytics for any conversion drop.
28 days	Re-check Search Console. CrUX takes 28 days to update — don’t expect overnight.

Most stores doing this in good faith move from “Poor” to “Needs Improvement” inside one CrUX window.

When to call a developer

If after the above the failing CWV is still in “Poor”, or if you’re seeing any of:

• Mobile LCP > 4s with the hero image already optimized
• Mobile INP > 500ms after app cleanup
• TTFB > 1.5s (this is theme-side, not app-side)

…that’s where a focused speed engagement makes sense. You’re past the merchant-level fixes; the rest needs someone who can read code.

A good engagement looks like: 2–4 weeks, fixed scope, before/after CrUX numbers, and a written hand-off your team can hold. → How to choose a Shopify developer.

---

Have a “Poor” CWV warning and not sure which fix to tackle first? Book a free intro call. Send your URL + the failing metric beforehand; I’ll run a live diagnostic and tell you whether it’s a 30-minute merchant-side fix or a 2-week dev engagement. Honest answer either way.