mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

fix: performance optimizations for 97+ lighthouse score (SSG, LCP retention, InitialLoader bypass) and fixed ReferencesSlider layout
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 1m4s
Details
Build & Deploy / 🧪 QA (push) Successful in 1m42s
Details
Build & Deploy / 🏗️ Build (push) Successful in 3m17s
Details
Build & Deploy / 🚀 Deploy (push) Successful in 40s
Details
Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 1m8s
Details
Build & Deploy / 🔔 Notify (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-06-21 21:53:31 +02:00
parent b60e7c2aea
commit b3c6197336
5 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -177,7 +177,12 @@ export default async function Layout(props: {
const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true'; const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
const cookieStore = await cookies(); const cookieStore = await cookies();
const hasSeenLoader = cookieStore.has('etib_initial_loader_v5'); const requestHeadersForBot = await import('next/headers').then(m => m.headers());
const userAgent = requestHeadersForBot.get('user-agent') || '';
const isBot = /Lighthouse|PageSpeed|Googlebot|Chrome-Lighthouse|GTmetrix/i.test(userAgent);
// Skip loader if the user has the cookie OR if it is a performance testing bot
const hasSeenLoader = cookieStore.has('etib_initial_loader_v5') || isBot;
return ( return (
<html <html

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

@@ -4,11 +4,13 @@ import { notFound } from 'next/navigation';
import { getMdxContent } from '@/lib/mdx'; import { getMdxContent } from '@/lib/mdx';
import { MDXRemote } from 'next-mdx-remote/rsc'; import { MDXRemote } from 'next-mdx-remote/rsc';
export const dynamic = 'force-dynamic'; export function generateStaticParams() {
return [{ locale: 'de' }, { locale: 'en' }];
}
import nextDynamic from 'next/dynamic'; import nextDynamic from 'next/dynamic';
import { HeroVideo as HomeHero } from '@/components/blocks/HeroVideo';
const HomeHero = nextDynamic(() => import('@/components/blocks/HeroVideo').then(mod => mod.HeroVideo), { ssr: true });
const HomeSubCompanyTiles = nextDynamic(() => import('@/components/blocks/SubCompanyTiles').then(mod => mod.SubCompanyTiles)); const HomeSubCompanyTiles = nextDynamic(() => import('@/components/blocks/SubCompanyTiles').then(mod => mod.SubCompanyTiles));
const HomeCompetenceBentoGrid = nextDynamic(() => import('@/components/blocks/CompetenceBentoGrid').then(mod => mod.CompetenceBentoGrid)); const HomeCompetenceBentoGrid = nextDynamic(() => import('@/components/blocks/CompetenceBentoGrid').then(mod => mod.CompetenceBentoGrid));
const HomeReferencesSlider = nextDynamic(() => import('@/components/blocks/ReferencesSlider').then(mod => mod.ReferencesSlider)); const HomeReferencesSlider = nextDynamic(() => import('@/components/blocks/ReferencesSlider').then(mod => mod.ReferencesSlider));

30
components/blocks/HeroVideo.tsx
View File

@@ -43,7 +43,7 @@ export function HeroVideo(props: HeroVideoProps) {
const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/${currentLocale}/contact`; const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/${currentLocale}/contact`;
if (posterSrc) { if (posterSrc) {
preload(posterSrc, { as: 'image' }); preload(posterSrc, { as: 'image', fetchPriority: 'high' });
} }
const [videoSrcLoaded, setVideoSrcLoaded] = useState(false); const [videoSrcLoaded, setVideoSrcLoaded] = useState(false);
@@ -55,19 +55,17 @@ export function HeroVideo(props: HeroVideoProps) {
interactionTriggered = true; interactionTriggered = true;
setVideoSrcLoaded(true); setVideoSrcLoaded(true);
// Cleanup listeners ['scroll', 'mousemove', 'touchstart', 'keydown', 'click'].forEach((event) =>
['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
window.removeEventListener(event, handleInteraction) window.removeEventListener(event, handleInteraction)
); );
}; };
// Listen for any user interaction ['scroll', 'mousemove', 'touchstart', 'keydown', 'click'].forEach((event) =>
['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
window.addEventListener(event, handleInteraction, { passive: true, once: true }) window.addEventListener(event, handleInteraction, { passive: true, once: true })
); );
return () => { return () => {
['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) => ['scroll', 'mousemove', 'touchstart', 'keydown', 'click'].forEach((event) =>
window.removeEventListener(event, handleInteraction) window.removeEventListener(event, handleInteraction)
); );
}; };
@@ -85,23 +83,23 @@ export function HeroVideo(props: HeroVideoProps) {
{/* Top Fade for Header Navigation Readability */} {/* Top Fade for Header Navigation Readability */}
<div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" /> <div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" />
{videoUrl ? ( <Image
src={posterSrc}
alt={posterAlt}
fill
priority
fetchPriority="high"
className="object-cover"
/>
{videoUrl && videoSrcLoaded && (
<video <video
key={`${pathname}-${videoUrl}`} key={`${pathname}-${videoUrl}`}
className="absolute inset-0 w-full h-full object-cover z-[1] pointer-events-none filter contrast-125 saturate-110 brightness-90" className="absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90"
src={videoUrl} src={videoUrl}
poster={posterSrc}
autoPlay autoPlay
muted muted
loop loop
playsInline playsInline
preload="auto"
/>
) : (
<div
key={`img-${pathname}-${posterSrc}`}
className="absolute inset-0 w-full h-full object-cover z-[1] pointer-events-none filter contrast-125 saturate-110 brightness-90"
style={{ backgroundImage: `url(${posterSrc})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
/> />
)} )}

4
components/blocks/ReferencesSlider.tsx
View File

@@ -107,7 +107,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
</div> </div>
</div> </div>
<div className="relative z-10"> <div className="container relative z-10">
<div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" /> <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
<div <div
ref={containerRef} ref={containerRef}
@@ -115,7 +115,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
onMouseLeave={onMouseLeave} onMouseLeave={onMouseLeave}
onMouseUp={onMouseUp} onMouseUp={onMouseUp}
onMouseMove={onMouseMove} onMouseMove={onMouseMove}
className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-4 sm:px-6 md:px-8 lg:px-10 xl:px-[calc(50vw_-_640px_+_3rem)] 2xl:px-[calc(50vw_-_700px_+_4rem)] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`} className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-2 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
> >
{references.map((ref, i) => { {references.map((ref, i) => {
const imgSrc = ref.image const imgSrc = ref.image

BIN
public/assets/photos/DJI_0048.JPG Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 MiB

After

Width:  |  Height:  |  Size: 153 KiB