Performance and accessibility

A theme can only be as fast as the store built on it. Curio starts you in a good place; this page is about not spending that lead.

What the theme does#

No framework, and almost no JavaScript. Most of Curio runs on nothing but HTML and CSS — the mega menu, the slideshow, product tabs, the size chart, badges, the stock counter, volume pricing, back-to-top, the sticky header, the measurement unit toggle, image hotspots. Where JavaScript is genuinely needed, it is a small file that does one job.

Curio holds itself to 16 KB of minified JavaScript per page type. For reference, measured totals:

Three scripts load only on first interaction, not on page load: predictive search (when someone focuses the search field), quick view (when someone presses a quick-view button), and the quick order list (when someone touches the order table). Visits that never use them never download them.

System fonts by default, which means zero font requests. Explicit image dimensions everywhere, so nothing shifts as the page loads. No autoplaying carousels, no parallax, no blur effects. Below-the-fold images are lazy-loaded; the hero image is not, because it is what the shopper is waiting for.

What is yours#

Four choices account for nearly all the performance difference between a fast Curio store and a slow one.

1. Image sizes#

The biggest single factor, by a wide margin. Shopify resizes and serves images for you, but it cannot invent detail or undo a 12 MB upload’s cost to your admin and your patience.

• Upload at roughly 2000–2400px on the long edge. More is waste.
• Use JPEG for photographs. Shopify converts to WebP for browsers that take it.
• Crop before uploading. A product shot with a metre of empty floor in it is mostly bytes.

2. Apps#

Every app that renders on the storefront adds its own JavaScript and CSS, and it is not subject to the theme’s budget. Three or four storefront apps can easily outweigh the entire theme.

Audit yours honestly: uninstall what you are not using — uninstalling matters, because a disabled app can still leave code behind — and prefer apps that use Shopify’s app blocks, which only load on the pages where you placed them.

3. Fonts#

Switching either font picker to a hosted font costs a real download before text can render in its final form. One family is usually fine. Two families at several weights each is where it starts to hurt. The default system pairing costs nothing at all.

4. Section count#

Every section on a page is markup, images, and sometimes a script. Six to eight sections make a good home page. Delete sections you are not using rather than leaving them empty — an empty section still renders.

Two combinations to know about, because they push the product page past the theme’s own script budget:

• Recently viewed on the product template. Put it on the home page or collection page instead, where it does the same job for less.
• 3D models or AR on a product that also has related and complementary sections. Worth it for the right product; not worth it as a default across the catalog.

Accessibility#

Curio is built to WCAG 2.1 AA. In practice:

• Keyboard-operable throughout. Every drawer and dialog traps focus while open, closes on Escape, and returns focus to whatever opened it. There is no interaction that requires a mouse.
• Visible focus everywhere — a squared accent outline, never removed.
• 44×44px primary touch targets.
• Live regions announce cart changes, price and availability updates, filter result counts, and pickup availability.
• Reduced motion respected. A shopper whose system asks for less motion gets no reveals and no transitions, regardless of your motion setting.
• All five color schemes ship above the AA contrast thresholds.
• Works without JavaScript. Navigation, search, filtering, variant selection, and the product form all function with it disabled.

Three ways to undo it#

The theme cannot protect you from these, and each one is common:

1. Missing alt text. Set it on every product image and every image in a section. It is the single highest-value accessibility task in a store, and nobody else can do it for you.
2. Low-contrast custom colors. If you change a scheme, check the accent against its background. A pale accent on a pale background makes links invisible to a good number of shoppers.
3. Text baked into images. A promotional image with the offer written into the artwork is unreadable to a screen reader and unsearchable. Use the section’s own heading and text fields, which is why they exist.

Checking your own store#

Run Shopify’s own report — Online Store → Themes → ⋯ → Run speed report — or a Lighthouse audit in Chrome DevTools. Test the home page, a product page, and a collection page, on mobile.

Compare like with like: a Lighthouse run on your live store with six apps installed is not comparable to the theme’s demo store, and the difference is usually the apps and the images rather than the theme.