mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

perf: implement font optimization, granular lazy-loading and content-visibility
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 9s
Details
Build & Deploy / 🧪 QA (push) Successful in 1m19s
Details
Build & Deploy / 🏗️ Build (push) Successful in 2m46s
Details
Build & Deploy / 🚀 Deploy (push) Successful in 34s
Details
Build & Deploy / 🔔 Notify (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-11 18:51:22 +01:00
parent 72e85b99ee
commit 52dfbb3870
4 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/[locale]/layout.tsx
View File

@@ -12,6 +12,13 @@ import '../../styles/globals.css';
import { SITE_URL } from '@/lib/schema'; import { SITE_URL } from '@/lib/schema';
import { config } from '@/lib/config'; import { config } from '@/lib/config';
import { setRequestLocale } from 'next-intl/server'; import { setRequestLocale } from 'next-intl/server';
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
export const metadata: Metadata = { export const metadata: Metadata = {
metadataBase: new URL(SITE_URL), metadataBase: new URL(SITE_URL),
@@ -88,7 +95,7 @@ export default async function LocaleLayout({
} }
return ( return (
<html lang={safeLocale} className="scroll-smooth overflow-x-hidden"> <html lang={safeLocale} className={`scroll-smooth overflow-x-hidden ${inter.variable}`}>
<body className="flex flex-col min-h-screen font-sans selection:bg-accent selection:text-primary-dark antialiased overflow-x-hidden"> <body className="flex flex-col min-h-screen font-sans selection:bg-accent selection:text-primary-dark antialiased overflow-x-hidden">
<NextIntlClientProvider messages={messages} locale={safeLocale}> <NextIntlClientProvider messages={messages} locale={safeLocale}>
<JsonLd /> <JsonLd />

18
app/[locale]/page.tsx
View File

@@ -3,14 +3,16 @@ import JsonLd from '@/components/JsonLd';
import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema'; import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
import ProductCategories from '@/components/home/ProductCategories'; import ProductCategories from '@/components/home/ProductCategories';
import WhatWeDo from '@/components/home/WhatWeDo'; import WhatWeDo from '@/components/home/WhatWeDo';
import RecentPosts from '@/components/home/RecentPosts'; import dynamic from 'next/dynamic';
import Experience from '@/components/home/Experience';
import WhyChooseUs from '@/components/home/WhyChooseUs';
import MeetTheTeam from '@/components/home/MeetTheTeam';
import GallerySection from '@/components/home/GallerySection';
import VideoSection from '@/components/home/VideoSection';
import CTA from '@/components/home/CTA';
import Reveal from '@/components/Reveal'; import Reveal from '@/components/Reveal';
const RecentPosts = dynamic(() => import('@/components/home/RecentPosts'));
const Experience = dynamic(() => import('@/components/home/Experience'));
const WhyChooseUs = dynamic(() => import('@/components/home/WhyChooseUs'));
const MeetTheTeam = dynamic(() => import('@/components/home/MeetTheTeam'));
const GallerySection = dynamic(() => import('@/components/home/GallerySection'));
const VideoSection = dynamic(() => import('@/components/home/VideoSection'));
const CTA = dynamic(() => import('@/components/home/CTA'));
import { getTranslations, setRequestLocale } from 'next-intl/server'; import { getTranslations, setRequestLocale } from 'next-intl/server';
import { Metadata } from 'next'; import { Metadata } from 'next';
import { getOGImageMetadata } from '@/lib/metadata'; import { getOGImageMetadata } from '@/lib/metadata';
@@ -49,7 +51,7 @@ export default async function HomePage({ params }: { params: Promise<{ locale: s
<Reveal> <Reveal>
<VideoSection /> <VideoSection />
</Reveal> </Reveal>
<Reveal> <Reveal className="content-visibility-auto">
<CTA /> <CTA />
</Reveal> </Reveal>
</div> </div>

2
components/Footer.tsx
View File

@@ -10,7 +10,7 @@ export default function Footer() {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
return ( return (
<footer className="bg-primary text-white py-24 relative overflow-hidden"> <footer className="bg-primary text-white py-24 relative overflow-hidden content-visibility-auto">
<div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" /> <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
<Container> <Container>

4
styles/globals.css
View File

@@ -2,8 +2,8 @@
@theme { @theme {
--font-sans: --font-sans:
'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Arial, sans-serif; 'Helvetica Neue', Arial, sans-serif;
--font-heading: 'Inter', system-ui, sans-serif; --font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif;