💻

【続・下り最速は】Astro使って阿部寛のホームページよりも早いホームページを作りたい【ウチっちゃ】

2024/08/04に公開

Firebase

Alpine.js

Astro

tech

やっほー、みんな！
宇宙野クラウディアよ！
今日は最新技術を使ってビルド爆速のモダンなホームページを作る話をするけん、楽しく見てってね！

まえがき：前回の挑戦を振り返って

まず、うちの代表が以前書いた「阿部寛のホームページより速いサイトを作る」って記事があるんたい。
まだ読んでない人は、ここから見てみてね！

【下り最速は】Astro使って阿部寛のホームページよりも早いホームページを作りたい【この俺だ】

簡単に言うと、こんな感じたい：

阿部寛さんのホームページが速すぎる（最速0.09秒！）
それよりも速いサイトを作ろうと思って、Astroってフレームワークを使った
なんと阿部寛さんのサイトより0.028秒速い0.08秒を記録した！

でもね、そこから8ヶ月経って、もっとパワーアップしたんよ！
今回はその進化した姿を見せるけん、楽しみにしといてね！

うちらの進化！阿部寛さんに圧勝するための改善ポイント

前回の記事を出したあと、いろんな人から指摘をもらって、もっと良くなったんたい！
ここがポイントっちゃ：

1. Alpine.jsの最適化

前はAlpine.jsっていうJavaScriptフレームワークをちょっと無駄な方法で読み込んどったんたい。
でも今回は、importするバージョンを固定して、リダイレクトを改善したと！これでもっと速くなったよ！

src/layouts/Layout.astro

// 改善前
//インポート先にhttps://esm.sh/をつけることで、CDNからモジュールを読み込むことができる
import Alpine from 'https://esm.sh/alpinejs';
import collapse from 'https://esm.sh/@alpinejs/collapse';

// 改善後
import Alpine from 'https://esm.sh/alpinejs@3.14.0';
import collapse from 'https://esm.sh/@alpinejs/collapse@3.12.3';

これで無駄なリダイレクトがなくなって、読み込みが速くなったんよ！

ほんとはnode_modulesっていうところから読み込めるともっと早くなるはずなんやけどエラーが出て出来んかった・・・
これは次回の宿題やね！

src/layouts/Layout.astro

//ほんとはこうしたかったっちゃ(´･ω･`)
import Alpine from './node_modules/alpinejs/dist/module.esm.js';
import collapse from './node_modules/@alpinejs/collapse/dist/module.esm.js';

2. 画像フォーマットの進化

前はWebPっていう画像フォーマットを使っとったけど、今回はAVIFっていうもっと新しいフォーマットに変えたと！AVIFはWebPよりもさらに圧縮率が高くて、同じ画質でもファイルサイズが小さくなるんたい。

それだけやなくて、同じ画像でもサイズの違うやつを用意して、画面の大きさに合わせて最適なサイズの画像を表示するようにしたんよ！

src/components/home/Hero.astro

<img
    class="h-auto w-full rounded-3xl"
    src="/assets/hero-480w.avif"
    srcset="/assets/hero-480w.avif 480w,
      /assets/hero-800w.avif 800w,
      /assets/hero.avif 1600w"
    sizes="(max-width: 768px) 100vw,
      (max-width: 1200px) 100vw,
      1280px"
    alt="Hero picture"
    width="1280"
    height="853"
  />

こうすることで、スマホでも、PCでも、ちょうどいいサイズの画像が表示されるようになったんたい！

3. Cache-Controlでさらなる高速化

サーバー側でCache-Controlっていう設定をしたんよ。これは、あんまり変わらない画像やページの基本的な部分を長い間キャッシュ（保存）しておくっていう仕組みたい。

firebase.json

"headers": [
      {
        "source": "**/*.@(jpg|jpeg|png|gif|webp|css|js|avif)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "**/*.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=0, must-revalidate"
          }
        ]
      },
      {
        "source": "**/*.@(json|xml|txt)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=86400"
          }
        ]
      },
	@@ -33,4 +51,4 @@
      }
    ]