How Constantly Taking on Hiroshi Abe’s Homepage Led to an Incredible Website

As the “self-proclaimed man with the fastest downhill homepage,” I kept taking on Hiroshi Abe’s website. As a result, I ended up creating a high-performance website that goes beyond just competing on speed. By the way, Hiroshi Abe’s site is still fast today. All due respect.

Technology Stack Selection

Why We Adopted Astro + Alpine.js

We chose this combination because it allows us to use JavaScript “only when and where it is needed.” Astro removes unnecessary JavaScript as much as possible at build time, keeping pages lightweight. That said, without at least some animations like screen transitions, it feels lacking for a corporate website. Therefore, we used Alpine.js—an ultra-simple alternative to SPA tools like Vue, React, and Angular—to implement animations with the bare minimum of JavaScript.

Image Optimization Strategy

Images are the heavy baggage of the modern web. That’s why I adopted the modern image format, AVIF.

Performance Optimization Results

We finally did it. On Lighthouse, Desktop Performance and SEO reached perfect scores.

• Lighthouse (Desktop): Performance 100, Accessibility 99, Best Practices 93, SEO 100
• Lighthouse (Mobile): Performance 95, Accessibility 99, Best Practices 93, SEO 100
• First Contentful Paint: Desktop 0.5s, Mobile 1.9s
• Largest Contentful Paint: Desktop 0.6s, Mobile 2.3s

Cache-Control Strategy

Cache is our friend. With a 1-year (31,536,000 seconds) cache setting, images loaded once will not be reloaded for an entire year. It also saves users data bandwidth. Everyone wins.

// Firebase Hosting設定
{
  "headers": [
    {
      "source": "**/*.@(jpg|jpeg|gif|png|webp|avif)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "max-age=31536000, immutable"  // 1年間のキャッシュ！
        }
      ]
    }
  ]
}

Through this challenge, I learned the importance of designing websites with a focus on user experience, not just raw speed. Speed is great, but usability is even greater.