Components

Lazy Load Container

Optimize What Matters, when It Matters

The Lazy Load Container component allows you to wrap any section of your content and delay its loading until it enters the user’s viewport. This means you’re not only improving perceived performance but also significantly boosting load speed and overall site efficiency, especially for content that sits below the fold.

Built with the same flexibility as the standard Container component, this version supercharges performance without compromising design or layout freedom.

Core Performance Boost

  1. Only loads when needed.
    Reduces initial load time.

  2. SEO & UX Friendly.
    Better metrics for search engines.

  3. Perfect for Below-the-Fold Content.
    Optimizes content that’s not immediately visible.

Content Flexibility Built-In

  1. Wrap Any Component.
    Use with any content block.

  2. Choose your desired HTML wrapper.
    Div, section, nav, lists, and more.

  3. Apply project-wide styles.
    Keeps design consistent and clean.

Use Cases

The Lazy Load Container is ideal for structuring large or media-heavy content sections that do not require immediate loading. Think of footers, testimonials, or additional resource sections that live at the end of your page. By deferring their load until needed, you keep your page snappy and responsive without sacrificing quality.

  • Wrap long blog posts or media sections

  • Optimize landing pages for performance

  • Delay loading of testimonials, contact forms, or embedded media

  • Improve Lighthouse performance and core web vitals scores

  • Simplify load prioritization without touching code

With this component, you control when content loads while still providing a rich experience.

Configuration Options & Features

By combining layout flexibility with a performance-first approach, the Lazy Load Container enables you to serve users what they need, when they need it, without compromising design or control.

Name

A URL-safe identifier for the section. Useful for anchor linking and section targeting. Avoid spaces or special characters.

Type

Defines the HTML tag used to render the container, which gives semantic flexibility to your structure.

The Options include:

  • div

  • section

  • ol (Ordered List)

  • ul (Unordered List)

  • li (List Item)

  • nav (Navigation)

Content

The actual nested content within the container. You can include any Vertex Forge components inside to establish the content that should get loaded lazily.

Component Theme

Define the look and feel of the wrapper. Aligns your lazy-loaded section with the rest of your branding, styles, and project consistency.