Performance
A store’s speed depends on two things: what the theme loads, and what you put on the page. Pawsome 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
Section titled “What the theme does”Images
Section titled “Images”Images below the first screen load as the shopper scrolls toward them. The main image of the first section on a page loads right away at high priority, because it is usually the largest thing a shopper sees first.
Pawsome asks Shopify for each image in several widths, matched to where the image 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.
JavaScript
Section titled “JavaScript”Every page loads the theme’s core script, for the parts every page has: the header, menus, cart drawer, search and dialogs. Code for anything else, such as a slideshow, the product gallery or the filters, loads only on pages that have that section. Apart from YouTube and Vimeo videos you add, the theme loads nothing from outside Shopify.
Pawsome uses fonts from Shopify’s font library, so they come from Shopify’s servers. Text shows in a fallback font while the web font loads, so a slow font never hides your text.
If you pick a system font for Heading font, Body font and Accent font in Theme settings > Typography, the store downloads no fonts at all. 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
Section titled “Videos”- A video set to Click to play shows its poster image and loads the video, or the YouTube or Vimeo player, only when the shopper presses play.
- A video set to Autoplay on loop starts loading when its section comes near the screen, not when the page opens.
- Autoplay on set to Desktop only keeps the poster image on phones, so mobile shoppers don’t download the video unless they press play.
Animations
Section titled “Animations”The Animation style setting in Theme settings > Animations changes how things move more than how much the page downloads. With None, two things load less: background videos stay on their poster image and don’t download, and the code that animates headings line by line doesn’t load. Shoppers who turn on reduced motion on their device get the same.
What slows a store down
Section titled “What slows a store down”These are the usual causes when a store on Pawsome is slow.
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:
- In the theme editor, click the App embeds icon in the sidebar and turn off embeds you don’t use.
- Remove app blocks you no longer need from your sections.
- Uninstall apps you don’t use, then ask the app developer whether it left code in your theme.
Large videos
Section titled “Large videos”Background videos are often the heaviest thing on a page. Keep loops short, trim them to a few seconds, and use Desktop only for Autoplay on when a phone shopper doesn’t need the motion. One video in the first section of the home page costs more than several further down.
Many fonts
Section titled “Many fonts”Each font family is a separate download, and its bold and italic styles add more when a page uses them. Every page downloads your Heading font and Body font. The Accent font downloads only on pages where a Scrolling text section uses it. Picking a system font for one of them saves a download on every page.
Many images on the first screen
Section titled “Many images on the first screen”Images you pick in the theme’s own settings are resized for each screen, so the file size of your upload matters less than you might expect. The number of images matters more. 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
Section titled “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
Section titled “Custom code”Code added to theme files or through the Custom Liquid section and 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
Section titled “How to measure”Shopify’s web performance reports
Section titled “Shopify’s web performance reports”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.
Lighthouse
Section titled “Lighthouse”Run Lighthouse from Chrome’s developer tools, or with PageSpeed Insights on your store’s address. Test your home page, a collection page and a product page, on mobile and desktop.
Lighthouse tests one page load in a lab, so scores move from run to run. Run a 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. While your store has a password page, Lighthouse measures that page instead of your storefront.
Shopify’s own guide, Improving your online store performance, covers more of what you can change.