Not All Speed Fixes Are Equal
A Shopify speed optimisation project can involve dozens of potential changes. The 80/20 rule applies: 20% of the fixes deliver 80% of the performance improvement. This guide focuses exclusively on the high-impact changes — the ones that move PageSpeed scores by 10–20 points, not 0.5 points. Do these before spending time on minor optimisations.
Fix 1: Largest Contentful Paint (LCP) Optimisation
LCP is Google’s measure of how long until the main visible content loads. For most Shopify stores, the LCP element is the hero image. Optimisation: preload the LCP image in your theme’s <head>: <link rel="preload" as="image" href="{% raw %}{{ section.settings.hero_image | img_url: '1200x' }}{% endraw %}">. Compress the hero image to under 100KB. Serve in WebP format. This single fix typically reduces LCP by 0.5–1.5 seconds.
Fix 2: Remove Render-Blocking Third-Party Scripts
Every app that loads JavaScript synchronously in your <head> blocks the browser from rendering your page until that script executes. Open Chrome DevTools → Performance tab → record a page load → look for “Render-blocking resources” in the Lighthouse report. Common offenders: old Facebook Pixel implementations, Google Tag Manager if misconfigured, chat widgets. Add defer or async to scripts that don’t need to execute before render. This is often a 1–3 second improvement.
Fix 3: Reduce JavaScript Payload
Audit your installed apps and remove any not actively generating ROI. Each app removed is hundreds of kilobytes of JavaScript eliminated. Run Chrome DevTools Coverage tab (Ctrl+Shift+P → “Coverage”) to see which JavaScript files have the most unused code. If your theme includes a carousel, parallax effect, or video background you haven’t enabled — remove the section from your theme customiser to prevent its JavaScript loading.
Fix 4: Font Loading Optimisation
Custom fonts cause Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT) during loading. Fix: add font-display: swap to your @font-face declarations so text displays immediately in a system font while the custom font loads. Preconnect to Google Fonts: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>. Load only the font weights you actually use.
Fix 5: Image Lazy Loading
Images below the fold shouldn’t load until the user scrolls near them. Add loading="lazy" to every <img> tag not in the first viewport. Modern Shopify themes do this automatically for product grid images — check that your theme is correctly implementing lazy loading and not loading all images on page load. This reduces initial page weight by 50–70% for product collection pages.
Need Shopify speed optimisation? Our dev team regularly achieves 90+ PageSpeed scores with targeted technical fixes. Get in touch.
Shopify Experts · OneOnic
Ready to Grow Your Shopify Store?
Our Shopify experts at OneOnic have helped hundreds of store owners scale faster. Let us build, optimise, and grow your store.
