VANTA Performance, SEO & Accessibility

VANTA v1.1.0 documentation

Documentation home · Getting started · Commerce OS · Catalog & product setup · Integrations · Performance, SEO & accessibility · Troubleshooting · Buyer/owner guide · Changelog · Support

Performance, SEO & Accessibility

Performance architecture

  • Core product, navigation and merchandising content is server-rendered with Liquid.
  • Theme scripts use deferred loading.
  • Critical theme styles are discovered before Shopify's header output to improve first paint on eligible streamed pages.
  • Hero/LCP images use eager loading, high fetch priority and responsive Shopify CDN image sources when above the fold.
  • Lower-page modules use content-visibility where appropriate.
  • Product grid images use responsive sizes; early visible cards can be eagerly loaded while lower cards remain lazy.
  • AJAX filters use section-scoped requests and abort stale requests.

Merchant performance checklist

  • Prefer compressed AVIF/WebP delivery through Shopify's CDN pipeline.
  • Do not upload unnecessarily huge source videos for the hero.
  • Keep third-party app embeds to the minimum needed.
  • Avoid excessive homepage sections and auto-playing media.
  • Test with realistic products and production-like content.

SEO

VANTA includes canonical URLs, page titles, meta descriptions when provided, Open Graph data, Twitter card metadata and Shopify product/article structured data. SEO quality still depends on merchant titles, descriptions, collection copy, image alt text and internal navigation.

Accessibility

VANTA includes a skip link, visible focus treatment, labelled dialogs and controls, keyboard-compatible interactive elements, semantic forms, reduced-motion handling and alt attributes for theme images. Merchants must still provide useful image alt text and accessible content added through the Theme Editor.

Motion

When the visitor enables reduced motion at operating-system level, VANTA disables non-essential animation and transitions.

Lighthouse

Run Lighthouse on home, product and collection pages after all merchant apps and media are configured. Theme preview/editor environments can add overhead; final measurements should also be performed on the published storefront when possible.

Do not optimize blindly

Do not sacrifice image quality, readable typography or essential commerce UI for synthetic scores. Optimize the largest real bottlenecks: oversized media, duplicate apps, blocking scripts and unnecessary network work.