Astroを選んだ理由 — 表示速度とモダン開発を両立するために

前回の記事では、WordPressをやめた理由とmicroCMSへ乗り換えた経緯をお伝えしました。では、フロントエンド（見た目を表示する部分）はどうしたのか？　今回はそこをお話しします。

そもそもAstroとは？

AstroはWebサイトを作るためのフレームワークです。「フレームワーク」と聞くと難しそうですが、要するに「Webサイトを効率よく作るための土台」のことです。

特徴的なのは、デフォルトでJavaScriptをほぼ出力しないという設計思想です。

Webサイトの表示が遅くなる原因のひとつが、JavaScriptの読み込みです。多くの現代的なフレームワークはJavaScriptありきで動いているため、ページを開いた瞬間に大量のJSを読み込みます。Astroはこれを逆転の発想で解決しています。

「必要な場所だけ動かす」という考え方

Astroには「アイランドアーキテクチャ」という仕組みがあります。

難しい名前ですが、考え方はシンプルです。静的でよい部分はHTMLで出力し、動きが必要な部分だけJavaScriptを使うというものです。

たとえばiCCRAFTのサイトでは、ヘッダーやフッター、料金表などは静的なHTMLとして出力し、スライダーやインタラクションが必要な部分だけReactを使って動かしています。これにより、全体の読み込みを最小限に抑えることができました。

実際に速くなったか？

結論から言うと、明らかに速くなりました。

以前のWordPressサイトと比べると、ページの初期表示にかかる時間が大幅に短縮されています。特にモバイル環境での改善が顕著で、Googleのページ評価ツールでも高いスコアを出せるようになりました。

サイトの表示速度はSEO（検索エンジンの評価）にも影響するため、これは副次的なメリットとしても効いています。

microCMSとの相性がいい

もうひとつAstroを選んだ理由が、microCMSとの組み合わせの良さです。

前回の記事でお伝えしたように、iCCRAFTではコンテンツ管理をmicroCMSに移行しています。AstroはAPIからデータを取得してページを生成する仕組みが標準で備わっており、microCMSのような「ヘッドレスCMS」と組み合わせることを想定した設計になっています。

実際の開発でも、microCMSのAPIからブログ記事や制作実績を取得してページを作る処理がとてもスムーズに書けました。

まとめ

WordPressをやめてmicroCMSに移行したことで「コンテンツ管理」の課題は解決しました。そしてAstroを採用することで「表示速度」と「開発のしやすさ」という課題も同時に解決できました。

3つの選択（WordPress脱却 → microCMS → Astro）がそれぞれ連動していて、結果として以前より管理しやすく、速く、安全なサイトになっています。

次回は、デプロイ先として選んだCloudflare Pagesについてお話しする予定です。