Performance and images

Weft is built to stay fast with large catalogs: a sofa with 150 fabrics and 450 variants loads its fabric panel, zoom images and sample code only when a shopper uses them, and below-the-fold sections load as the shopper scrolls. Most slow stores are slow because of large images and apps. This page covers both.

Image sizes #

Shopify resizes and converts every image you upload, so the file you upload is the largest size a shopper can get. Upload at least the size below, and not much more.

File tips:

• Save photos as JPEG at about 80% quality, or WebP. A 2400 px product photo should be under 500 KB.
• Use PNG only for logos and images with transparency. A PNG photo can be ten times larger.
• Don't upload the same photo twice at different sizes. Shopify makes the smaller sizes itself.

Alt text #

Alt text describes an image to people using screen readers and to search engines.

• Product and fabric gallery photos: describe what's in the photo, for example "Harlow sofa in Forest Velvet, three-quarter view". Edit it in Content > Files or in the product's media.
• Swatches: Weft uses the fabric name, so you don't need alt text on swatch images.
• Sections with an Image description setting use that text, or the image's own alt text when the setting is empty.
• Decorative images, such as a texture behind a heading, can stay empty.

Settings that affect speed #

• Hero: put the hero first on the page. Weft loads the first hero image before anything else.
• Video section: Play muted in a loop when in view downloads the video as soon as the section is near the screen. Leave it off unless the video matters more than the speed.
• Fabric library > Fabrics loaded at a time: with several hundred fabrics, 100 or 150 makes the first view lighter. The rest loads right after.
• Featured collection > Layout: Grid loads no extra code. Carousel loads a small script.
• Product cards > Show the second image on hover: loads a second image per card on desktop only. Turn it off on very long collection pages if you see slow scrolling.
• Keep the number of sections above the fold small. Everything after the first screen loads when shoppers scroll to it.

Apps and custom code #

• Each app with storefront code adds scripts to every page. Remove apps you no longer use, and check under Online Store > Themes > ... > Edit code that their leftover snippets are gone. Ask the app developer if you aren't sure.
• Weft doesn't need apps for fabrics, samples, lead times or product groups. If you used apps for these before, remove them after setting up Weft.
• Custom Liquid sections and blocks run on every view of the page they're on. Keep them short.

Fabric and variant limits #

• One product can list up to 250 fabrics in its fabric list. More than that won't show in the picker.
• Shopify allows up to 3 options per product. Weft has been tested with 480 variants on one sofa (3 sizes, 150 fabrics, 2 leg finishes).
• Combinations that don't exist as variants show "Not available in this combination". You don't need to create every combination.

Check your speed #

• Shopify's web performance report shows your store's speed, based on real visits. Find it under Analytics > Reports, or search the admin for "web performance".
• PageSpeed Insights tests one page. Test your home page, a collection and your largest product. Scores vary between runs, so run each test three times and look at the middle result.
• To test an unpublished theme, click ... > Preview next to it, copy the preview link, and test that link.