perf: convert Hero to server component for faster LCP
All checks were successful
Gitea CI / test-build (push) Successful in 11m9s
All checks were successful
Gitea CI / test-build (push) Successful in 11m9s
- Hero now renders server-side, eliminating JS dependency for LCP text - CMS messages fetched server-side instead of client useEffect - Removes Hero from client JS bundle (~5KB less) - LCP element (hero paragraph) now in initial HTML response - Eliminates 2,380ms 'element rendering delay' reported by PSI Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -41,7 +41,7 @@ export default function HomePage() {
|
||||
{/* Spacer to prevent navbar overlap */}
|
||||
<div className="h-16 sm:h-24 md:h-32" aria-hidden="true"></div>
|
||||
<main className="relative">
|
||||
<Hero />
|
||||
<Hero locale="en" />
|
||||
|
||||
{/* Wavy Separator 1 - Hero to About */}
|
||||
<div className="relative h-12 sm:h-16 md:h-24 overflow-hidden">
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import Header from "../components/Header.server";
|
||||
import Hero from "../components/Hero";
|
||||
import Script from "next/script";
|
||||
import {
|
||||
getHeroTranslations,
|
||||
getAboutTranslations,
|
||||
getProjectsTranslations,
|
||||
getContactTranslations,
|
||||
getFooterTranslations,
|
||||
} from "@/lib/translations-loader";
|
||||
import {
|
||||
HeroClient,
|
||||
AboutClient,
|
||||
ProjectsClient,
|
||||
ContactClient,
|
||||
@@ -20,9 +19,8 @@ interface HomePageServerProps {
|
||||
}
|
||||
|
||||
export default async function HomePageServer({ locale }: HomePageServerProps) {
|
||||
// Parallel laden aller Translations
|
||||
const [heroT, aboutT, projectsT, contactT, footerT] = await Promise.all([
|
||||
getHeroTranslations(locale),
|
||||
// Parallel laden aller Translations (hero translations handled by Hero server component)
|
||||
const [aboutT, projectsT, contactT, footerT] = await Promise.all([
|
||||
getAboutTranslations(locale),
|
||||
getProjectsTranslations(locale),
|
||||
getContactTranslations(locale),
|
||||
@@ -57,7 +55,7 @@ export default async function HomePageServer({ locale }: HomePageServerProps) {
|
||||
{/* Spacer to prevent navbar overlap */}
|
||||
<div className="h-24 md:h-32" aria-hidden="true"></div>
|
||||
<main className="relative">
|
||||
<HeroClient locale={locale} translations={heroT} />
|
||||
<Hero locale={locale} />
|
||||
|
||||
{/* Wavy Separator 1 - Hero to About */}
|
||||
<div className="relative h-24 overflow-hidden">
|
||||
|
||||
Reference in New Issue
Block a user