パフォーマンス最適化

Astroのビルドプロセスを最適化するためのベストプラクティスを紹介します。これらの手法を組み合わせることで、ウェブサイトの読み込み速度とユーザーエクスペリエンスを大幅に向上させることができます。

画像はウェブサイトのパフォーマンスに最も大きな影響を与える要素の一つです。Astroでは公式の@astrojs/imageインテグレーションを使用することで、画像の最適化を自動化できます。

@astrojs/imageの利用:
Terminal window
```
npx astro add @astrojs/image
```
これにより、画像のサイズ変更、フォーマット変換（WebP, AVIFなど）、遅延ロードを自動的に処理できます。
レスポンシブな画像の生成: astro:assetsコンポーネントを使うと、異なる画面サイズに対応したsrcset属性が自動的に生成されます。これにより、ユーザーのデバイスに最適なサイズの画像が配信されます。
```
---
import { Image } from 'astro:assets';
import myImage from '../assets/my-image.jpg';
---
<Image src={myImage} alt="My awesome image" width={500} height={300} />
```

Astroは「アイランドアーキテクチャ」という独自の仕組みを採用しており、デフォルトでページごとにJavaScriptを分割（コードスプリッティング）します。これにより、必要なコンポーネントのJavaScriptだけがロードされ、ページの軽量化が図られます。

動的インポート (Dynamic Imports): 特定の条件下でのみ必要なコンポーネントやライブラリは、動的にインポートすることで、初期ロード時のJavaScriptサイズをさらに削減できます。例えば、ボタンをクリックしたときにだけ表示されるモーダルなどに有効です。
```
---
const HeavyComponent = Astro.Component(() => import('../components/HeavyComponent.astro'));
---
<button id="show-modal">Show Modal</button>
<HeavyComponent />
```

CDN (Contents Delivery Network) の活用: コンテンツを世界中のサーバーに分散配置することで、ユーザーに最も近いサーバーからコンテンツを配信し、読み込み時間を短縮します。
キャッシュの設定: HTTPヘッダーのCache-Controlを設定することで、ブラウザが一度ダウンロードしたアセットを再利用できるようにし、再訪問時の読み込みを高速化します。
サードパーティスクリプトの遅延ロード: Google Analyticsや広告スクリプトなどの外部スクリプトは、ページのレンダリングをブロックする可能性があります。asyncやdefer属性を使って、これらのスクリプトを非同期で読み込むことで、初期表示速度を改善できます。
アセットの圧縮とミニファイ: CSS、JavaScript、HTMLを圧縮し、不要な空白やコメントを削除することでファイルサイズを削減します。Astroはデフォルトでこれらの処理を自動的に行います。

Astro が SSR をサポートしている場合、サーバー側でデータを取得・処理し、完成した HTML をクライアントに送信できます。これにより、ブラウザでの JavaScript 実行を最小限に抑え、ページの初期表示を高速化できます。

ユースケース: API からデータを取得して動的なページを生成する場合。

例: ブログ記事一覧を API から取得する際、ビルド時にすべての記事を静的に生成する代わりに、SSR を利用してユーザーがアクセスしたときに最新のデータをフェッチしてレンダリングします。これにより、頻繁に更新されるコンテンツでも常に最新の状態を保ちつつ、クライアント側でのデータ取得処理をなくせます。

Astro では、リンクにdata-astro-prefetch属性を追加することで、ユーザーが次にアクセスする可能性のあるページを事前に読み込んでおくことができます。これにより、次のページへの遷移が非常に速く感じられます。

ユースケース: ナビゲーションメニューや記事一覧ページなど、ユーザーが次にクリックする可能性が高いリンクに使用します。
```
<a href="/about" data-astro-prefetch>About Us</a>
```
ユーザーがこのリンクにマウスオーバーするか、一定時間アイドル状態になると、Astro は /about ページの HTML とアセットをバックグラウンドでプリロードします。

現代のウェブサーバーは、HTTP/2 や HTTP/3 をサポートしており、従来の HTTP/1.1 よりも効率的にデータを転送できます。これらのプロトコルは、単一の接続で複数のリクエストを同時に処理するため、アセットの並列ダウンロードが可能です。

ユースケース: 多くの画像やスクリプトをロードするページで、ブラウザが一度にすべてのリソースをダウンロードできるようになります。
設定: ほとんどのモダンなホスティングサービス（Vercel, Netlify, Cloudflare など）は、デフォルトで HTTP/2 をサポートしています。サーバーを自分で設定する場合は、ウェブサーバー（Nginx, Apache など）で HTTP/2 を有効にする必要があります。

ウェブフォントはデザインに不可欠ですが、適切に扱わないとページの読み込みを遅くする原因になります。

対策:
- フォントのサブセット化: 必要な文字だけを含むようにフォントをサブセット化することで、ファイルサイズを削減できます。
- font-display プロパティの使用: CSS の @font-face ルールに font-display: swap; を追加することで、ウェブフォントが読み込まれるまでの間、代替フォントを表示し、コンテンツの表示をブロックしないようにできます。

PWAは、ウェブサイトにネイティブアプリのような体験を提供する技術です。

サービスワーカーの活用: PWAの中核となるサービスワーカーを利用することで、ウェブサイトをオフラインでも利用できるようにしたり、初回訪問時のアセットをキャッシュして再訪問時の読み込みを高速化したりできます。Astroでは、astro-pwaのようなインテグレーションを使ってPWA機能を簡単に追加できます。

これらの手法を組み合わせることで、ユーザーに高速で快適なウェブ体験を提供することができます。