Franz Reinthaler Erfahrungen mit Kadence Theme & Kadence Blocks

Warum ich WordPress-Websites nur noch so baue

Wer seit vielen Jahren digitale Projekte umsetzt, Websites gestaltet und Suchmaschinenoptimierung betreibt, kennt das wiederkehrende Trauma fast jedes WordPress-Webmasters: Man startet ein neues Projekt mit voller Begeisterung, wählt ein optisch ansprechendes Theme, installiert einen beliebten Page-Builder – und schaut sich ein paar Wochen später die Ladezeiten an.

Plötzlich schlägt die Google-Realität gnadenlos zu. Die Werte im Google PageSpeed Insights liegen im roten Bereich, die Core Web Vitals schlagen Alarm, der Server ächzt unter einer Flut von Skripten, und der Google-Bot winkt bei der Indexierung müde ab.

Ich habe in den vergangenen zwei Jahrzehnten unzählige Systeme, Themes und Layout-Generatoren getestet. Von den ersten klassischen WordPress-Themes über schwerfällige Page-Builder wie Elementor oder Divi bis hin zu komplexen Custom-Code-Lösungen. Doch in den letzten Jahren hat sich für meine eigene Arbeit sowie für die Projekte, die ich betreue, ein klarer Sieger herauskristallisiert.

In diesem ausführlichen Erfahrungsbericht: „Franz Reinthaler, Erfahrungen mit Kadence“ teile ich meine persönlichen Erfahrungen mit dem Kadence Theme und den Kadence Blocks. Du erfährst exakt, warum ich den Wechsel gewagt habe, wieso schwerfällige Page-Builder die Bremsklötze des modernen Webs sind und wie du mit einer schlanken Block-Architektur maximale Performance, absolute Barrierefreiheit und erstklassige Google-Rankings erzielst – ohne ein einziges Mal programmieren zu müssen.

1. Das Problem mit klassischen Page-Buildern: Die unsichtbare Bremse

Um zu verstehen, warum Kadence ein so gewaltiger Befreiungsschlag für WordPress-Betreiber ist, müssen wir einen Blick auf die Entwicklungsgeschichte von WordPress werfen.

Jahrelang war der Standard-Editor von WordPress schlichtweg zu unflexibel für anspruchsvolle Designs. Wer ohne tiefgehende HTML- und CSS-Kenntnisse mehrspaltige Layouts, ansprechende Buttons oder komplexe Hero-Sections bauen wollte, griff zwangsläufig zu visuellen Drag-and-Drop-Page-Buildern. Elementor, Divi, Beaver Builder oder WPBakery wurden zum Standard auf Millionen von Websites.

Doch dieser Komfort hatte von Anfang an einen extrem hohen Preis.

Der „DOM-Size-Overkill“ und Code-Müll

Wenn du in einem klassischen Page-Builder eine einfache Box mit einer Überschrift und einem Button erstellst, generiert das System im Hintergrund meist nicht einfach ein paar Zeilen sauberen Code. Stattdessen verschachtelt der Builder das Element in dutzende <div>-Container.

Im Fachjargon spricht man von einer exzessiven DOM-Größe (Document Object Model). Für den Browser bedeutet das: Er muss sich durch hunderte verschachtelte HTML-Ebenen wühlen, bevor er überhaupt versteht, wie die Seite dargestellt werden soll.

DOM-Verschachtelung im Vergleich

HTML

<!-- Typische Verschachtelung in schweren Page-Buildern -->
<div class="elementor-element">
  <div class="elementor-widget-container">
    <div class="elementor-wrapper">
      <div class="elementor-box-inner">
        <h2>Dein Titel</h2>
      </div>
    </div>
  </div>
</div>

<!-- Schlanker Nativer Gutenberg / Kadence Code -->
<div class="kb-advanced-heading">
  <h2>Dein Titel</h2>
</div>

Der Script-Ballast (Bloat)

Ein weiterer riesiger Nachteil klassischer Page-Builder: Sie laden standardmäßig JavaScript- und CSS-Bibliotheken auf jeder einzelnen Seite herunter – ganz egal, ob die entsprechenden Funktionen auf dieser spezifischen Unterseite überhaupt benötigt werden. Eine reine Textseite lädt somit den Code für Video-Slider, Formulare, Animationen und Galerie-Module mit.

Das Ergebnis:

2. Der Paradigmenwechsel: Gutenberg und die Geburt von Kadence

Mit der Einführung des Gutenberg-Editors (dem nativen Block-Editor von WordPress) änderte sich die Spielregeln grundlegend. WordPress entschied sich dafür, das Layouting direkt in den Kern des Systems zu integrieren. Anstatt externe Builder über das System zu stülpen, wurde der Editor selbst modular.

Am Anfang war der Standard-Gutenberg-Editor zwar spartanisch und gewöhnungsbedürftig. Doch Entwicklerteams erkannten das gewaltige Potenzial: Was wäre, wenn man das native, extrem schnelle Block-System von WordPress nimmt und es mit professionellen Design-Tools aufrüstet?

Genau an diesem Punkt kommt Kadence ins Spiel.

Kadence besteht im Wesentlichen aus zwei perfekt aufeinander abgestimmten Komponenten:

3. Franz Reinthaler, Meine Erfahrungen mit Kadence im Praxiseinsatz

Wenn man eine Website wie etwa jangl.eu oder ein Online-Portal mit vielen Artikeln, Tutorials und Affiliate-Verlinkungen betreibt, zählen vor allem drei Dinge: Zuverlässigkeit, Ladegeschwindigkeit und einfache Wartbarkeit.

Franz Reinthaler, Erfahrungen mit Kadence – Hier sind die zentralen Erkenntnisse aus meiner täglichen Arbeit :

A) Ladezeiten, die den Google-Bot begeistern

Nach dem Umstieg von herkömmlichen Themes auf das Kadence-Setup passierte auf meinen Seiten etwas Erstaunliches: Ohne dass ich komplexe Caching-Plugins bis zum Anschlag ausreizen musste, schossen die Performance-Werte sofort in den grünen Bereich.

Kadence verwendet kein schweres jQuery, sondern setzt konsequent auf modernes, schlankes Vanilla JavaScript. Zudem wird CSS-Code nur für die Blöcke geladen, die tatsächlich auf der aktiven Seite eingebunden sind.

Das bedeutet in Zahlen:

Für die Suchmaschinenoptimierung ist das ein gewaltiger Hebel.
Google belohnt schnelle Homepages mit besseren Rankings und einer stabileren Indexierung ,
ein Faktor, der gerade bei umfangreichen Inhalten über Erfolg oder Misserfolg entscheidet.

Performance-Vergleich im Überblick

B) Die Header- und Footer-Builder: Flexibilität ohne Code

Ein Bereich, an dem viele WordPress-Nutzer verzweifeln, ist die Gestaltung der Kopf- und Fußzeile. Bei vielen Themes ist man an starre Vorgaben gebunden. Will man das Logo umplatzieren, ein Suchfeld einfügen oder eine transparente Navigationsleiste erstellen, benötigt man entweder CSS-Kenntnisse oder teure Add-ons.

Das Kadence Theme bringt einen eingebauten Visual Header & Footer Builder mit, der schlichtweg begeistert:

C) Kadence Blocks: Das Schweizer Taschenmesser im Editor

Mit den Kadence Blocks wird der normale Gutenberg-Editor zu einer vollwertigen Design-Werkstatt. Ich nutze im Alltag vor allem folgende Blöcke intensiv:

1. Row Layout (Das Layout-Fundament)

Das Row Layout ist das Herzstück. Es ermöglicht mehrspaltige Raster, die auf mobilen Geräten flexibel umbrechen. Du kannst Abstände (Padding/Margin), Hintergrundfarben, Verläufe oder Hintergrundbilder präzise einstellen – und das für Desktop, Tablet und Smartphone getrennt!

2. Advanced Heading (Fortgeschrittene Überschriften)

Normale H2- oder H3-Überschriften in WordPress sind oft starr. Der Kadence-Block erlaubt es dir, Schriftarten (Google Fonts oder lokal eingebundene System-Schriften), Schriftgrößen, Abstände und sogar Untertitel direkt im Element zu steuern.

3. Info Box

Perfekt für Features, Produktvorteile oder Zusamenfassungen. Kombiniere Icons, Grafiken, Überschriften und Texte in einer visuell ansprechenden Box mit Hover-Effekten.

4. Accordion (Akkordeon / FAQ-Blöcke)

Ideal für strukturierte Inhalte und FAQ-Bereiche. Der Vorteil: Kadence baut die Akkordeons so auf, dass sie nicht nur optisch hervorragend aussehen, sondern auch für Screenreader perfekt lesbar sind.

5. Table of Contents (Automatisches Inhaltsverzeichnis)

Für lange Fachartikel unverzichtbar. Der Block liest deine Überschriften ($H_2$, $H_3$) automatisch aus und erstellt ein klickbares Inhaltsverzeichnis. Das erhöht die Verweildauer deiner Leser und liefert Google wertvolle Sprungmarken (Sitelinks) in den Suchergebnissen.

4. Barrierefreiheit (Accessibility): Der unterschätzte Erfolgsfaktor

Ein Thema, das in der Webdesign-Welt leider immer noch stiefmütterlich behandelt wird, ist die Barrierefreiheit (Accessibility / a11y). Im Jahr 2026 ist Barrierefreiheit nicht mehr nur ein „NICE-to-have“, sondern eine gesetzliche Verpflichtung (Stichwort: Barrierefreiheitsstärkungsgesetz) und ein direkter Rankingfaktor für Barrierearmut.

Ältere Menschen, Personen mit Sehschwächen oder Nutzer, die Tastatur-Navigation verwenden, stoßen bei komplexen Page-Buildern häufig auf unüberwindbare Hürden:

Hier punkten Kadence Theme und Kadence Blocks auf ganzer Linie.

Das Entwicklerteam hinter Kadence legt extremen Wert darauf, dass alle Elemente den Standards der WCAG 2.1 (Web Content Accessibility Guidelines) entsprechen.

Wenn deine Zielgruppe ältere Menschen sind oder du
einfach eine professionelle Website betreiben willst,
die niemanden aussperrt,
ist Kadence eine der sichersten Grundlagen am Markt.

5. Einfaches Design für Selbermacher: Die globale Farbpalette & Typografie

Einer der häufigsten Fehler von Einsteigern und Selbermachern im Webdesign ist die fehlende optische Linie. Auf Seite A wird ein anderes Blau verwendet als auf Seite B, die Schriftgrößen variieren wild, und das Gesamtbild wirkt unprofessionell.

Kadence löst dieses Problem durch ein geniales System: Die globale Farb- und Typografie-Steuerung.

Das 9-Farben-System von Kadence

Im Customizer von Kadence definierst du eine globale Farbpalette aus genau 9 Farben:

6. Schritt-für-Schritt: So steigst du erfolgreich auf Kadence um

Wenn du aktuell noch ein schweres Theme oder einen Page-Builder nutzt und deine Performance auf ein neues Level heben möchtest, empfehle ich ein strukturiertes Vorgehen. Ein Umstieg erfordert etwas Vorbereitung, belohnt dich aber mit einer zukunftssicheren Website.

Schritt 1: Staging-Umgebung einrichten

Baue deinen Umstieg niemals direkt an der Live-Website um! Nutze die Staging-Funktion deines Webhosters (z. B. bei Hostinger oder per Plugin), um eine identische Kopie deiner Website in einem geschützten Testbereich anzulegen.

Schritt 2: Kadence Theme & Kadence Blocks installieren

Schritt 3: Globale Stile festlegen

Öffne den WordPress Customizer (Design ➔ Customizer):

Schritt 4: Header und Footer konfigurieren

Nutze den visuellen Header/Footer-Builder im Customizer, um deine Navigation, dein Logo und dein Fußzeilen-Copyright sauber einzurichten.

Schritt 5: Seiten schrittweise im Gutenberg-Editor neu aufbauen

Ersetze deine alten Page-Builder-Seiten Schritt für Schritt durch native Kadence-Blöcke.

Schritt 6: Alte Plugins ausmisten

Sobald deine Seiten im Kadence-Setup laufen, kannst du alte Page-Builder (Elementor, Divi etc.) sowie überflüssige Zusatz-Plugins (für Slider, Inhaltsverzeichnisse oder Buttons) komplett deaktivieren und löschen. Du wirst erstaunt sein, wie leer und aufgeräumt deine Plugin-Liste plötzlich ist!

7. Die perfekte Kombination: Kadence + Rank Math SEO

Ein besonderer Vorteil für alle, die das Maximum aus ihren Google-Rankings herausholen wollen: Kadence arbeitet absolut nahtlos mit Rank Math SEO zusammen.

Während viele ältere Page-Builder sich regelmäßig mit SEO-Plugins überschneiden oder doppelte Schema-Aufrufe (Strukturierte Daten) erzeugen, ergänzen sich Kadence und Rank Math perfekt:

8. FAQ – Franz Reinthaler, Erfahrungen mit Kadence

Fazit: Franz Reinthaler, Erfahrungen mit Kadence

Meine uneingeschränkte Empfehlung für nachhaltige Webprojekte

Nach Jahren des Experimentierens, Testens und Optimierens stehe ich zu meinem Urteil:
Ich baue moderne WordPress-Websites heute aus Überzeugung mit dem Kadence-Setup.

Der Wechsel weg von schwerfälligen, veralteten Page-Buildern hin zur
nativen, hochoptimierten Block-Architektur von Kadence ist einer der wirkungsvollsten Schritte,
die du für den Erfolg deiner Website tun kannst.

Du belohnst deine Besucher mit rasend schnellen Ladezeiten und perfekter Barrierefreiheit
und du belohnst dich selbst mit einem System,
das stabil läuft, spürbar bessere Google-Rankings erzielt und bei jedem
WordPress-Update zukunftssicher bleibt.

Egal ob du gerade eine neue Website planst oder
ein bestehendes Projekt von technischem Ballast befreien willst

Gib Kadence eine Chance. Dein Google PageSpeed-Score und
deine Leser werden es dir danken.