13 Aug 2026

Shopify speed optimisation: diagnose LCP, INP and CLS before removing animation

The short answer

Improving speed does not mean switching off every animation or chasing one Lighthouse score. Start with real visitor data to identify whether loading, responsiveness or layout stability is the problem. Then investigate the relevant templates, images and scripts. Keep useful visual effects, but do not let them delay the main content or block interaction.

When a Shopify store becomes slow, the usual response is to compress images, uninstall apps or disable animation. Each can help, but acting in the wrong order can strip away the design without fixing the cause. Google's Core Web Vitals separate loading, interaction and visual stability. Shopify's theme performance guidance also recommends reducing JavaScript, using HTML and CSS where appropriate, and deferring non-critical resources.

First, identify what feels slow

Metric	What the customer experiences	Where to look first
LCP	The main content takes too long to appear	Hero image, fonts, critical CSS and server response
INP	Filters, add-to-cart or menus respond slowly	Third-party scripts, event handlers, long tasks and theme components
CLS	Images, buttons and text shift as the page loads	Image dimensions, font swaps and space reserved for asynchronous components

PageSpeed Insights can help uncover problems, but one lab score is not the whole picture. Campaign scripts, location, devices and networks can change the result. Review Search Console's Core Web Vitals data, Shopify's web performance reports and browser performance traces together, grouping pages by template.

Work through templates, not the whole site at once

Start with commercially important pages. Prioritise the homepage, best-selling product pages, key collections and the route into checkout. Low-traffic articles usually do not need to lead the first round.
Record the critical resources. Identify the largest above-the-fold image, font files, synchronous scripts and sections that appear late and move the layout.
Change one category at a time. Release image, font and app-script changes separately so you can tell what made a difference.
Keep useful visual design. Start suitable animations when they enter the viewport, defer decorative assets and provide a static alternative for visitors who prefer reduced motion.

Four common causes in Shopify projects

Several apps inject overlapping scripts for reviews, pop-ups, tracking or recommendations.
The hero uses an oversized original image, mobile devices download the desktop version, or image dimensions are missing.
Too many font weights load, and the first screen shifts while external fonts arrive.
Every page executes one large JavaScript bundle, including components it does not use.

What WESWOO checks

First, confirm that navigation, product information, prices and add-to-cart are usable. Then check that animation remains smooth. Animation is not automatically the enemy of performance; loading order, activation conditions and fallback behaviour need to be designed properly.

Leave a record the team can check again

A performance report should identify the tested URLs, devices, dates, before-and-after measurements and any effect on customer journeys. A green score screenshot alone is not enough. When the team changes the theme, adds a pixel or installs a campaign app later, it needs to know which resources deserve particular attention so the store does not gradually slow down again.

Sources and verification

This article refers to official platform documentation and public standards. Recheck current platform guidance and the store's configuration before implementation.