Web-Framework erkannt - MetricSpot Docs

Was diese Prüfung macht

Identifiziert das JavaScript-Framework, das die Seite rendert, aus einem geschichteten Satz von Fingerabdrücken. Das erste verlässliche Signal gewinnt, und das Ergebnis ist rein informativ — diese Regel lässt nie ein Audit durchfallen.

Framework	Primäre Fingerabdrücke
Next.js	`<script id="__NEXT_DATA__">`, `/_next/static/`, `__next_f`-Runtime, `x-powered-by: Next.js`
Nuxt	`window.__NUXT__`, `/_nuxt/`, `<div id="__nuxt">`, `<script id="__NUXT_DATA__">`
Astro	Custom-Element `astro-island`, `data-astro-cid-*`-Attribute, `<!-- generated by Astro -->`-Kommentar, `View-Transitions`-Style-Tags
SvelteKit	`<script data-sveltekit-hydrate>`, `/_app/immutable/`, `__sveltekit_*`-Globals
Remix / React Router 7	`window.__remixContext`, `/build/_assets/`, `<link rel="modulepreload" href="/build/`, Remix-Style-`_data`-URLs
Gatsby	`/page-data/`, `window.___gatsby`, `<div id="___gatsby">`
Create React App	`/static/js/main..js`, `/static/css/main..css`, `<div id="root">` ohne SSR-Markup
Vite + React/Vue	`/assets/index-*.js`, `<script type="module">` mit gehashtem Entry, keine framework-spezifischen Globals
Vue (standalone)	`<div id="app">`, `window.Vue`, `data-v-*`-Scoped-Attribute
Angular	`<app-root>`, `ng-version`-Attribut am Root-Element

Wenn MetricSpot die Seite nicht mit Zuversicht klassifizieren kann (stark angepasste Builds, server-gerendertes HTML mit allen Framework-Signaturen entfernt), meldet es “kein Framework erkannt” und behandelt das Audit als server-gerenderte HTML-Site.

Warum es zählt

Genauso wie die CMS-Prüfung — das ist Kontext, der den Rest des Audits das richtige Rezept wählen lässt.

Ein fehlendes Canonical-Tag auf Next.js wird über den metadata-Export im App Router gefixt; auf Astro geht es ins <Layout>; auf CRA gibt es ohne Server keinen echten Fix.
Ein fehlschlagendes Largest Contentful Paint auf Gatsby ist meist eine Image-Plugin-Fehlkonfiguration; auf Next.js zeigt es auf next/image-Priority-Hints oder die Streaming-Grenze; auf einer Vite-SPA bedeutet es meist Client-seitiges Rendern von Above-the-Fold-Inhalt (echter Fix ist SSR).
Ein fehlschlagendes Interaction to Next Paint auf Remix oder Next.js App Router zeigt auf überdimensionierte Client-Komponenten; auf Astro zeigt es auf Islands, die client:visible statt client:load sein sollten.
Eine XML-Sitemap ist @astrojs/sitemap auf Astro, next-sitemap auf Next.js Pages Router oder sitemap.ts auf dem App Router — das Fix-Label ist jedes Mal anders.

Das Framework sagt auch Decken voraus. Statisch generierte Astro- oder Next.js-Seiten erreichen routinemäßig 95+ in der Lighthouse-Performance; client-gerenderte CRA- oder Vanilla-Vue-SPAs brechen ohne aggressives Code-Splitting selten die 70. Zu wissen, wo du stehst, sagt dir, was sich zu optimieren lohnt und was sich zu migrieren lohnt.

So behebst du es

Es gibt nichts zu fixen — diese Regel ist informativ. Die Aktion ist, den Rest deines Audits durch die Linse deiner Framework-Konventionen zu lesen.

Next.js (App Router) — fast jeder Metadata-Fix ist der metadata-Export in layout.tsx oder page.tsx. Security-Header gehen in next.config.js unter async headers(). Bilder nutzen next/image mit priority für LCP.

Next.js (Pages Router) — <Head> in pages/_app.tsx für site-weite Tags, Per-Page-<Head> für Overrides. next-sitemap für Sitemaps. Header weiter in next.config.js.

Astro — alles auf Seiten-Level geht in deine <Layout>-Komponente oder einen Per-Page-Frontmatter-Block. @astrojs/sitemap für Sitemaps, natives import.meta.env für Build-Time-Daten. Astros “Zero JS by default”-Modell heißt, dass die meisten Performance-Audits ohne Eingriff bestehen.

Nuxt 3 — useHead()-Composable oder definePageMeta() für Metadaten. nuxt.config.ts für site-weite Einstellungen. @nuxtjs/sitemap für Sitemaps.

SvelteKit — <svelte:head> in +layout.svelte für site-weite Tags; Per-Route-<svelte:head> für Overrides. Header über den handle-Hook in src/hooks.server.ts.

Remix — meta- und headers-Exports pro Route. links-Export für Preloads und Stylesheets.

Create React App / Vite SPA — die meisten server-gerenderten Audit-Befunde (Security-Header, Canonical-URLs, OG-Tags) lassen sich ohne Server-Side-Rendering oder einen Meta-injizierenden Build-Step nicht vollständig fixen. Erwäge eine Migration zu Vite + SSR (mit einem Framework wie Astro oder Remix), bevor du gegen einzelne Regeln kämpfst.

Vue (standalone) — nutze vue-meta (Vue 2) oder @unhead/vue (Vue 3) für dynamische Head-Tags. Für SSR-taugliches SEO nutze Nuxt.

Kein Framework erkannt — du bist auf reinem HTML oder einem server-seitigen Template (PHP, Rails, Django, Go-Templates). Jeder Fix ist eine direkte Bearbeitung der Quelle; du hast die meiste Kontrolle und die wenigste Magie.

Framework-Fingerabdrücke verstecken, wenn du musst. Du kannst x-powered-by-Header entfernen und -Kommentare strippen, aber die Runtime-Signaturen (Mount-Node-IDs, gehashte Asset-Pfade, Hydration-Globals) sind ins Framework gebacken und sie zu strippen bricht das Framework. Der Aufwand lohnt sich nicht.

Häufig gestellte Fragen

MetricSpot hat mein Framework falsch erkannt. Warum?

Häufigster Fall: ein Wrapper-Framework wird statt des Meta-Frameworks erkannt. Eine Next.js-Seite ist auch eine React-Seite — MetricSpot meldet Next.js, weil es spezifischer ist. Eine Nuxt-Seite ist auch eine Vue-Seite; wir melden Nuxt. Siehst du “React”, obwohl du auf Next.js bist, strippt dein Build wahrscheinlich das __NEXT_DATA__-Skript — ungewöhnlich, aber in eigenen Output-Modi möglich.

Beeinflusst das Framework meinen Audit-Score?

Nein, diese Regel ist rein informativ. Sie ändert aber, welche Rezepte du siehst — Fehler anderswo im Audit empfehlen einen für deinen erkannten Stack passenden Fix.

Was, wenn ich mehrere Frameworks nutze (Micro-Frontends)?

MetricSpot meldet das Framework, das die Seiten-Shell rendert. Ist deine Shell Next.js, aber ein Abschnitt ein Vue-Micro-Frontend, melden wir Next.js. Single-Page-Micro-Frontend-Setups sind auf Marketing-Oberflächen selten — wenn du eines hast, weißt du wahrscheinlich schon, welches Framework welche Route besitzt, und kannst den Audit entsprechend interpretieren.