Performance

A fast store keeps shoppers browsing and helps search rankings. Vellora is built to load only what a page needs, when it needs it. Most of what slows a store down later comes from content and apps, so the second half of this page covers what you can do.

What the theme does#

Small, plain scripts#

• Vellora has no jQuery and no front-end framework. Its scripts are plain JavaScript.
• Every page loads a few small shared scripts: theme.js for shared behavior, cart.js for the cart, the header, announcement bar, footer and email pop-up scripts, the cart drawer scripts when the cart type is Drawer, and motion.js while animations are on. Each of these is under 10 KB before compression, and all of them load with defer, so they never block the page from showing.
• The one larger file is the GSAP animation library, about 73 KB. It isn't part of the first page load: it loads only after the first scroll, tap or pointer move, and only while animations are on.
• Each stylesheet is under 100 KB before compression.

Code that loads only where it's used#

• Section scripts and styles. Each section loads its own script and stylesheet, and only on pages that include it. A store that doesn't use the slideshow never downloads the slideshow script.
• Quick view loads its script the first time a shopper opens it.
• Animations load only when they're turned on. The GSAP animation library waits until the page has loaded and the visitor first scrolls, taps or moves the pointer. See Animations.
• Product recommendations are fetched when shoppers scroll near them, not with the page.
• Recently viewed products are fetched after the page loads, from product ids stored in the shopper's browser.
• Videos in the Video section load only when shoppers press play. Until then, they see a cover image. Shoppable video clips don't preload either: they start when they scroll into view.

Images#

• Every image is served in several widths, from 240 to 2400 px, and the browser picks the smallest one that looks sharp on the shopper's screen.
• Images below the first screen load lazily, as shoppers scroll toward them.
• When the first section on a page is a hero, such as Hero collage, Image banner, Slideshow or Split hero, its main image loads first with high priority. The first product image on product pages and the first row of products on collection pages also load right away.
• Images are cropped around the focal point you set in Shopify admin, so the theme never needs a second, separately cropped image.

Fonts#

• Fonts come from Shopify's font service, and the theme connects to it early in the page load.
• Text shows straight away in a fallback font while the web font downloads, so it's never invisible.

Smooth updates#

Filtering and sorting collections, changing variants and updating the cart all update only the part of the page that changed, without a full page reload.

What you can do#

Prepare images well#

• Use JPG for photos and PNG or SVG only for logos and graphics with flat color.
• Upload images at about the size the section recommends. The theme editor shows it under each image setting, for example 2400 × 1200 px for Image banner. Shopify then resizes them for each screen.
• Set a focal point on important images so they crop well on every screen.

Be selective with apps#

Apps are the most common reason a store gets slower. Each one can add its own scripts and styles to every page.

• Remove apps you no longer use. Some leave code behind: check the app's documentation for how to remove it fully.
• In the theme editor, open App embeds and turn off embeds you don't need.
• Prefer apps that add app blocks to specific sections over apps that load on every page.

Keep pages focused#

• Above the fold: start a page with one strong hero, not a slideshow plus a banner plus a video.
• Slideshows: every slide after the first loads later, but each still adds weight. Three slides are usually enough.
• Collection pages: 24 products per page with Load more is a good balance. Higher values make every page heavier.
• Custom Liquid and tracking codes: each third-party script you paste in runs on every visit. Add only the ones you use.

Keep fonts lean#

Each font style is a separate download. A single family for both headings and body, or two families without unusual weights, keeps text quick to appear.

Measure your store#

• Shopify's web performance report: Shopify admin shows how fast your store loads for real visitors. Look for web performance under Analytics.
• Lighthouse: in Chrome, open DevTools and run Lighthouse on your home, collection and product pages. Test in a private window, so browser extensions don't affect the score.
• Compare before and after: measure, make one change, then measure again. One-off scores vary, so run each test a few times.

Related#

• Animations
• Accessibility
• Layout and spacing