Vale (Theme documentation)

(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.