阿部寛のホームページに挑み続けたらすごいHPができた話

「自称下り最速のホームページを持つ男」として、私は阿部寛さんのホームページの読み込み速度に挑戦し続けました。その結果、単なる速度競争を超えた、真のハイパフォーマンスWebサイトが誕生しました。

技術スタックの選定

Astro + Alpine.js の採用理由

---
// Astro Islands Architecture
import Hero from '../components/Hero.astro';
import ContactForm from '../components/ContactForm.vue';
---

<Layout title="Ultra Fast Website">
  <Hero />
  <!-- 必要な部分のみJavaScriptを読み込み -->
  <ContactForm client:load />
</Layout>

画像最適化戦略

<!-- AVIF形式での画像配信 -->
<picture>
  <source srcset="hero-480w.avif 480w, hero-800w.avif 800w" type="image/avif">
  <source srcset="hero-480w.webp 480w, hero-800w.webp 800w" type="image/webp">
  <img src="hero-800w.jpg" alt="Hero image" loading="lazy">
</picture>

パフォーマンス最適化の結果

• Lighthouse Score: 100/100/100/100
• First Contentful Paint: 0.3秒
• Largest Contentful Paint: 0.5秒
• Cumulative Layout Shift: 0

Cache-Control戦略

// Firebase Hosting設定
{
  "headers": [
    {
      "source": "**/*.@(jpg|jpeg|gif|png|webp|avif)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "max-age=31536000, immutable"
        }
      ]
    }
  ]
}

この挑戦を通じて、単なる「速さ」を超えた、ユーザー体験を重視したWebサイト設計の重要性を学びました。

高性能Webサイトの構築にご興味がある方は、お問い合わせからご相談ください。