AstroでサイトのPageSpeedスコアが完璧になった

AstroでサイトのPageSpeedスコアが完璧になった

最初はAstroを疑っていました。これまでReactやNext.jsを使ってきましたから。しかし、Zimnovateのサイトを構築したところ、Google PageSpeedで満点のスコアを獲得できました。

AstroはデフォルトでJavaScriptを一切配信しません。ほとんどのフレームワークは、静的なコンテンツに対してもブラウザにコードを実行させます。一方、Astroはビルド時にコンポーネントをHTMLへとレンダリングします。

これは「Islands Architecture（アイランド・アーキテクチャ）」を採用しています。ページ全体は静的な「海」であり、インタラクティブな部分だけが「島」となります。海の部分はプレーンなHTMLであり、JavaScriptを使用するのは島の部分だけです。

コードの読み込みタイミングを制御できます：

• client:visible：ユーザーがスクロールした時に読み込みます。
• client:load：即座に読み込みます。
• client:idle：ブラウザが空いている時に読み込みます。

今回はAstro 4.x、Tailwind CSS、そしてSupabaseを使用しました。Supabaseにブログ記事を保存し、Astroがビルド時にそのデータを取得します。ユーザーにはキャッシュされたHTMLが提供されるため、表示は一瞬です。

これはSEOにも役立ちます。検索ボットは即座にHTMLを読み取ることができ、JavaScriptの実行を待つ必要がありません。

1つのプロジェクト内でReact、Vue、またはSvelteを使用できます。これまでのスキルを活かしつつ、より高速なサイトを実現できます。

Astroが適している用途：

• エージェンシーサイト
• ランディングページ
• CMSブログ
• ポートフォリオ

Astroを避けるべき用途：

• ダッシュボード
• リアルタイムアプリ

ウェブは肥大化しています。Astroはこれを解決し、パフォーマンスを最優先にします。

Source: https://dev.to/vincent_mugondora_599ed60/i-built-the-zimnovate-agency-site-with-astro-and-google-pagespeed-gave-it-a-perfect-score-heres-4img

オプションの学習コミュニティ: https://t.me/GyaanSetuAi