Salve performance tips
Salve is built to load quickly: it uses no frameworks, makes no requests to third-party services of its own and loads scripts only for the sections on the page. Your images, videos, sections and apps have the biggest effect on speed after that. These tips help you keep your store fast.
Image sizes
Shopify resizes your images and serves modern formats automatically, so upload one good-quality image and let Shopify do the rest. Very large files still take longer to process and can slow the editor, so aim for these sizes:
| Image | Recommended size | Notes |
|---|---|---|
| Hero image | 2000 x 1125 px (16:9) | Also used as the video poster. |
| Hero mobile image | 1080 x 1350 px (4:5) | Optional. A portrait crop for small screens. |
| Product images | 2048 x 2048 px (square) | Use the same shape for all products. Remedy uses portrait cards, so 1600 x 2000 px (4:5) suits it. |
| Collection images | 1600 x 1067 px (3:2) | Landscape is the default image ratio in collection lists. |
| Image with text, multicolumn, gallery | 1600 px on the long side | Larger images don't look sharper in these layouts. |
| Logo | About twice the Logo width setting | For a 140 px logo, upload a 280 px wide PNG with a transparent background. |
| Favicon | 32 x 32 px | Square PNG. |
- Save photos as JPEG and graphics with flat colors as PNG.
- Compress images before you upload them. Most image editors have an export option for web.
- Set a focal point on important images in the admin, so crops keep the subject in view.
Hero guidance
- Use one hero section at the top of the home page. The hero image loads first and at high priority, so it sets how fast the page feels.
- Choose an image that works when cropped. On small screens, add a Mobile image instead of relying on a wide crop.
- Choose Height: Medium or Small unless the image needs more space. Tall heroes push your products below the fold.
- Keep hero text in the text blocks, not in the image. Text in images isn't accessible and doesn't scale.
Limit sections above the fold
"Above the fold" is what shoppers see before they scroll. Everything there must load right away.
- Keep the header group short: the header, one announcement bar, and the safety notice bar only when you need it.
- Put one hero or one image section first, followed by content that is mostly text or small images.
- Avoid starting the page with a product row with arrows, a video or a large gallery.
- Remove sections you don't use instead of hiding them with empty content.
- Keep the number of products in a Product list modest. Eight to twelve is plenty on the home page.
Video tips
- For YouTube or Vimeo, use the Video section. The video loads only when the shopper presses play, so it doesn't slow the page. Add a Cover image, such as a still from the video.
- Keep hero videos short, silent and small: a loop of a few seconds, compressed, and about 1920 px wide at most.
- Always set a hero image. It's shown while the video loads and to visitors who prefer reduced motion.
- In the How to use section, use images for most steps and video only where movement really helps.
Other tips
- Fonts: each font family adds files to download. Using the same family for headings and body text, as the Gauge preset does, saves a download.
- Apps: each app can add scripts to every page. Uninstall apps you don't use, and check that removed apps didn't leave code behind.
- Product cards: Show second image on hover loads an extra image per card on desktop. Turn it off if your product images are large or you show many products per page.
- Quick order list: choose specific products instead of a large collection. A collection lists every variant of up to 50 products.
- Document library: keep Products per page at 24 or fewer if your products have many documents.
- Animations: keep Reveal sections on scroll off unless you want the effect.
Measure your store
Shopify's admin includes web performance reports under Analytics. You can also test single pages with a tool such as Google PageSpeed Insights. Test the home page, a collection and a product page, on mobile and desktop. Scores vary from run to run, so compare several runs before and after a change.