Task. A store built around a video landing page lives or dies on how fast that first screen appears on a phone. Owners ask for the video anyway, so the question is how to keep it without paying for it in load time.
Solution. The first screen is a 30 KB poster image, which the browser treats as the main content and shows at once. The 286 KB video starts loading only after the page has loaded, pauses when it scrolls out of view, and is skipped entirely when the browser reports Data Saver or a 2G network, or the shopper has asked for reduced motion.
The store. Collection pages and product pages read live from Shopify's Storefront API, with sizes and colours as variants. Add to cart opens a drawer with the line, the quantity and the subtotal, and Checkout hands over to Shopify's demo checkout. The same poster-first hero works as a section in a Shopify theme.
Proof. On the live link Lighthouse scores 94 for performance and 100 for accessibility and best practices on a phone, the main content shows in 2.4 s, and nothing on the page shifts while it loads. SEO is lower on purpose: the demo asks search engines not to index it.
