WordPress ohne Kopfschmerzen: Warum wir Headless WordPress mit Astro.js nutzen

#"Ich liebe WordPress. Aber diese Ladezeiten..."

Diesen Satz hören wir ständig.

Du hast ein Team, das WordPress kennt. Dein Marketing erstellt Blogposts im Gutenberg-Editor. Dein Content-Manager aktualisiert Seiten per Drag-and-Drop. Alle kennen das Dashboard.

Aber dann schaust du auf Google PageSpeed Insights. Score: 34/100. Mobil noch schlimmer.

Die Optionen scheinen binär:

• Bleib bei WordPress und akzeptiere die Langsamkeit
• Wechsle komplett zu einem neuen System und trainiere dein ganzes Team um

Es gibt eine dritte Option: Headless WordPress.

Du behältst WordPress. Dein Team ändert nichts an seiner Arbeitsweise. Aber deine Besucher bekommen eine blitzschnelle Webseite, die Google liebt.

Willkommen in der Welt von Headless.

#Was bedeutet "Headless"?

Stell dir WordPress als Körper vor:

• Der Kopf (Head) ist das Theme – was Besucher sehen
• Der Körper (Body) ist das Backend – Dashboard, Datenbank, Plugins

Bei traditionellem WordPress sind Kopf und Körper verbunden. Jeder Seitenaufruf geht durch PHP, fragt die Datenbank ab, rendert das Theme, und schickt HTML an den Browser. Das dauert.

Bei Headless WordPress entfernen wir den Kopf.

Das Backend bleibt unverändert. Dein Team arbeitet weiterhin im gewohnten Dashboard. Aber das Theme? Das ersetzen wir durch ein modernes Frontend – gebaut mit Astro.js oder Next.js.

┌─────────────────────────────────────────────────────────┐
│              TRADITIONELLES WORDPRESS                    │
│                                                          │
│    Browser → PHP Theme → Datenbank → PHP Theme → HTML   │
│                                                          │
│    Jeder Request = Datenbankabfrage = LANGSAM           │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│              HEADLESS WORDPRESS                          │
│                                                          │
│    1. Build-Zeit: Astro → API → WordPress → JSON        │
│    2. Besucher:   Browser → CDN → Statisches HTML       │
│                                                          │
│    Jeder Request = Fertige Datei = INSTANT              │
└─────────────────────────────────────────────────────────┘

#Der Triple-Win: Marketing, Besucher, Security

#Win 1: Dein Marketing-Team

Dein Team ändert nichts. Sie loggen sich weiterhin unter /wp-admin ein. Sie erstellen Posts mit Gutenberg. Sie laden Bilder in die Mediathek. Sie nutzen ihre gewohnten Plugins für SEO (Yoast) und Formulare.

Der einzige Unterschied: Nach dem Speichern triggert ein Webhook einen Rebuild des Frontends. Innerhalb von Minuten sind die Änderungen live – auf einer blitzschnellen Seite.

#Win 2: Deine Besucher (und Google)

Die Besucher bekommen kein PHP-generiertes HTML. Sie bekommen statische Dateien, die auf einem weltweiten CDN liegen.

Das Ergebnis:

Google belohnt schnelle Seiten mit besseren Rankings. Deine Besucher bleiben länger, weil nichts lädt. Deine Conversion-Rate steigt, weil niemand mehr abbricht.

#Win 3: Sicherheit

Bei traditionellem WordPress ist alles öffentlich erreichbar:

• /wp-admin (Login-Seite)
• /wp-login.php (Brute-Force Ziel)
• /xmlrpc.php (Exploit-Vektor)
• Die gesamte Datenbank (SQL Injection Risiko)

Bei Headless WordPress verstecken wir das Backend. Es ist nicht mehr öffentlich erreichbar. Die WordPress-Installation lebt auf einer internen URL, geschützt durch Firewall und VPN.

Besucher interagieren nur mit statischen Dateien. Es gibt keine Datenbank, die sie angreifen können. Es gibt kein Login, das sie brute-forcen können.

Die Angriffsfläche schrumpft auf null.

#Der Tech-Stack: WPGraphQL + Astro.js

#Schritt 1: WordPress zum API machen

WordPress hat von Haus aus eine REST API. Aber wir nutzen WPGraphQL – ein kostenloses Plugin, das eine elegantere GraphQL-Schnittstelle bereitstellt.

Nach der Installation kannst du Daten so abfragen:

query GetAllPosts {
  posts(first: 10) {
    nodes {
      id
      title
      slug
      excerpt
      date
      featuredImage {
        node {
          sourceUrl
          altText
        }
      }
      categories {
        nodes {
          name
          slug
        }
      }
    }
  }
}

Die Antwort ist strukturiertes JSON – perfekt für ein modernes Frontend.

#Schritt 2: Astro.js als Frontend

Astro.js ist unser bevorzugtes Framework für Headless WordPress. Warum?

• Zero JavaScript by Default: Nur HTML und CSS werden ausgeliefert
• Partial Hydration: JavaScript nur dort, wo es wirklich gebraucht wird
• Build-Time Rendering: Alle Seiten werden beim Deploy vorgerendert
• Content Collections: Perfekte Integration mit CMS-Daten

So sieht ein typischer Blog-Post in Astro aus:

---
// src/pages/blog/[slug].astro
 
import { getPostBySlug, getAllPosts } from '../lib/wordpress'
import Layout from '../layouts/Layout.astro'
 
export async function getStaticPaths() {
  const posts = await getAllPosts()
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post }
  }))
}
 
const { post } = Astro.props
---
 
<Layout title={post.title}>
  <article class="prose lg:prose-xl mx-auto">
    <h1>{post.title}</h1>
    <time datetime={post.date}>
      {new Date(post.date).toLocaleDateString('de-CH')}
    </time>
    <Fragment set:html={post.content} />
  </article>
</Layout>

Das Ergebnis? Eine Seite, die unter 50KB wiegt und in unter 100ms lädt.

#Die WordPress-API Funktion

// src/lib/wordpress.ts
 
const WORDPRESS_API_URL = import.meta.env.WORDPRESS_GRAPHQL_URL
 
export async function getAllPosts() {
  const response = await fetch(WORDPRESS_API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: `
        query GetAllPosts {
          posts(first: 100) {
            nodes {
              id
              title
              slug
              excerpt
              date
              content
            }
          }
        }
      `
    })
  })
  
  const json = await response.json()
  return json.data.posts.nodes
}
 
export async function getPostBySlug(slug: string) {
  const response = await fetch(WORDPRESS_API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: `
        query GetPost($slug: ID!) {
          post(id: $slug, idType: SLUG) {
            title
            content
            date
            featuredImage {
              node {
                sourceUrl
              }
            }
          }
        }
      `,
      variables: { slug }
    })
  })
  
  const json = await response.json()
  return json.data.post
}

#Der Vergleich: Alt vs. Neu

#Der Migrations-Prozess

Du fragst dich: "Wie aufwändig ist das?"

Hier ist unser typischer Ablauf:

#Phase 1: Analyse (1 Tag)

• Audit der bestehenden WordPress-Installation
• Identifikation aller Content-Typen (Posts, Pages, Custom Post Types)
• Plugin-Inventar (welche bleiben, welche werden ersetzt)

#Phase 2: Backend-Setup (2-3 Tage)

• Installation von WPGraphQL und Extensions
• Konfiguration der API-Endpunkte
• Absicherung der WordPress-Installation
• Webhook-Setup für automatische Rebuilds

#Phase 3: Frontend-Entwicklung (5-10 Tage)

• Design-Umsetzung in Astro.js
• Integration aller WordPress-Inhalte
• Formular-Handling (ohne PHP)
• SEO-Optimierung (Sitemaps, Meta-Tags, Structured Data)

#Phase 4: Go-Live (1 Tag)

• DNS-Umstellung
• CDN-Konfiguration
• Monitoring-Setup
• Team-Schulung (minimal, da Dashboard unverändert)

Gesamtdauer: 2-3 Wochen für eine typische Unternehmenswebseite.

#Wann macht Headless Sinn?

Headless WordPress ist nicht für jeden. Es macht Sinn, wenn:

Ja, Headless:

• Dein Team liebt WordPress und will es behalten
• Du brauchst bessere Performance für SEO
• Sicherheit ist ein Thema (regulierte Branchen)
• Du hast Traffic-Spikes (Events, Kampagnen)
• Du willst langfristig investieren

Nein, besser komplett neu:

• Die WordPress-Installation ist chaotisch (50+ Plugins)
• Das Design soll sowieso komplett neu werden
• Kein internes Team, das WordPress pflegt
• Einfache Webseite ohne Blog/News

Wenn du komplett neu startest, empfehlen wir oft ein Headless CMS wie Sanity oder Payload – noch cleaner als WordPress, speziell für Entwickler gebaut.

#Die Alternative: Next.js statt Astro

Für Webseiten mit mehr Interaktivität nutzen wir statt Astro auch Next.js:

// app/blog/[slug]/page.tsx
 
import { getPostBySlug, getAllPosts } from '@/lib/wordpress'
 
export async function generateStaticParams() {
  const posts = await getAllPosts()
  return posts.map((post) => ({ slug: post.slug }))
}
 
export default async function BlogPost({ params }) {
  const post = await getPostBySlug(params.slug)
  
  return (
    <article className="prose lg:prose-xl mx-auto">
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}

Next.js bietet mehr Flexibilität für:

• E-Commerce (Warenkorb, Checkout)
• Benutzer-Dashboards
• Echtzeit-Features
• Komplexe Formulare

Die WordPress-Integration funktioniert identisch.

#Fazit: Das Beste aus beiden Welten

Du musst dich nicht entscheiden zwischen "WordPress behalten" und "schnelle Webseite haben".

Headless WordPress gibt dir beides:

• Dein Team arbeitet weiter wie gewohnt
• Deine Besucher bekommen eine moderne, schnelle Erfahrung
• Google belohnt dich mit besseren Rankings
• Hacker finden keine Angriffsfläche

Das ist keine Kompromisslösung. Das ist die beste Lösung für Unternehmen, die in WordPress investiert haben und dieses Investment schützen wollen.

Interessiert an Headless WordPress? Wir analysieren deine bestehende Installation und zeigen dir, wie ein Upgrade aussehen könnte – inkl. Zeitplan und Budget.

Kostenloses Headless-Audit anfragen.