Shopify Theme Performance

Overview

59% of Shopify stores lazy-load their LCP image, adding 3-5 seconds to perceived load time. This skill covers the highest-impact theme optimizations: fixing LCP image loading, switching to the modern image_url filter, profiling Liquid render times, and optimizing font delivery.

Prerequisites

• Access to the Shopify theme editor or theme files via CLI (shopify theme dev)
• Theme using Online Store 2.0 architecture (sections + JSON templates)
• Google Chrome DevTools or Lighthouse for measurement

Instructions

Step 1: Fix LCP Image Loading

The LCP element is usually the hero banner image. Find it in your theme's hero section: