Identifying Your LCP Element
Before optimizing, identify what element is actually causing your LCP score. The largest visible element during page load is your LCP element.
Common LCP elements on Shopify:
- Homepage: Hero/banner image, featured product image
- Product pages: Main product image
- Collection pages: Featured collection image or first product image
- Blog: Featured post image
Use PageSpeed Insights or Chrome DevTools to identify your specific LCP element. Optimization should focus on that element first.
Image Optimization
Images are the most common LCP culprit. Optimize them aggressively.
Use appropriate image sizes
Do not serve a 4000px wide image for a 600px display slot. Use Shopify's image URL parameters or the image_url filter to request appropriately sized images:
{{ image | image_url: width: 800 }}
Implement srcset for responsive images that serve different sizes based on viewport:
srcset="{{ image | image_url: width: 400 }} 400w, {{ image | image_url: width: 800 }} 800w, {{ image | image_url: width: 1200 }} 1200w"
Use modern formats
Shopify automatically serves WebP when the browser supports it. Ensure your theme uses Shopify's image handling rather than hardcoded image URLs.
Optimize source images
Start with reasonably sized source images. A 10MB product photo will never load fast, even after Shopify's optimization.
Preload the LCP image
Tell the browser to fetch the LCP image immediately by adding a preload link in the head:
<link rel="preload" as="image" href="{{ lcp_image_url }}">
This is one of the most effective LCP improvements. The browser starts fetching the image before it even knows where on the page it will appear.
Set fetchpriority
Use the fetchpriority attribute on the LCP image:
<img fetchpriority="high" src="{{ image_url }}" />
This signals to the browser that this image is more important than others.
Render-Blocking Resources
CSS and JavaScript that block rendering delay LCP.
Inline critical CSS
CSS needed for above-the-fold content should be inlined in the document head. This eliminates the round-trip to fetch a separate CSS file before rendering can begin.
Shopify themes vary in how well they handle this. Some require custom modification.
Defer non-critical CSS
CSS for content below the fold can load after initial render. Use techniques like loading stylesheets with media="print" and changing to media="all" on load.
Defer JavaScript
Most JavaScript should use the defer attribute:
<script src="app.js" defer></script>
This allows the browser to continue parsing HTML while scripts download.
Remove unused CSS and JavaScript
Themes often include styles and scripts for features you do not use. Remove or conditionally load code that is not needed on every page.
App Script Impact
Apps add JavaScript that can significantly impact LCP.
Audit app impact
Disable apps one at a time and measure the impact on LCP. Some apps have disproportionate performance cost.
Remove unused apps
Apps you installed and stopped using still load their scripts. Uninstall them completely.
Request lazy loading
Some apps offer options to load their scripts only when needed. Enable these options when available.
Server Response Time
Shopify's servers are generally fast, but some factors can cause slow responses.
Liquid complexity
Complex Liquid templates with many nested loops, heavy filtering, or excessive object access slow down server response time.
Simplify Liquid where possible. Cache computed values in variables rather than recalculating.
Section rendering
Pages with many sections each require Liquid processing. Consolidate sections where sensible to reduce overhead.
Testing and Monitoring
Optimization is iterative. Test changes and monitor results.
Test in realistic conditions
Test on throttled connections that simulate real user conditions, not just fast office internet.
Monitor field data
Google Search Console shows Core Web Vitals from real users. Lab data is useful for debugging, but field data reflects actual experience.
Track changes
Document optimizations and their impact. This helps identify regressions when they occur.
For comprehensive performance optimization, see CRO and performance.
Working with LiftKit Digital
LiftKit Digital optimizes Shopify theme performance with a focus on measurable improvements to Core Web Vitals and conversion rates.
To discuss performance optimization, get in touch.