Theme Hacks

Shopify Dawn Theme Performance Optimization

By Mohd Baquir Qureshi
Analytics and Performance charts

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.