From de3ef37b482ce6ffad84977ec653c88e2fa7506a Mon Sep 17 00:00:00 2001 From: denshooter Date: Wed, 4 Mar 2026 11:13:10 +0100 Subject: [PATCH] perf: remove framer-motion and lucide-react from critical path - Remove framer-motion from Hero.tsx and HeaderClient.tsx, replace with CSS animations/transitions - Replace lucide-react icons (Menu, X, Mail) with inline SVGs in HeaderClient.tsx - Lazy-load About, Projects, Contact, Footer via dynamic() imports in ClientWrappers.tsx - Defer ShaderGradient/BackgroundBlobs loading via requestIdleCallback in ClientProviders.tsx - Remove AnimatePresence page wrapper that caused full re-renders - Enable experimental.optimizeCss (critters) for critical CSS inlining - Add fadeIn keyframe to Tailwind config for CSS-based animations Homepage JS reduced from 563KB to 438KB (-125KB). Eliminates ~39s main thread work from WebGL init and layout thrashing. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- app/components/ClientProviders.tsx | 65 ++------ app/components/ClientWrappers.tsx | 11 +- app/components/HeaderClient.tsx | 242 +++++++++++++---------------- app/components/Hero.tsx | 72 ++------- next.config.ts | 1 + package-lock.json | 74 +++++++++ package.json | 17 +- tailwind.config.ts | 9 ++ 8 files changed, 235 insertions(+), 256 deletions(-) diff --git a/app/components/ClientProviders.tsx b/app/components/ClientProviders.tsx index b3cc013..ffb498d 100644 --- a/app/components/ClientProviders.tsx +++ b/app/components/ClientProviders.tsx @@ -7,7 +7,6 @@ import { ToastProvider } from "@/components/Toast"; import ErrorBoundary from "@/components/ErrorBoundary"; import { ConsentProvider } from "./ConsentProvider"; import { ThemeProvider } from "./ThemeProvider"; -import { motion, AnimatePresence } from "framer-motion"; const BackgroundBlobs = dynamic(() => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })), { ssr: false, @@ -25,66 +24,19 @@ export default function ClientProviders({ children: React.ReactNode; }) { const [mounted, setMounted] = useState(false); - const [is404Page, setIs404Page] = useState(false); const pathname = usePathname(); useEffect(() => { setMounted(true); - // Check if we're on a 404 page by looking for the data attribute or pathname - const check404 = () => { - try { - if (typeof window !== "undefined" && typeof document !== "undefined") { - const has404Component = document.querySelector('[data-404-page]'); - const is404Path = pathname === '/404' || (window.location && (window.location.pathname === '/404' || window.location.pathname.includes('404'))); - setIs404Page(!!has404Component || is404Path); - } - } catch (error) { - // Silently fail - 404 detection is not critical - if (process.env.NODE_ENV === 'development') { - console.warn('Error checking 404 status:', error); - } - } - }; - // Check immediately and after a short delay - try { - check404(); - const timeout = setTimeout(check404, 100); - const interval = setInterval(check404, 500); - return () => { - try { - clearTimeout(timeout); - clearInterval(interval); - } catch { - // Silently fail during cleanup - } - }; - } catch (error) { - // If setup fails, just return empty cleanup - if (process.env.NODE_ENV === 'development') { - console.warn('Error setting up 404 check:', error); - } - return () => {}; - } }, [pathname]); - // Wrap in multiple error boundaries to isolate failures return ( - - - - {children} - - + + {children} @@ -99,13 +51,20 @@ function GatedProviders({ }: { children: React.ReactNode; mounted: boolean; - is404Page: boolean; }) { + // Defer heavy Three.js/WebGL background until after LCP + const [deferredReady, setDeferredReady] = useState(false); + useEffect(() => { + if (!mounted) return; + const id = requestIdleCallback(() => setDeferredReady(true), { timeout: 5000 }); + return () => cancelIdleCallback(id); + }, [mounted]); + return ( - {mounted && } - {mounted && } + {deferredReady && } + {deferredReady && }
{children}
 diff --git a/app/components/ClientWrappers.tsx b/app/components/ClientWrappers.tsx index a9566e0..7003119 100644 --- a/app/components/ClientWrappers.tsx +++ b/app/components/ClientWrappers.tsx @@ -6,11 +6,8 @@ */ import { NextIntlClientProvider } from 'next-intl'; +import dynamic from 'next/dynamic'; import Hero from './Hero'; -import About from './About'; -import Projects from './Projects'; -import Contact from './Contact'; -import Footer from './Footer'; import type { HeroTranslations, AboutTranslations, @@ -21,6 +18,12 @@ import type { import enMessages from '@/messages/en.json'; import deMessages from '@/messages/de.json'; +// Lazy-load below-fold sections to reduce initial JS payload +const About = dynamic(() => import('./About'), { ssr: false }); +const Projects = dynamic(() => import('./Projects'), { ssr: false }); +const Contact = dynamic(() => import('./Contact'), { ssr: false }); +const Footer = dynamic(() => import('./Footer'), { ssr: false }); + const messageMap = { en: enMessages, de: deMessages }; function getNormalizedLocale(locale: string): 'en' | 'de' { diff --git a/app/components/HeaderClient.tsx b/app/components/HeaderClient.tsx index d8fd09c..55bef47 100644 --- a/app/components/HeaderClient.tsx +++ b/app/components/HeaderClient.tsx @@ -1,13 +1,22 @@ "use client"; import { useState, useEffect } from "react"; -import { motion, AnimatePresence } from "framer-motion"; -import { Menu, X, Mail } from "lucide-react"; import { SiGithub, SiLinkedin } from "react-icons/si"; import Link from "next/link"; import { usePathname, useSearchParams } from "next/navigation"; import type { NavTranslations } from "@/types/translations"; +// Inline SVG icons to avoid loading the full lucide-react chunk (~116KB) +const MenuIcon = ({ size = 24 }: { size?: number }) => ( + +); +const XIcon = ({ size = 24 }: { size?: number }) => ( + +); +const MailIcon = ({ size = 20 }: { size?: number }) => ( + +); + interface HeaderClientProps { locale: string; translations: NavTranslations; @@ -44,7 +53,7 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps href: "https://linkedin.com/in/dkonkol", label: "LinkedIn", }, - { icon: Mail, href: "mailto:contact@dk0.dev", label: "Email" }, + { icon: MailIcon, href: "mailto:contact@dk0.dev", label: "Email" }, ]; const pathWithoutLocale = pathname.replace(new RegExp(`^/${locale}`), "") || ""; @@ -55,53 +64,38 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps return ( <> - +
- - +
dk0 - +
- setIsOpen(!isOpen)} - className="md:hidden p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 transition-colors" + className="md:hidden p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 transition-all hover:scale-105 active:scale-95" aria-label="Toggle menu" > - {isOpen ? : } - - + {isOpen ? : } + + - +
- - {isOpen && ( - setIsOpen(false)} - /> - )} - + {/* Mobile menu overlay */} +
setIsOpen(false)} + /> - - {isOpen && ( - -
-
- setIsOpen(false)} - > - dk0 - - -
+ {/* Mobile menu panel */} +
+
+
+ setIsOpen(false)} + > + dk0 + + +
- - - {/* Language Switcher Mobile */} -
- setIsOpen(false)} - className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-all ${ - locale === "en" - ? "bg-stone-900 text-white" - : "bg-stone-100 text-stone-600 hover:bg-stone-200" - }`} - > - EN - - setIsOpen(false)} - className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-all ${ - locale === "de" - ? "bg-stone-900 text-white" - : "bg-stone-100 text-stone-600 hover:bg-stone-200" - }`} - > - DE - -
- - + + + ); + })}
- - )} - +
+
+
); } diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx index a6a821d..c6a119c 100644 --- a/app/components/Hero.tsx +++ b/app/components/Hero.tsx @@ -1,6 +1,5 @@ "use client"; -import { motion } from "framer-motion"; import { useLocale, useTranslations } from "next-intl"; import Image from "next/image"; import { useEffect, useState } from "react"; @@ -29,16 +28,8 @@ const Hero = () => {
{/* Liquid Ambient Background */}
- - +
+
@@ -46,45 +37,25 @@ const Hero = () => { {/* Left: Text Content */}
- +
{getLabel("hero.badge", "Student & Self-Hoster")} - +

- + {getLabel("hero.line1", "Building")} - - + + {getLabel("hero.line2", "Stuff.")} - +

{t("description")}

- + {/* Right: The Photo */} - +
Dennis Konkol @@ -116,18 +76,14 @@ const Hero = () => {
dk0.dev
- +
- +
- +
); }; diff --git a/next.config.ts b/next.config.ts index 538efd8..43d83f0 100644 --- a/next.config.ts +++ b/next.config.ts @@ -34,6 +34,7 @@ const nextConfig: NextConfig = { experimental: process.env.NODE_ENV === "production" ? { + optimizeCss: true, optimizePackageImports: ["lucide-react", "framer-motion", "three", "@react-three/fiber"], } : { diff --git a/package-lock.json b/package-lock.json index 925448c..9c90b7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,6 +56,7 @@ "@types/react-dom": "^19", "@types/sanitize-html": "^2.16.0", "autoprefixer": "^10.4.24", + "critters": "^0.0.23", "cross-env": "^7.0.3", "eslint": "^9", "eslint-config-next": "^15.5.7", @@ -7260,6 +7261,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", + "dev": true, + "license": "ISC" + }, "node_modules/brace-expansion": { "version": "1.1.12", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", @@ -7847,6 +7855,22 @@ "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==", "license": "MIT" }, + "node_modules/critters": { + "version": "0.0.23", + "resolved": "https://registry.npmjs.org/critters/-/critters-0.0.23.tgz", + "integrity": "sha512-/MCsQbuzTPA/ZTOjjyr2Na5o3lRpr8vd0MZE8tMP0OBNg/VrLxWHteVKalQ8KR+fBmUadbJLdoyEz9sT+q84qg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "chalk": "^4.1.0", + "css-select": "^5.1.0", + "dom-serializer": "^2.0.0", + "domhandler": "^5.0.2", + "htmlparser2": "^8.0.2", + "postcss": "^8.4.23", + "postcss-media-query-parser": "^0.2.3" + } + }, "node_modules/cross-env": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", @@ -7910,6 +7934,23 @@ "node": ">=16" } }, + "node_modules/css-select": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz", + "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/css-to-react-native": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", @@ -7921,6 +7962,19 @@ "postcss-value-parser": "^4.0.2" } }, + "node_modules/css-what": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz", + "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", @@ -13532,6 +13586,19 @@ "node": ">=8" } }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/nwsapi": { "version": "2.2.23", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.23.tgz", @@ -14252,6 +14319,13 @@ } } }, + "node_modules/postcss-media-query-parser": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", + "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==", + "dev": true, + "license": "MIT" + }, "node_modules/postcss-nested": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", diff --git a/package.json b/package.json index 22daca0..cce599a 100644 --- a/package.json +++ b/package.json @@ -87,10 +87,10 @@ "three": "^0.183.1" }, "browserslist": [ - "last 2 Chrome versions", - "last 2 Firefox versions", - "last 2 Safari versions", - "last 2 Edge versions" + "chrome >= 100", + "firefox >= 100", + "safari >= 15", + "edge >= 100" ], "devDependencies": { "@eslint/eslintrc": "^3", @@ -106,6 +106,7 @@ "@types/react-dom": "^19", "@types/sanitize-html": "^2.16.0", "autoprefixer": "^10.4.24", + "critters": "^0.0.23", "cross-env": "^7.0.3", "eslint": "^9", "eslint-config-next": "^15.5.7", @@ -121,11 +122,5 @@ "tsx": "^4.20.5", "typescript": "5.9.3", "whatwg-fetch": "^3.6.20" - }, - "browserslist": [ - "chrome >= 100", - "firefox >= 100", - "safari >= 15", - "edge >= 100" - ] + } } diff --git a/tailwind.config.ts b/tailwind.config.ts index 3578171..6564f76 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -11,6 +11,15 @@ export default { ], theme: { extend: { + keyframes: { + fadeIn: { + "0%": { opacity: "0", transform: "translateY(10px)" }, + "100%": { opacity: "1", transform: "translateY(0)" }, + }, + }, + animation: { + "fade-in": "fadeIn 0.5s ease-out", + }, colors: { background: "var(--background)", foreground: "var(--foreground)",