【実験ログ】WordPressからAstroに移行して表示速度が10倍になった話
きっかけ: WordPress、遅くない?
2026年3月、最初のメディアサイト「coffee-explorer.net」をWordPress(世界でもっとも使われているWebサイト作成ツール)で構築しました。テーマを選んで、プラグイン(追加機能を入れるための拡張パーツ)を入れて、記事を書いて、公開。ここまでは順調でした。
ところが、Lighthouse(Google が提供するWebページの品質チェックツール)でパフォーマンスを測ると、スコアが60点台。ページの読み込みに3秒以上かかる。スマホだともっと遅い。
「コンテンツはちゃんとしてるのに、遅いだけで離脱される」──これはもったいない。
そこで、次のサイトからは**Astro(アストロ、表示速度に特化した最新のWebフレームワーク)**で構築することにしました。結果的に4つのサイトをAstroで作り、表示速度は劇的に改善。この記事は、その比較実験の全記録です。
WordPress vs Astro: 表示速度の比較結果
つまり、表示速度が約10倍、Lighthouseスコアが65点 → 98点になったということです。
実験の背景: 5つのサイトを作った話
今回の実験の全体像を説明します。約2週間で5つのメディアサイトを構築しました。
構築した5つのサイト
1サイト目をWordPressで、2〜5サイト目をAstroで作った。この「同じ人が、ほぼ同じ時期に、両方の方法で作った」というのが、今回の比較実験として価値がある部分です。
WordPress vs Astro: 完全比較表
両方を実際に使ってみた上での、正直な比較です。
| 項目 | WordPress | Astro |
|---|---|---|
| 初期セットアップ | 30分〜1時間。レンタルサーバーで簡単インストール | 2〜5時間。ターミナル操作とコードが必要 |
| 表示速度 | 遅め(Lighthouse 50〜70点)。プラグインが増えるほど重くなる | 非常に速い(Lighthouse 95〜100点)。静的HTMLなので最速 |
| ホスティング費用 | 月額1,000〜3,000円(エックスサーバー等) | 無料(Cloudflare Pages、Netlify等) |
| 記事の更新 | ブラウザの管理画面から簡単に更新 | MDXファイルを編集してGitにpush。VSCodeが必要 |
| デザインの自由度 | テーマで選ぶ。カスタマイズはテーマ次第で限界がある | 完全に自由。HTMLとCSSを直接書ける |
| プラグイン/拡張性 | 6万以上のプラグイン。何でもできるが、セキュリティリスクも | npmパッケージを使用。プラグインはWordPressほど豊富ではない |
| SEO | Yoast SEOプラグインが優秀。設定はかんたん | 自分で設定が必要だが、表示速度の速さがSEOに有利 |
| セキュリティ | 攻撃対象になりやすい。定期的なアップデートが必須 | 静的サイトなので攻撃対象が極めて少ない |
| メンテナンス | WordPress本体・プラグイン・PHPの更新が必要 | ほぼ不要。ビルドが通れば壊れない |
| 学習コスト | 低い。プログラミング不要 | 中〜高い。HTML/CSS/Markdownの知識が必要 |
なぜAstroは速いのか
Astroが速い理由を、技術的な背景を含めて説明します。
WordPressとAstroの仕組みの違い
1. ユーザーがページにアクセスする
2. サーバーがPHPを実行する
3. データベース(MySQL)に問い合わせる
4. HTML を動的に生成する
5. プラグインのJavaScriptを読み込む
1. ビルド時にすべてのHTMLが事前生成される
2. CDN(世界中に配置されたサーバー群)に配信される
3. ユーザーがアクセスすると、最寄りのCDNからHTMLが即座に返される
つまり、WordPressは「アクセスのたびにページを作る」のに対して、Astroは「あらかじめ作っておいたページを配信するだけ」ということです。料理で例えると、WordPressは注文を受けてから調理する「フルオーダー」、Astroは「作り置きのお弁当を渡す」イメージです。
Astroの『アイランドアーキテクチャ』
Astroはデフォルトでは JavaScript を一切ブラウザに送りません。インタラクティブ(操作に反応する)な部分が必要な場合だけ、その部分にだけ JavaScript を送る「アイランドアーキテクチャ」という仕組みを採用しています。だからページの大部分は超軽量なHTMLだけで表示されるのです。
ホスティング費用の比較: 月額1,000円 vs 0円
今回の実験でもっとも衝撃だったのが、ホスティング費用(Webサイトをインターネット上に公開するための費用)の差です。
年間ホスティング費用の比較
4サイトをAstro + Cloudflare Pagesで運用すると、WordPressと比べて年間52,800円の節約。5年続ければ26万円以上の差になります。個人で複数サイトを運営するなら、この差は無視できません。
つまり、「Astro + Cloudflare Pagesなら、サイトをいくつ作ってもホスティング費用がゼロ」ということです。
WordPressで困ったこと
WordPressのcoffee-explorer.netを構築する中で、実際にぶつかった問題を率直に書きます。
WordPress構築で困った5つのこと
Astroに切り替えてよかったこと
逆に、2サイト目以降をAstroに切り替えてから感じたメリットです。
Astroのここが良かった
じゃあ、WordPressはダメなのか?
いいえ、そんなことはありません。WordPressを選ぶべきケースは確実にあります。
WordPress を選ぶべきケース
結論: 目的で選ぶ
「速さとコスト重視の個人メディア」ならAstro。「機能の豊富さと使いやすさ重視」ならWordPress。どちらが優れているかではなく、何を作りたいかで選ぶのが正解です。
移行のリアルな教訓
最後に、この実験を通じて得られた教訓をまとめます。
5つの教訓
FAQ(よくある質問)
Q: 既存のWordPressサイトをAstroに移行するのは大変ですか? A: 記事数にもよりますが、手間はかかります。WordPressの記事をMarkdownに変換するツール(wordpress-export-to-markdownなど)がありますが、完全な自動変換は難しく、手動での修正が必要になります。新規サイトをAstroで作って、古いサイトはWordPressのまま運用するのが現実的です。 Q: Astroでお問い合わせフォームは作れますか? A: はい。Formspree、Netlify Forms、Google Formsなどの外部サービスと組み合わせれば、お問い合わせフォームを設置できます。サーバーサイドの処理は外部サービスに任せて、Astro側はフォームのHTMLだけを提供する仕組みです。 Q: プログラミングの経験がなくてもAstroは使えますか? A: HTMLとCSSの基本的な知識は必要です。ただし、Claude CodeなどのAIツールを使えば、コードの大部分をAIに書いてもらうことができます。「プログラミングは完全に未経験」という方は、まずWordPressから始めるのが安全です。 Q: AstroとNext.jsの違いは何ですか? A: Next.js(ネクストジェイエス)はReactベースのフルスタックフレームワークで、Webアプリケーション(ログイン機能やリアルタイム更新があるサイト)向き。Astroはコンテンツサイト(ブログ、ドキュメント、ポートフォリオ)に特化しています。ブログやメディアサイトなら、Astroのほうがシンプルで速いです。 Q: coffee-explorer.netもAstroに移行する予定はありますか? A: 現時点では予定していません。すでにコンテンツが蓄積されていますし、WordPressのREST APIを使った自動投稿の仕組みも構築済みです。「動いているものは触らない」のがエンジニアリングの原則です。新しいサイトはAstroで作り、既存サイトはそのまま運用する方針です。 Q: Cloudflare Pagesの無料プランで本当に大丈夫ですか? A: 個人サイトやスモールビジネスなら十分です。月500ビルド、帯域幅は無制限。月間数万PV程度のサイトなら問題ありません。月間数百万PV規模になったらPro版(月5ドル)を検討しますが、その頃にはサイトの収益で十分カバーできるでしょう。
まとめ
この記事のまとめ
- WordPressからAstroへの移行で、Lighthouseスコアが65→98点に改善
- 表示速度は3.2秒→0.3秒と約10倍高速化
- ホスティング費用は月額1,100円→0円に削減
- WordPressはEC・チーム運営・クライアントワーク向き、Astroは個人メディア・速度重視向き
- 「どちらが優れているか」ではなく「何を作りたいか」で選ぶのが正解
テクノロジーの選択に正解はありません。大事なのは「自分の目的に合ったツールを選ぶ」こと。この実験ログが、同じ選択に悩む誰かの参考になれば嬉しいです。