1. Defer Render-Blocking JavaScript
JavaScript files that load in the <head> block the browser from rendering your page. By adding defer or async attributes, you allow the browser to continue parsing HTML while scripts load in the background. This single change can improve your Largest Contentful Paint (LCP) by 1–2 seconds on most Shopify stores.
2. Minify HTML, CSS & JavaScript
Minification removes unnecessary whitespace, comments, and characters from your code files without changing functionality. Tools like UglifyJS and CSSNano can reduce file sizes by 20–40%. Shopify's native CDN handles some of this, but theme-level minification gives you additional gains.
3. Optimize Images Without Quality Loss
Images account for 60–70% of a typical page's total weight. Convert images to WebP format (30% smaller than PNG/JPEG), use Shopify's built-in image resizing, and always set width and height attributes to prevent layout shifts. Avoid uploading images larger than they'll actually display.
4. Implement Lazy Loading
Lazy loading defers the loading of images and videos below the fold until the user scrolls toward them. Add loading="lazy" to all <img> tags below your hero section. This dramatically reduces initial page load and improves your Time to Interactive (TTI).
5. Remove Dead App Code
Every Shopify app you've ever installed — even uninstalled ones — can leave JavaScript and CSS behind in your theme. Audit your theme.liquid file for unused scripts from apps you no longer use. Removing dead code is one of the highest-impact, lowest-risk optimizations available.
6. Use Dynamic Image Scaling
Shopify's URL-based image transformation lets you serve the exact right size for every device. Instead of loading a 2000px image on mobile, use image_url with size parameters to serve optimally-sized images. Combine with srcset for responsive delivery.
7. Minimize HTTP Requests
Each resource your page loads (scripts, stylesheets, fonts, images) requires a separate HTTP request. Combine CSS files, inline critical CSS, and reduce the number of third-party scripts. Fewer requests mean faster page load, especially on mobile connections.
8. Optimize Web Fonts
Google Fonts and custom fonts are often loaded synchronously, blocking rendering. Use font-display: swap, preload critical font files, and consider self-hosting your fonts. Limiting your font weights to only what you need can cut font payload by 50%.
9. Enable Browser Caching
Configure cache headers so returning visitors load your store from their browser cache rather than fetching everything from the server again. Shopify handles some caching automatically, but you can optimize cache lifetimes for static assets like logos and icons.
10. Audit & Remove Unused Apps
Each active Shopify app can add 50–200ms of load time. Audit your installed apps and remove any you don't actively use. Even apps running in the background inject scripts that slow your store. Our Premium package includes a full app audit with recommendations.