The need for speed - quest for perfection

2024-01-03

My Quest for 100% Performance Scores

Building a high-performance website can be challenging, especially when trying to achieve perfect 100% scores across various speed testing tools. For my personal website sureshkhirwadkar.dev, I've been obsessively optimizing every aspect to maximize performance and aim for those elusive 100% scores.

Keeping Things Minimal

One of my key strategies is keeping things as minimal as possible. I designed the site to use as little JavaScript as I could get away with, avoiding bulky libraries and dependencies:


"dependencies": {
  "@mdx-js/loader": "^3.0.0",
  "@next/mdx": "^14.0.4",
  "gray-matter": "^4.0.3",
  "next": "14.0.4",
  "next-mdx-remote": "^4.4.1",
  "react": "^18",
  "react-dom": "^18"
}

By only including the essentials, I avoid a lot of bloat that could slow things down.

Optimizing Images

Images can easily crush site performance, so getting image optimization right is critical. I experimented extensively with Next.js's Image component to dial in the right balance of image quality and performance.

Through manipulating the Image props, I was able to shrink image file sizes and lock in consistent aspect ratios to avoid layout shifts. For above-the-fold images, I had to decide between eager loading them or pushing them below the fold. Both are valid options depending on the context.

For large images intended to be hero images, I typically push them below the fold and have a smaller, simplified image above the fold. On my site, most images are small, so it's less of a concern.

The Results

These optimizations have led to some great results when testing on mobile using PageSpeed Insights - I'm able to achieve a perfect 100% score across the board:

pagespeed

Testing on desktop using tools like GTmetrix and SpeedVitals also show stellar scores:

gtmetrix

svdesktop

However, the mobile SpeedVitals scores still need some work:

SpeedVitals mobile test results

Next Steps

There are still some further improvements I can make:

Reduce image file sizes even further
Switch image formats to AVIF (Next.js Image doesn't leverage Avif automatically)
Consider a CDN like Cloudinary for image serving to bypass Next.js Image limitations
Deploy to Cloudflare Workers to really max out site performance

Achieving 100% scores on performance testing tools takes constant refinement and optimization. But pursuing pixel-perfect performance has been an enjoyable challenge, and I'm pleased with the blazing fast site I've been able to build and iteratively improve. The quest for 100% continues!

Read Count: 0