Performance and accessibility
What Celestine does for speed and accessibility, and how to keep your store fast.
Built in
- About 3 KB of JavaScript at startup. Each feature's code loads only on pages that use it, when it scrolls into view.
- Responsive images in the right size for each screen, lazy-loaded below the fold. The first large image is preloaded.
- Lighthouse on mobile: performance 90–95 and accessibility 97–100 on the home, product and collection pages of our demo store.
- Full keyboard navigation with visible focus, focus that stays inside open drawers and returns where it started.
- Pausable slideshows and marquees, and motion that follows the visitor's reduced-motion setting.
- Tap targets of at least 44 px, sufficient color contrast, and layouts that work right-to-left.
Keep your store fast
- Upload images at around 2,000–3,000 px on the long side. Shopify serves smaller versions automatically; there's no need to upload huge files.
- Install only the apps you use. Every app adds its own scripts to every page.
- Prefer one hero image or a short slideshow over many autoplaying videos above the fold.
- Write alt text for product and content images (the image settings in the admin and editor). It helps screen readers and search engines.