Performance
A page’s speed comes from two places: what the theme loads and what you put on the page. Tambour loads its styles, one script and the photos each screen needs. Apps, Shopify’s own scripts, videos and the number of sections are the rest, and on a slow store they are usually the larger part.
How Tambour loads a page
Section titled “How Tambour loads a page”Photos below the first screen wait until the shopper scrolls near them. The photos most shoppers see first load at once, at high priority: the photo of a Lookbook or Video section placed first on the page, the first slide of a Slideshow, the Image banner photo, the first product photo, and the banner of a collection, page or article.
For every photo, Tambour asks Shopify for several widths, up to what that place on the page needs, and the browser downloads the one that fits the screen. A phone never downloads the desktop photo. The largest width the theme asks for anywhere is 2400px, for full-width banners, slides and product photos.
Some things load only when a shopper uses them:
- A product card’s second photo loads when the pointer rests on the card.
- A video loads its cover image with the page. The video, or the YouTube or Vimeo player, loads when the shopper presses play. A Background loop starts loading once the rest of the page has finished.
- Search results load from the second character typed, 200 milliseconds after the last key.
- Shopify’s 3D model viewer loads when a shopper opens a product’s 3D model.
- The quick add loads a product when the shopper opens it.
The theme’s script loads without holding up the page, so text and photos show before it has run. Fonts come from Shopify’s font library, and text shows in a fallback font until they arrive, so a slow font never hides your words.
Keep photos to the size the theme uses
Section titled “Keep photos to the size the theme uses”Upload photos about 2400px wide. That is the largest the theme ever shows, so a wider photo adds upload time and nothing shoppers see. Shopify makes the smaller copies from your upload.
We recommend JPG for photos, saved at a quality around 80, which usually keeps a 2400px photo under 1 MB. Use PNG only for a logo or a graphic with flat color. A PNG photo is several times larger than the same photo as JPG.
The Image banner and the first slide of a Slideshow load at high priority wherever they sit, so use them at the top of a page. Further down, an Image with text section waits for the shopper to scroll.
Keep the number of sections down
Section titled “Keep the number of sections down”Each section adds its own markup, styles and photos to the page. Tambour’s three presets build their home pages from 6 to 8 sections. A home page with 20 sections takes longer to arrive than one with 8, even if shoppers never scroll to the bottom. Remove sections that don’t earn their place, and hide the ones you’re keeping for later.
Check your apps
Section titled “Check your apps”Apps are outside the theme. Many add their own scripts and styles to every page, including pages where you don’t see them, and an app you uninstalled can leave code behind.
- In the theme editor, open App embeds in the sidebar and turn off the embeds you don’t use.
- Remove app blocks you no longer need from your sections, including the Apps section.
- Click Save.
Then uninstall the apps you don’t use from your Shopify admin, and ask each app’s developer whether it left code in your theme.
Shopify also adds its own scripts to every page, for its analytics and for the apps you install. They load through the page head that Shopify fills in, and the theme doesn’t control them.
Use videos with care
Section titled “Use videos with care”A video set to Play button costs only its cover image until a shopper presses play. A Background loop starts downloading the video on every visit to the page. Keep a loop to 10 to 15 seconds without sound, and use one per page at most. Pick a Cover image for every video: it is what shoppers see while the video loads, and what a background loop shows until the shopper presses play when their device asks for reduced motion.
Measure your store
Section titled “Measure your store”Shopify measures your store’s speed from real visits. A summary shows on the Themes page of your admin, and the full reports are under Analytics > Reports. Shopify explains each number in Web performance reports, and its guide Improving your online store performance covers what you can change.
Test the live store in a private window, not the theme editor preview, which loads extra code of its own. While your store has a password page, speed tests measure that page instead of your storefront.
Common questions
Section titled “Common questions”Should I shrink my photos before I upload them?
Section titled “Should I shrink my photos before I upload them?”Only to about 2400px wide. Shopify makes every smaller size the theme asks for.
Why is my store slower than the demo store?
Section titled “Why is my store slower than the demo store?”Compare what’s on the page: the number of sections, the apps and their embeds, and any videos. The demo home pages are the preset pages, with 6 to 8 sections each.
Does turning off the louvers make the store faster?
Section titled “Does turning off the louvers make the store faster?”No. Open louvers as sections scroll into view changes how photos appear, not what the page downloads.