Performance Fix Guide
Step-by-step instructions for resolving performance audit findings. Some fixes can be applied automatically by SitePx — this page covers items that need manual action.
Core Web Vitals
Large LCP image
The Largest Contentful Paint element is a large, unoptimised image. Reducing its size directly improves your LCP score.
Identify the hero/banner image on the affected page. Resize it to a maximum width of 1600–2000px.
Convert to WebP or AVIF format before uploading. Target under 200 KB.
Ensure your theme uses Shopify's image_url filter with a width parameter, e.g. {{ image | image_url: width: 1200 }}.
Render-blocking scripts in head
Scripts in the <head> without defer or async block the browser from rendering the page.
Review the scripts listed in the audit findings. Identify third-party scripts (analytics, tracking, chat widgets).
In Themes → Edit code → layout/theme.liquid, add defer to scripts that don't need immediate execution.
Move non-critical scripts to the end of <body>.
Warning
Heavy JavaScript bundle
Large JavaScript bundles delay page interactivity. Most of the weight usually comes from installed Shopify apps.
Review your installed apps in Shopify Admin → Apps. Uninstall or disable apps you no longer use.
Check if apps offer a "lightweight" or deferred loading mode in their settings.
Consider replacing heavy apps with Shopify's built-in features where possible.
JavaScript
Too many scripts
Each script file requires a separate HTTP request. Too many scripts slow down page loading.
Go to Themes → Customize → App embeds and disable embed blocks you don't need.
Uninstall unused apps. Consider consolidating analytics with Google Tag Manager.
Many third-party script domains
Scripts loaded from many different domains add DNS lookup and connection overhead.
Review the third-party domains listed in the findings and identify which installed apps they belong to.
Remove unneeded apps or scripts. For essential ones, add <link rel="preconnect"> hints in your theme's <head>.
Duplicate scripts
The same JavaScript file is loaded more than once, wasting bandwidth and potentially causing conflicts.
Check if multiple apps inject the same library (e.g. jQuery).
In Themes → Edit code, search for the duplicate URL and remove the extra reference.
Images
Oversized images
Images that are much larger than their display size waste bandwidth.
Convert images to WebP before uploading (25–35% smaller than JPEG).
Resize to match display size (2× for retina). Target under 200 KB for product images, under 50 KB for thumbnails.
Use Shopify's image_url filter: {{ image | image_url: width: 800 }}.
Non-optimal image format
Images are served in PNG or JPEG when WebP would be significantly smaller.
Shopify's CDN automatically serves WebP when the browser supports it — ensure your theme uses the image_url filter.
For custom images uploaded outside Shopify, convert to WebP before uploading.
Broken images
An image on the page fails to load (404 or connection error).
Check the broken URL in the findings. Re-upload the image in Products → Media or Content → Files.
If the image is in your theme, update the reference in Themes → Edit code.
CSS
Render-blocking CSS
CSS files in the <head> block rendering until they finish loading.
Add media="print" to print-only stylesheets.
Load non-critical CSS asynchronously. Enable critical CSS inlining if your theme supports it.
Too many CSS files
Each CSS file adds an HTTP request. Most come from installed apps.
Disable or remove unused apps and app embeds.
Consolidate custom CSS into your main theme stylesheet.
Caching
Short cache TTL on assets
Static assets (CSS, JS, images) have short cache durations, forcing repeat visitors to re-download them.
Shopify CDN handles caching for theme assets automatically. Ensure you use {{ 'file.css' | asset_url }}.
For external CDN assets, set Cache-Control: max-age=31536000 and use versioned filenames to bust the cache when needed.
Missing cache headers
Some assets are served without cache-control headers, meaning browsers may re-fetch them on every page load.
Ensure theme assets use Shopify's asset_url filter for automatic caching.
Contact third-party providers about adding cache headers to their assets.
App Attribution
Heavy app script
An installed app is loading a large JavaScript bundle that impacts page speed.
Identify the app from the domain/path shown in the findings.
Check the app's settings for performance or "lite" mode options.
If the app isn't essential, disable its embed block in Themes → Customize → App embeds or uninstall it.
Theme performance issue
A performance problem originates from your theme code rather than an installed app.
Review the specific finding details for the affected file.
Contact your theme developer for optimisation guidance, or check for theme updates.
Consider switching to a performance-optimised theme like Dawn.