How I optimized this site to load before you finished reading this headline
Let's be completely honest: the modern web is bloated. Most portfolios today load 5MB of high-resolution images, three different custom cursor tracking scripts, and a full three-dimensional WebGL physics engine just to display a text link that says 'About Me'. It's not just lazy engineering; it's a crime against mobile bandwidth.
When I set out to build this site, I had one target: 100/100 on Google PageSpeed Insights. No compromise. No exceptions. Here is exactly how I trimmed the fat to achieve a First Contentful Paint (FCP) of 0.4 seconds and a Cumulative Layout Shift (CLS) of 0.00.
Deep Dive
First, I purged the custom cursor scripts. You don't need a canvas-rendered cursor trail following your mouse. It delays main-thread execution by up to 120ms on low-end devices. Default browser cursors exist for a reason—use them.
Second, I isolated client-side interactivity. In React/Next.js architectures, developers tend to slap 'use client' at the very top of their page.tsx file. That turns the entire page into a JavaScript-heavy client bundle. By converting our SEO landing page into a Server Component and moving the interactive accordion lists to a small client-side FaqSection sub-component, we dropped our initial bundle size by 65%.
Finally, I tackled layout shifts. Cumulative Layout Shift occurs when server-rendered elements differ in dimensions compared to their client-mounted states. By matching the skeleton placeholder of our Theme Toggle button to the exact border and padding dimensions of the final loaded theme button, we eliminated CLS entirely.
Summary
The result? A site that feels instant because it actually is. Clean HTML, deferred client components, and zero layout shift.