Performance

A store’s speed depends on two things: what the theme loads, and what you put on the page. Fine Print keeps its own share small. Apps, videos, fonts and the number of sections are your choices, and on most slow stores they are the bigger share.

What the theme does

Images

Images load as the shopper scrolls toward them. The exceptions are the images a shopper sees first. The logo, the first product image, the collection banner image, a blog post’s main image, the first posts on a blog page, and the image of a hero, image with text, video, featured collection, featured product or before and after section at the top of a page load right away, most of them at high priority.

Fine Print asks Shopify for each image in several widths, matched to where it shows, and the browser downloads the one that fits the screen. A phone never downloads the desktop-sized photo, so you don’t need to shrink photos before you upload them. The Hero section’s Mobile image goes further, with a separate image for screens narrower than 750 px.

JavaScript

Every page loads the theme’s main script, which is small and holds what every page needs, such as the cart. The code for each interactive part, such as the header menus, the product gallery, the filters, the finder or the cart drawer, is a separate file that loads only when that part is on the page. A section you add in the theme editor loads its code the moment it appears.

Apart from YouTube and Vimeo videos you add, Fine Print loads nothing from outside Shopify.

Fonts

Fine Print uses fonts from Shopify’s font library, so they come from Shopify’s servers. The theme starts loading your Heading font and Body font early, ahead of the rest of the page, and text shows in a fallback font while a web font loads, so a slow font never hides your text. The Mono font is a third family, used for labels, numbers and specifications on most pages.

If you pick a system font in Theme settings > Typography, the store skips that download. A system font uses the font already on the shopper’s device, so your store looks a little different from one device to the next.

Videos

• The Video section shows only its poster image when the page opens. The video file, or the YouTube or Vimeo player, loads when the shopper presses play.
• A video in the Hero plays muted on a loop while it is on screen and pauses when the shopper scrolls past it.
• Product videos play when the shopper presses play, with the theme’s play, pause and mute buttons.

Animations

Enable animations in Theme settings > Layout changes how the store moves, not how much it downloads. The one exception is the second product image on hover: with animations off, or with Show second image on hover off in Theme settings > Product cards, product cards don’t load a second image at all.

Sections that fade in as they scroll into view never hold back the first screen. Anything already on screen when the page opens shows at once.

What slows a store down

These are the usual causes when a store on Fine Print is slow.

Apps

Many apps add their own scripts and styles to every page, even pages where you don’t see them. An app you uninstalled can also leave code behind. To check:

1. In the theme editor, click the App embeds icon in the sidebar and turn off embeds you don’t use.
2. Remove app blocks you no longer need from your sections.
3. Uninstall apps you don’t use, then ask the app developer whether it left code in your theme.

Shopify explains app embeds.

Large videos

A hero video is often the heaviest thing on a page. Keep the loop short, a few seconds is enough, or use an image in the hero and put the film in a Video section further down, where it costs nothing until the shopper presses play.

Many fonts

Each font family is a separate download, and bold and italic styles add more when a page uses them. Fine Print uses three families on most pages: heading, body and mono. Picking a system font for Heading font, Body font or Mono font saves that download on every page.

Many images on the first screen

The number of images matters more than the size of your uploads, since Shopify resizes them for each screen. Shoppers wait for what’s on the first screen, and every large image there is one more file to fetch before the page looks ready. Put your strongest image first and let the rest sit lower on the page, where they load as the shopper scrolls.

Too many sections

Every section adds markup, images and sometimes its own script to the page. A home page with 25 sections takes longer to load than one with 10, even if shoppers never scroll to the bottom. Remove sections that don’t earn their place, and hide sections you’re keeping for later.

Custom code

Code added to theme files or through the Custom liquid section and the Product custom liquid block runs on every page it appears on. Our support doesn’t cover custom code. If you hired someone to add it, ask them to check its speed.

How to measure

Shopify measures your store’s speed from real visits. A summary shows on the Themes page of your admin, and the full reports are in Analytics > Reports. The data can lag by up to 36 hours, so give it a few days after a change. Shopify explains each number in Web performance reports.

To test a single page, run Lighthouse from Chrome’s developer tools or with PageSpeed Insights on your store’s address. Lighthouse tests one page load in a lab, so its scores move from run to run. Run each test three times and look at the middle result. Test the live store in a private window, not the theme editor preview, which loads extra code of its own.

Shopify’s guide to improving your online store performance covers more of what you can change.