Performance
Product photos are usually the heaviest thing on a product page. A few settings decide how much the gallery downloads and when — here's how to keep pages quick without making photos look worse.
Lazy load
Lazy loading means the browser waits to download an image until it's about to scroll into view. Photos further down a long gallery — or thumbnails hidden at the end of a strip — don't cost anything until a shopper actually gets to them.
It's on by default. You'll find it under Gallery → Product Image → Lazy Load, with two choices: On Demand (default) and Off. See Lazy load.
Leave it on unless you have a specific reason. It makes the biggest difference on the grid and scrolling layouts, where many full-size photos sit on the page at once.
How it's done
On Demand uses the browser's built-in lazy loading (loading="lazy"), the same mechanism WordPress uses for images in posts. There's no extra script involved.
Choose the right image sizes
Two settings decide which file WordPress hands the gallery for each photo:
- Image Size (Gallery → Product Image) — the main photo. The default, Original uploaded image, uses the full file you uploaded. See Image size.
- Thumbnails Size (General) — the thumbnails. The default, Thumbnail (150x150), is small and fast. See Thumbnails.
The trade-off is between sharpness and weight:
- Original uploaded image gives zoom the most detail to work with, but if you upload 5000-pixel photos straight from a camera, every visitor downloads them. Resize your photos before uploading — around 2000 pixels on the long side is plenty for zoom — and the default works well.
- Large or Medium_large cut the download a lot but leave zoom with less to magnify. Pick one of these if you've turned zoom off.
- Thumbnails rarely need more than Thumbnail or Medium. A bigger thumbnail size only helps if you've made the thumbnails large on screen.
The sizes you can choose from are the ones registered on your site (by WordPress, your theme and other plugins), so the list may differ from site to site.
Pick a lighter layout when it matters
Layouts load photos differently:
- Thumbnail and slider layouts show one main photo at a time. With lazy load on, the browser fetches the others as shoppers move through them.
- Grid and scrolling layouts (Tiles, Hierarchy Grid, Modern Grid, Anchor Nav, Vertical Scroll) put every photo on the page. Lazy load matters most here. For grids, Visible Gallery Items → Specific with a Show More button also keeps the first view light. See Grid options.
What loads where
The gallery's scripts and styles only load on FluentCart pages — single products, the shop and product categories — and wherever you place the shortcode. Your blog posts and other pages don't carry them.
Things worth knowing
- Other lazy-load plugins are asked to stay away. The gallery's main images carry the
skip-lazyclass, which most lazy-load and optimization plugins respect. If one doesn't and your gallery photos appear blank or pop in late, exclude the gallery (.sp-fcpg-wrapper) in that plugin's settings. See Troubleshooting. - Autoplay downloads photos too. With AutoPlay on, the slider moves on its own and the browser fetches each photo as it arrives. That's usually fine, but it's one more reason to keep image files a sensible size.