Komponenten

Lazy Load Container

Optimieren Sie, was wichtig ist, wenn es wichtig ist

Mit der Lazy-Load-Container-Komponente können Sie einen beliebigen Abschnitt Ihres Inhalts umhüllen und dessen Laden verzögern, bis er in den Viewport des Nutzers gelangt. Das bedeutet, dass Sie nicht nur die wahrgenommene Leistung verbessern, sondern auch die Ladegeschwindigkeit und die Gesamteffizienz der Website erheblich steigern, insbesondere für Inhalte, die sich unterhalb des Fold befinden.

Mit der gleichen Flexibilität wie die Standardkomponente Container steigert diese Version die Leistung, ohne die Design- oder Layoutfreiheit zu beeinträchtigen.

Kern Performance Boost

  1. Wird nur bei Bedarf geladen.
    Reduziert die anfängliche Ladezeit.

  2. SEO- und UX-freundlich.
    Bessere Metriken für Suchmaschinen und UX.

  3. Perfekt für "Below-the-Fold"-Inhalte.
    Optimiert Inhalte, die nicht sofort sichtbar sind.

Eingebaute inhaltliche Flexibilität

  1. Umhüllen Sie jede Komponente.
    Verwendung mit jedem Inhaltsblock.

  2. Wählen Sie den gewünschten HTML-Wrapper.
    Div, Abschnitt, Nav, Listen und mehr.

  3. Wenden Sie projektweite Stile an.
    Hält das Design konsistent und sauber.

Anwendungsfälle

Der Lazy Load Container ist ideal für die Strukturierung großer oder medienlastiger Inhaltsabschnitte, die nicht sofort geladen werden müssen. Denken Sie an Footer, Erfahrungsberichte oder zusätzliche Ressourcenabschnitte, die sich am Ende Ihrer Seite befinden. Indem Sie das Laden dieser Abschnitte aufschieben, bis sie benötigt werden, bleibt Ihre Seite flott und reaktionsschnell, ohne dass die Qualität darunter leidet.

  • Lange Blog-Beiträge oder Medienabschnitte einpacken

  • Optimieren Sie Landing Pages für die Leistung

  • Verzögertes Laden von Testimonials, Kontaktformularen oder eingebetteten Medien

  • Verbessern Sie die Leistung von Lighthouse und Core Web Vitals

  • Vereinfachung der Lastpriorisierung ohne Eingriff in den Code

Mit dieser Komponente steuern Sie, wann Inhalte geladen werden, und bieten gleichzeitig ein umfassendes Erlebnis.

Konfigurationsoptionen und Funktionen

Durch die Kombination von Layout-Flexibilität mit einem leistungsorientierten Ansatz ermöglicht es der Lazy Load Container, den Nutzern das zu bieten, was sie brauchen, wenn sie es brauchen, ohne Kompromisse beim Design oder der Kontrolle.

Name

Ein URL-sicherer Bezeichner für den Abschnitt. Nützlich für die Verknüpfung von Ankern und die Ausrichtung von Abschnitten. Vermeiden Sie Leerzeichen oder Sonderzeichen.

Typ

Definiert den HTML-Tag, der zum Rendern des Containers verwendet wird, was Ihrer Struktur semantische Flexibilität verleiht.

Die Optionen umfassen:

  • div

  • section

  • ol (Geordnete Liste)

  • ul (Ungeordnete Liste)

  • li (Listenelement)

  • nav (Navigation)

Content Bereich

Der eigentliche verschachtelte Inhalt innerhalb des Containers. Sie können darin beliebige Vertex Forge-Komponenten einfügen, um den Inhalt festzulegen, der verzögert geladen werden soll.

Komponenten Theme

Definieren Sie das Aussehen des Wrappers.

Richtet Ihren Lazy-Loaded-Abschnitt am Rest Ihres Brandings, Ihrer Stile und der Projektkonsistenz aus.