# 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.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/start/performance  
Updated: 2026-10-01

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.analytics`. A visitor who must consent downloads none until they accept. See [Analytics and pixels](https://www.smootify.io/docs/features/analytics).
- **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](https://www.smootify.io/docs/start/install).

## 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](https://www.smootify.io/docs/developers/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:

| Attribute | What the Shopify CDN sends |
|---|---|
| `max-width="600"` | the image at most 600 pixels wide |
| `max-height="600"` | the image at most 600 pixels high |
| `crop="center"` | with both sizes, the image cropped to them |
| `pad-color="ffffff"` | with both sizes, the image with the space around it filled with that color |

Choose about twice the width the image shows at on the page, so it stays sharp on high-density screens.

```html
<smootify-product data-id="{Shopify ID}">
  <img variant="image" max-width="600" skeleton="image">
  <div product="title" skeleton="text">Product name</div>
</smootify-product>
```

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](https://www.smootify.io/docs/build/product-gallery). Every image they work on: [image size](https://www.smootify.io/docs/reference/attributes/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, and `skeleton="hide"` hides it while keeping its space. Nothing shimmers unless it has the attribute. See [loading](https://www.smootify.io/docs/reference/attributes/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](https://www.smootify.io/docs/build/filters).

## Measure

On your `.webflow.io` address, turn on the debugger with Alt+Shift+D (Option+Shift+D 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](https://www.smootify.io/docs/start/debugger).

## Where people get stuck

> [!STUCK]
> - **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 `skeleton` attribute 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 `limit` and use previous and next.