Performance
What Smootify loads on a page and when, what it does by itself to make pages feel fast, and what you control as a designer, from image sizes to loading placeholders.
Smootify loads the parts a page uses, when it uses them, and prepares the next product page while the visitor is still on this one. Some of the biggest gains depend on your design, though: the size of the images Smootify fills, and the placeholders that keep the layout still while data arrives. This page says what loads when, what Smootify does by itself, and what you can do.
What loads, and when
Each part loads at its own moment:
At start, on every page
One small loader script in the head, which loads Smootify without blocking the page, and its stylesheet. Products, prices, the add-to-cart form and the cart start with it.
Only on the pages that contain them
Every other part, such as search, filters, account pages, add-ons, the cookie banner and the market suggestion. A page without a search does not download the search.
Only when first needed
The account data (orders, subscriptions, addresses), the 3D viewer (when a 3D model is shown), the map of the store locator (from Mapbox, only on its page), and the product structured data (on product pages, after the page has loaded).
After consent
The tracking pixels set in SmootifyUserOptions.. A visitor who must consent downloads none until they accept. See Analytics and pixels.
When the page is idle
The animation library used by the cart and other panels, unless the page already loads it. The gsap option turns it off.
Never on your custom domain
The debugger. It loads only on .webflow.io, when you turn it on.
Visitors who open your site in the Instagram, Facebook or TikTok app on an iPhone get a build made for those browsers: see Install Smootify 2.0.
What Smootify does by itself
- Prepares the next page. In browsers that support it, such as Chrome and Edge, a product page starts loading when the visitor holds the pointer on its link, and a collection or vendor page when the visitor presses its link.
- Fetches the next product. Once the page is idle, the products of the links near the screen, or hovered, or touched, are fetched into the browser’s cache. Their page then shows the product at once, in every browser.
- Remembers products. Products stay in the browser’s cache for a few minutes, so a product seen on one page shows at once on the next.
- Restarts Webflow interactions only when needed, after a change that Smootify made to the page.
These are on by default. The preload, cacheDuration, prefetch and gsap options change them: see Options.
Size the images Smootify fills
Images from Shopify arrive at the size they were uploaded, often several thousand pixels wide. When Smootify writes an image, it replaces the responsive versions Webflow made for your placeholder. Without a size, a grid of product cards downloads every photo at full size.
Add a size attribute to each image Smootify fills, and the Shopify CDN sends a smaller file:
At most 600 pixels wide
- Needs
- Nothing else.
At most 600 pixels high
- Needs
- Nothing else.
Crops the image to both sizes
- Needs
- Both
max-widthandmax-height.
Fills the space around the image with that color
- Needs
- Both
max-widthandmax-height.
Choose about twice the width the image shows at on the page, so it stays sharp on high-density screens.
The attributes go on the element that has the Smootify attribute: the Image with variant="image" or product="specific-image", the image of a cart line, and in the gallery the Slider and the thumbnails. The gallery’s places: Product gallery and media. Every image they work on: image size.
Keep the layout still while data loads
Smootify fills the page once the data arrives. Until then, what you designed shows. Two things keep the page from jumping:
- Give placeholders their final size. Keep a placeholder text in a text element, and give images a width and a height, or an aspect ratio, in the Style panel.
- Use
skeleton.skeleton="text","button","block"or"image"shows a loading shimmer on an element until Smootify fills it, andskeleton="hide"hides it while keeping its space. Nothing shimmers unless it has the attribute. See loading.
A skeleton does not make the page load faster. It keeps the page still, which visitors and Google’s Core Web Vitals both notice.
Large catalogues
A filtered collection page with many cards is the heaviest page of a store. Show fewer products per page, and use previous and next buttons instead of loading more on long lists: see Filters, sorting and pagination.
Measure
On your .webflow.io address, turn on the debugger with Alt⇧ ShiftD (⌥ Option⇧ ShiftD on a Mac), or on a phone add ?smootify-debug to the address. Its Performance tab shows the page’s Largest Contentful Paint, when Smootify was ready, and the Smootify files the page downloaded, with their size. See The debugger.
Where people get stuck
Check these first
- Product cards load slowly. The images have no size attribute, so each card downloads the full photo. Add
max-width. - Size attributes do nothing on the gallery slides. Put them on the Slider, not on the slide.
- Size attributes do nothing on an image. It is bound to a CMS field. They work only on images Smootify fills from Shopify.
- The page still jumps with a skeleton. The element has no size before it is filled. Give it a size or keep placeholder text in it.
- Nothing shimmers while the page loads. Only elements with a
skeletonattribute do. Add it where you want a placeholder. - The collection page is slow on phones. Too many products per page, or loading more keeps adding cards. Lower
limitand use previous and next.