Performance

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:

Visitors who open your site in the Instagram, Facebook or TikTok app on an iPhone get a build made for those browsers, a single file with the same elements: Smootify’s loader picks it by itself, there is nothing to set.

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.
• Announces what it changes. After a change that Smootify made to the page, it sends the smootify:render event, so your own scripts can react. Its detail.nodes is always an empty array: to rebind animations, query the document for the nodes you have not bound yet and mark them, with a data attribute or a WeakSet.

These are on by default. The preload, cacheDuration and prefetch 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. 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:

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

<smootify-product data-id="1234567890">
  <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. 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 each text element, and give images a width and a height, or an aspect ratio, in your CSS.
• 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.

A skeleton does not make the page load faster. It keeps the page still, which visitors and Google’s Core Web Vitals both notice.

The first load is in the HTML

After the build, each page already holds the products it shows and the state Smootify would draw at load, so a first visit sends no Storefront query for the home page, a product page or a collection page, and the page does not move when Smootify starts. See First load. Static pages are the fastest and the cheapest: see Deploy to Cloudflare.

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 a *.workers.dev 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.

Where people get stuck