Fix: Add defensive check to WebVitalsScore and reformat MDX to avoid prerender error
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 7s
Build & Deploy / 🏗️ Build (push) Failing after 9m49s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Smoke Test (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s

This commit is contained in:
2026-05-05 16:38:46 +02:00
parent a02a419879
commit cb9e136d16
2 changed files with 6 additions and 4 deletions

View File

@@ -53,10 +53,7 @@ tags: ["performance", "seo", "conversion-optimization"]
Google hat bestätigt, dass <ExternalLink href="https://developers.google.com/search/docs/appearance/core-web-vitals">Core Web Vitals</ExternalLink> als Ranking-Signale für Suchergebnisse genutzt werden. Wer hier rote Zahlen schreibt, wird vom Algorithmus abgestraft. Webseiten, die den Schwellenwert „Gut“ in allen Kategorien erreichen, verzeichnen laut Deloitte eine deutlich höhere Interaktion. Dennoch zeigt das HTTP Archive, dass ein signifikanter Prozentsatz der Websites die empfohlenen Grenzwerte weiterhin massiv verfehlt.
</Paragraph>
<WebVitalsScore
values={{ lcp: 2.1, inp: 180, cls: 0.05 }}
description="Exzellente Werte signalisieren Google eine hohe Nutzerzufriedenheit und fördern das Ranking."
/>
<WebVitalsScore values={{ lcp: 2.1, inp: 180, cls: 0.05 }} description="Exzellente Werte signalisieren Google eine hohe Nutzerzufriedenheit und fördern das Ranking." />
<Paragraph>
Dabei fokussiert sich das Framework auf drei wesentliche Säulen der User Experience, für die Google im PageSpeed Insights Tool spezifische Optimierungsvorschläge liefert:

View File

@@ -16,6 +16,11 @@ interface WebVitalsScoreProps {
}
export const WebVitalsScore: React.FC<WebVitalsScoreProps> = ({ values, description }) => {
if (!values) {
console.error("WebVitalsScore: 'values' prop is missing!");
return null;
}
const getStatus = (metric: 'lcp' | 'inp' | 'cls', value: number): 'good' | 'needs-improvement' | 'poor' => {
if (metric === 'lcp') return value <= 2.5 ? 'good' : value <= 4.0 ? 'needs-improvement' : 'poor';
if (metric === 'inp') return value <= 200 ? 'good' : value <= 500 ? 'needs-improvement' : 'poor';