---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code"
locale: de
meta:
  "og:title": "Academy Article"
---

[Zur Startseite](https://academy.laioutr.com/)

- [Für Entwickler](https://academy.laioutr.com/bereiche/fuer-entwickler)

- [Einstieg für Entwickler](https://academy.laioutr.com/leitfaeden/einstieg-fuer-entwickler)

- [Performance und technisches SEO im Code](https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code)

# Performance und technisches SEO im Code

Laioutr-Frontends rendern serverseitig, cachen Daten in Orchestr und liefern Medien über das Laioutr CDN mit Transformation an der Edge. Canonical, hreflang und Schema.org-Daten entstehen automatisch; HTTP-Caching per routeRules und das Laden des Entry-Scripts steuern Entwickler selbst.

## Bevor du startest

<dl>

<dt>Dauer</dt>
<dd>10 Min.</dd></dl>

Zuletzt geprüft am 15. Oktober 2026

Ziel sind gute Core Web Vitals: LCP unter 1,2 s, INP unter 80 ms und CLS unter 0,02. Dafür arbeiten mehrere Ebenen zusammen.

### Rendering und Caching

SSR ist standardmäßig aktiv, HTTP-Caching dagegen nicht. Daten durchlaufen drei Cache-Ebenen: den Entity-Cache von Orchestr auf dem Server, den HTTP- oder CDN-Cache an der Edge (per `routeRules`) und einen LRU-Speicher im Browser. Personalisierte Inhalte wie der Warenkorbzähler gehören auf den Client, damit gecachtes HTML für alle gleich bleibt.

### Medien

Das Laioutr CDN gibt jedem Projekt einen eigenen Bucket und Hostnamen, skaliert und konvertiert Bilder an der Edge und cacht Objekte unveränderlich.

### Technisches SEO

Frontend Core setzt Canonical, hreflang-Alternates, `og:locale` und `<html lang>` auf jeder Seite. Jede Seite trägt einen Schema.org-Graphen als JSON-LD: Organisation, Breadcrumbs, FAQ, Produkt- und Kategorieseiten. Titel, Beschreibung und robots kommen aus den SEO-Feldern in Studio.

## Schritt für Schritt

1. 1 ### Schritt 1: HTML-Caching aktivieren

   In `nuxt.config.ts` unter `routeRules` für `'/**'` einen kurzen CDN-TTL setzen, etwa `public, max-age=0, s-maxage=15, must-revalidate`. Checkout, Warenkorb und Login mit `private, no-store` ausnehmen.
2. 2 ### Schritt 2: Märkte und Sprachen trennen

   Bei mehreren Märkten auf einer Domain einen `Vary`-Header für die relevanten Request-Header setzen. Sprachpräfixe im Pfad oder eigene Domains trennen den Cache von selbst.
3. 3 ### Schritt 3: Entry-Script nach dem ersten Paint laden

   In der `laioutrrc.json` unter `config.entryScript` den Wert `"loading": "after-paint"` setzen. So konkurriert das JavaScript nicht mit dem größten Bild; die Einstellung gilt nur für Produktions-Builds.
4. 4 ### Schritt 4: Strukturierte Daten ergänzen

   In eigenen Sections `useStructuredData()` mit Knoten aus `@unhead/schema-org/vue` oder `toSchemaOrgProduct()` aufrufen und das Ergebnis mit dem Rich Results Test von Google prüfen.

## Häufige Fragen

Warum cacht das CDN keine HTML-Seiten?

Ohne eigene `routeRules` sendet das Frontend keine `Cache-Control`-Header. Erst eine Regel macht HTML am CDN cachebar.

Muss für Schema.org ein Modul installiert werden?

Nein. Die SEO-Essentials-App und die Sections für Breadcrumbs, FAQ, Produktdetail und Produktlisten schreiben ihre Knoten in einen gemeinsamen Graphen. Die Sections haben dafür jeweils eine Checkbox.

Wie lassen sich Titel oder hreflang-Tags im Code anpassen?

Über den Hook `frontend-core:page-head:resolve`. Er zeigt die berechneten Werte für SEO-Meta und Locale-Tags und erlaubt Ergänzen, Ändern oder Entfernen.

## Passend dazu

- [Performance: Caching und Orchestr](https://academy.laioutr.com/artikel/performance-caching-und-orchestr)6 Min.

  Laioutr beschleunigt Storefronts über drei Cache-Ebenen: den Entity-Cache von Orchestr auf dem Server, den HTTP-Cache an der Edge und einen Speicher im Browser. Zusammen sorgen sie dafür, dass wiederholte Aufrufe Backends kaum belasten.
- [SEO-Grundlagen vor dem Start](https://academy.laioutr.com/artikel/seo-grundlagen-vor-dem-start)10 Min.

  Vor dem Live-Gang braucht jede wichtige Seite Meta-Titel, Beschreibung und den passenden Robots-Wert, die Organisation gehört in die strukturierten Daten, und alte URLs leiten auf neue weiter. Danach prüft das Team robots.txt, Sitemap und Rich Results auf der Live-Domain.
- [Mehrsprachige SEO und hreflang](https://academy.laioutr.com/artikel/mehrsprachige-seo-hreflang)6 Min.

  Laioutr setzt Canonical, hreflang-Alternativen, x-default, og:locale und das lang-Attribut auf jeder Seite automatisch. Grundlage sind die Sprachen unter Translations, die Domains unter Markets und die übersetzten Seitenpfade in Studio.
- [Bilder über das Laioutr CDN ausliefern](https://academy.laioutr.com/artikel/bilder-ueber-das-laioutr-cdn-ausliefern)4 Min.

  Das Laioutr CDN speichert die Bilder eines Projekts in einem eigenen Speicher und liefert sie über einen eigenen Hostnamen aus. Größe und Format werden beim Abruf an der Edge angepasst, und ausgelieferte Bilder bleiben lange im Cache.

## In einer Lektion lernen

- [Performance und technisches SEO](https://academy.laioutr.com/lektionen/entwickler-performance-und-technisches-seo)12 Min.

## [Einstieg für Entwickler](https://academy.laioutr.com/leitfaeden/einstieg-fuer-entwickler)

In diesem Leitfaden suchen

1. [Lokale Entwicklungsumgebung einrichten](https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten)15 Min.
2. [Die Laioutr CLI: Befehle und Authentifizierung](https://academy.laioutr.com/artikel/laioutr-cli-befehle-und-authentifizierung)6 Min.
3. [Die erste eigene App bauen und veröffentlichen](https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen)20 Min.
4. [Eigene Sections und Blocks für Studio definieren](https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren)15 Min.
5. [Orchestr: Entities, Queries, Actions und Resolver](https://academy.laioutr.com/artikel/orchestr-entities-queries-actions-und-resolver)8 Min.
6. [Content Collections im Code deklarieren](https://academy.laioutr.com/artikel/content-collections-im-code-deklarieren)15 Min.
7. [Performance und technisches SEO im Code](https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code)10 Min.

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "de",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "workTranslation": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code#/schema/question/3"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Für Entwickler",
          "item": "https://academy.laioutr.com/bereiche/fuer-entwickler",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Einstieg für Entwickler",
          "item": "https://academy.laioutr.com/leitfaeden/einstieg-fuer-entwickler",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Performance und technisches SEO im Code",
          "item": "https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code#/schema/question/1",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Warum cacht das CDN keine HTML-Seiten?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Ohne eigene <code>routeRules</code> sendet das Frontend keine <code>Cache-Control</code>-Header. Erst eine Regel macht HTML am CDN cachebar.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code#/schema/question/2",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Muss für Schema.org ein Modul installiert werden?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Nein. Die SEO-Essentials-App und die Sections für Breadcrumbs, FAQ, Produktdetail und Produktlisten schreiben ihre Knoten in einen gemeinsamen Graphen. Die Sections haben dafür jeweils eine Checkbox.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code#/schema/question/3",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wie lassen sich Titel oder hreflang-Tags im Code anpassen?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Über den Hook <code>frontend-core:page-head:resolve</code>. Er zeigt die berechneten Werte für SEO-Meta und Locale-Tags und erlaubt Ergänzen, Ändern oder Entfernen.</p>"
      }
    }
  ]
}
```