Virtual Slides vs Full DOM for 500+ Items on Low-End Mobile: Memory vs SEO Trade-off

Goal

Choose a rendering strategy for a Swiper carousel that must display 500+ slides on low-end mobile devices while preserving search visibility and accessibility.

Constraints

• Initial load time and runtime memory are critical on devices with limited RAM.
• All slide content must be indexable by search engines without JavaScript execution.
• Assistive technology must traverse the complete slide set in the accessibility tree.
• Native browser find (Ctrl+F) should locate text inside any slide.

Trade-off

Virtual Slides renders only a small window of slides around the active index, reusing DOM nodes to keep memory flat. Full DOM rendering mounts every slide upfront, preserving SEO, accessibility, and native find, but scales memory and paint cost linearly with slide count.

Questions

1. Does Virtual Slides with server-side rendered HTML for the initial viewport satisfy search-indexing requirements, or must every slide exist in the initial DOM?
2. When using full DOM rendering, what is the practical slide-count threshold where Lighthouse performance scores degrade below acceptable levels on a typical low-end Android device?
3. Can a hybrid approach—pre-rendering the first N slides for SEO and switching to Virtual Slides thereafter—be implemented without breaking Swiper's internal index management?