Web performance is no longer a vanity metric. With Google's Core Web Vitals prioritizing Interaction to Next Paint (INP) as a major ranking factor, a slow website is effectively invisible.
Recently, I rebuilt my portfolio website and set a goal: achieve a perfect 100/100 score on GTmetrix and PageSpeed Insights with 0ms of blocking time.
Here is the exact playbook of how I did it:
1. The Interaction-Driven Deferral (TBT Optimization)
Third-party scripts (Google Analytics, Auth, etc.) are the biggest killers of Total Blocking Time. Instead of using standard async or defer, I wrote a custom React wrapper that listens for the first user interaction (scroll, click, mousemove) before injecting third-party script tags into the DOM. If the user doesn't interact, the scripts never load.
2. Edge Caching & TTFB Optimization
Your site can't be fast if your server is slow. By utilizing Edge Middleware and aggressive edge caching on Vercel, I reduced my Time to First Byte (TTFB) to 70ms.
3. Font Self-Hosting
Never fetch fonts from Google CDN; the extra DNS handshake costs precious milliseconds. I self-host Inter and JetBrains Mono directly using next/font with display: swap.
4. Modern Image Formats (AVIF/WebP)
All heavy visuals are automatically resized and converted to high-density AVIF formats using Next.js Image Optimization, reducing a 2MB hero banner to under 80KB.
For the full detailed technical post-mortem and server configurations, check out my deep-dive:
-> How to Improve Website Performance: 100/100 GTmetrix
Top comments (0)