perf: optimize PageSpeed Insights performance

- Suppress browser source map references to fix 404/SyntaxErrors - Reduce legacy JS polyfills via browserslist config - Optimize LCP by refining Hero animations and image sizes - Implement video lazy loading and reduce SVG animation complexity - Add preconnect hints for critical origins
2026-02-19 23:21:01 +01:00
parent f1d49416d1
commit 474fa4f3df
7 changed files with 40 additions and 21 deletions
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -112,7 +112,11 @@ export default async function Layout(props: {

  return (
    <html lang={safeLocale} className={`scroll-smooth overflow-x-hidden ${inter.variable}`}>
-      <head></head>
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link rel="preconnect" href="https://img.infra.mintel.me" />
+      </head>
      <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}>
          <RecordModeProvider isEnabled={recordModeEnabled}>
--- a/components/home/Hero.tsx
+++ b/components/home/Hero.tsx
@@ -137,12 +137,12 @@ const containerVariants = {
 } as const;

 const headingVariants = {
-  hidden: { opacity: 1, y: 30, scale: 0.95 },
+  hidden: { opacity: 1, y: 10, scale: 0.98 },
  visible: {
    opacity: 1,
    y: 0,
    scale: 1,
-    transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
+    transition: { duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] },
  },
 } as const;

@@ -167,12 +167,12 @@ const scribbleVariants = {
 } as const;

 const subtitleVariants = {
-  hidden: { opacity: 0, y: 40, scale: 0.95 },
+  hidden: { opacity: 0, y: 20, scale: 0.98 },
  visible: {
    opacity: 1,
    y: 0,
    scale: 1,
-    transition: { duration: 1, ease: [0.25, 0.46, 0.45, 0.94] },
+    transition: { duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94], delay: 0.1 },
  },
 } as const;

--- a/components/home/HeroIllustration.tsx
+++ b/components/home/HeroIllustration.tsx
@@ -154,15 +154,15 @@ export default function HeroIllustration() {
            <stop offset="70%" stopColor="white" stopOpacity="0.4" />
            <stop offset="100%" stopColor="white" stopOpacity="0" />
          </linearGradient>
-          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur stdDeviation="3" result="blur" />
+          <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+            <feGaussianBlur stdDeviation="1.5" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
-          <filter id="soft-glow" x="-100%" y="-100%" width="300%" height="300%">
-            <feGaussianBlur stdDeviation="2" result="blur" />
+          <filter id="soft-glow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur stdDeviation="1" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
@@ -215,10 +215,10 @@ export default function HeroIllustration() {
          </g>

          {/* ANIMATED ENERGY FLOW */}
-          <g filter="url(#glow)">
+          <g>
            {POWER_LINES.map((line, i) => {
-              // Only animate a subset of lines to reduce main-thread work
-              if (i % 2 !== 0) return null;
+              // Only animate a small subset of lines to reduce main-thread work significantly
+              if (i % 5 !== 0) return null;
              const from = gridToScreen(line.from.col, line.from.row);
              const to = gridToScreen(line.to.col, line.to.row);
              const length = Math.sqrt(Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2));
--- a/components/home/ProductCategories.tsx
+++ b/components/home/ProductCategories.tsx
@@ -56,7 +56,7 @@ export default function ProductCategories() {
              alt={category.title}
              fill
              className="object-cover transition-transform duration-1000 group-hover:scale-110"
-              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
+              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 24vw"
            />
            <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-primary-dark/60 transition-all duration-500" />
            <div className="absolute inset-0 p-8 md:p-10 flex flex-col justify-end text-white">
--- a/components/home/VideoSection.tsx
+++ b/components/home/VideoSection.tsx
@@ -6,14 +6,18 @@ export default function VideoSection() {

  return (
    <section className="relative h-[70vh] overflow-hidden bg-primary">
-      <video 
+      <video
        className="w-full h-full object-cover opacity-60"
-        autoPlay 
-        muted 
-        loop 
+        autoPlay
+        muted
+        loop
        playsInline
+        preload="none"
      >
-        <source src="/uploads/2024/12/making-of-metal-cable-on-factory-2023-11-27-04-55-16-utc-2.webm" type="video/mp4" />
+        <source
+          src="/uploads/2024/12/making-of-metal-cable-on-factory-2023-11-27-04-55-16-utc-2.webm"
+          type="video/webm"
+        />
      </video>
      <div className="absolute inset-0 bg-gradient-to-b from-primary/60 via-transparent to-primary/60 flex items-center justify-center">
        <div className="max-w-5xl px-6 text-center animate-slide-up">
@@ -22,9 +26,12 @@ export default function VideoSection() {
              future: (chunks) => (
                <span className="relative inline-block mx-2">
                  <span className="relative z-10 italic text-accent">{chunks}</span>
-                  <Scribble variant="underline" className="w-full h-4 -bottom-2 left-0 text-accent/40" />
+                  <Scribble
+                    variant="underline"
+                    className="w-full h-4 -bottom-2 left-0 text-accent/40"
+                  />
                </span>
-              )
+              ),
            })}
          </h2>
        </div>
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -8,6 +8,7 @@ const nextConfig = {
    // Make sure entries are not disposed too quickly
    maxInactiveAge: 60 * 1000,
  },
+  productionBrowserSourceMaps: false,
  logging: {
    fetches: {
      fullUrl: true,
@@ -353,4 +354,6 @@ const nextConfig = {
  },
 };

-export default withMintelConfig(nextConfig);
+export default withMintelConfig(nextConfig, {
+  hideSourceMaps: true,
+});
--- a/package.json
+++ b/package.json
@@ -129,6 +129,11 @@
      "next": "16.1.6"
    }
  },
+  "browserslist": [
+    "last 3 versions",
+    "not dead",
+    "not ie 11"
+  ],
  "peerDependencies": {
    "@remotion/cli": "^4.0.421",
    "@remotion/google-fonts": "^4.0.421",