(Guides · Performance)
Performance
Vale is built light: no libraries, small deferred scripts per section, CSS loaded only where a section is used, and responsive images everywhere. A few habits keep it that way.
Images
- Hero images
- 2400 x 1600px recommended
- Cover plates (Hero: editorial cover)
- 1200 x 1600px recommended
- Product images
- 2000px on the long edge is plenty; use the same shape for every product
- Format
- Upload JPG or PNG; Shopify serves modern formats and the right size to each device
Only the first hero image loads with high priority; everything else loads lazily. Put your most important image in the first section of the page.
Sections
- Use two or three scroll sections per page rather than all of them. Each one is small, but pinned sections lengthen the page.
- Keep the home page to around twelve to fifteen sections.
- Section CSS and JavaScript load only on pages that use the section.
Video
- Always set a cover image. YouTube and Vimeo load nothing until the visitor presses play.
- Keep silent loops short (10 to 20 seconds) and upload them as Shopify-hosted videos. They play only while on screen.
Fonts
Each font weight is a separate file. Vale loads the grotesk at a few weights, one serif and one mono. Choosing a different heading weight or a second family adds files; the defaults are already balanced.
Apps
Apps add their own scripts to every page and are the most common cause of a slow store. Install only the ones you use, remove leftovers from apps you've uninstalled, and prefer apps that use app blocks and app embeds.
Measure
Run Lighthouse in Chrome on your home, a product and a collection page, or use Online Store > Themes > View report for Shopify's speed score based on real visits.