Every 100 milliseconds of added load time costs eCommerce stores roughly 1% in conversion rate. On Shopify, where you do not control the hosting infrastructure, performance optimisation requires a different mindset than traditional web development. You cannot tune the server, adjust caching headers at the CDN level, or swap out the rendering engine. What you can control is your theme code, your app stack, your images, and your third-party scripts — and optimising these elements can easily shave two to three seconds off your page load time and dramatically improve your Core Web Vitals scores.
Theme Code Optimisation
Your Shopify theme is the single biggest lever you have for performance. Most performance problems stem from bloated themes with unused features, excessive Liquid loops, and poorly structured CSS and JavaScript.
- Audit unused theme features: Most merchants use only 30-40% of their theme's built-in sections and features. Every unused section still ships CSS and JavaScript to the browser. Remove or conditionally load feature code that your store does not use.
- Reduce Liquid rendering time: Complex Liquid loops — especially nested for loops iterating over product variants, metafields, or large collections — increase server-side rendering time. Paginate large collections, cache expensive computations using assign statements, and avoid performing the same Liquid lookup multiple times.
- Defer non-critical JavaScript: Move all non-essential scripts to the end of the body and add the defer attribute. Cart drawers, product quick-views, and notification popups do not need to block initial rendering. Use dynamic imports to load interactive features only when the user triggers them.
- Inline critical CSS: Extract the CSS required for above-the-fold content and inline it in the head. Load the remaining stylesheet asynchronously. This eliminates the render-blocking CSS request that delays Largest Contentful Paint on most Shopify stores.
Image and Media Optimisation
Images typically account for 60-80% of total page weight on Shopify product and collection pages. Shopify's CDN automatically serves images in WebP format and supports responsive image URLs via the image_url filter with width and height parameters. Always specify dimensions in your image_url calls to serve appropriately sized images rather than full-resolution originals. Use native lazy loading with the loading="lazy" attribute on all images below the fold, but ensure your hero image and first product image use loading="eager" and have a fetchpriority="high" attribute to optimise LCP. For product galleries with many images, load thumbnails at a small size and fetch the full-resolution version only when the user interacts with the gallery.
App Stack Auditing
Shopify apps are the most common source of performance degradation. Each app can inject its own JavaScript, CSS, and tracking pixels into your storefront. We have seen stores with 25 or more apps where the combined app scripts added four seconds to page load time. Conduct a quarterly app audit: disable each app one at a time and measure the performance impact using Lighthouse or WebPageTest. Remove apps you no longer use — simply disabling an app does not always remove its injected scripts. For essential apps, check whether they offer a performance-optimised or lazy-loaded version of their storefront script. Consider replacing multiple single-purpose apps with a single comprehensive solution where possible.
Core Web Vitals on Shopify
Google's Core Web Vitals — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — directly influence search rankings and user experience.
- LCP under 2.5 seconds: Preload your hero image, inline critical CSS, and eliminate render-blocking scripts. On Shopify, using a static hero section rather than a dynamic slideshow often cuts LCP by a full second.
- INP under 200 milliseconds: Heavy JavaScript execution on the main thread causes sluggish interactions. Break long tasks into smaller chunks using requestIdleCallback or setTimeout. Avoid synchronous DOM manipulations triggered by scroll or resize events — debounce these handlers aggressively.
- CLS under 0.1: Set explicit width and height attributes on all images and embeds. Avoid injecting content above existing elements after page load — app banners and cookie consent bars are frequent CLS offenders. Use CSS aspect-ratio or min-height on containers that load dynamic content.
Born Digital specialises in Shopify performance optimisation for stores across Malta and Europe. We audit your theme, app stack, and media pipeline to deliver measurable speed improvements that translate directly into higher conversion rates and better search visibility.