Shopify Dawn Theme Performance Optimization
Dawn is an excellent, fast base theme. However, once you install 10 apps and add custom imagery, the PageSpeed Insights score quickly plummets. Here is a definitive guide to keeping Dawn lightning fast.
1. LCP Optimization: Preload the Hero Image
The Largest Contentful Paint (LCP) is usually your banner image. Shopify's image filters naturally lazy-load
images, but you do NOT want to lazy-load the first image on the screen. Add an explicit preload
tag and use loading="eager" for your hero block.
{{ section.settings.image | image_url: width: 1500 | image_tag: loading: 'eager', fetchpriority: 'high' }}
2. Defer App Scripts
Apps like reviews, chatbots, and loyalty programs inject massive JavaScript files that block the main thread.
If you have access to your theme.liquid, wrap non-critical app scripts or move them just before
the closing </body> tag and ensure they have the defer attribute.
3. Use the Image Filters Properly
Never upload a 4000x4000 pixel image and let the browser resize it via CSS. Always use Shopify's Liquid image filters to serve the exact size needed based on breakpoints.
Conclusion
Web performance optimization on Shopify is 80% about managing third-party app scripts and 20% about serving appropriately sized images. Master these two, and your Dawn theme will remain incredibly fast.