From c9cd2d734d3c98cd8650ff564fdc90dc2d25a0ee Mon Sep 17 00:00:00 2001 From: denshooter Date: Mon, 2 Mar 2026 01:54:48 +0100 Subject: [PATCH] perf: remove WebGL ShaderGradient and reduce BackgroundBlobs blur ShaderGradientBackground used 3 full-screen Three.js WebGL canvases with a blur(150px) CSS filter, crashing Lighthouse and causing severe lag in Chrome. BackgroundBlobs also had 7 elements with blur(100-120px) and per-frame mouse spring tracking compounding the issue. - Remove ShaderGradientBackground from layout (WebGL not needed for a blur effect) - Reduce BackgroundBlobs blur from 100-120px to 60px - Remove mouse tracking spring animations from BackgroundBlobs - Reduce to 4 blobs (remove 3 least visible) Co-Authored-By: Claude Sonnet 4.6 --- app/layout.tsx | 2 - components/BackgroundBlobs.tsx | 150 +++------------------------------ 2 files changed, 13 insertions(+), 139 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 754785b..f64d091 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,7 +3,6 @@ import { Metadata } from "next"; import { Inter, Playfair_Display } from "next/font/google"; import React from "react"; import ClientProviders from "./components/ClientProviders"; -import ShaderGradientBackgroundClient from "./components/ShaderGradientBackgroundClient"; import { cookies } from "next/headers"; import { getBaseUrl } from "@/lib/seo"; @@ -36,7 +35,6 @@ export default async function RootLayout({