AI Cowork Lab
【実験ログ】WordPressからAstroに移行して表示速度が10倍になった話
実験ログ 約40分で読めます

【実験ログ】WordPressからAstroに移行して表示速度が10倍になった話

きっかけ: WordPress、遅くない?

2026年3月、最初のメディアサイト「coffee-explorer.net」をWordPress(世界でもっとも使われているWebサイト作成ツール)で構築しました。テーマを選んで、プラグイン(追加機能を入れるための拡張パーツ)を入れて、記事を書いて、公開。ここまでは順調でした。

ところが、Lighthouse(Google が提供するWebページの品質チェックツール)でパフォーマンスを測ると、スコアが60点台。ページの読み込みに3秒以上かかる。スマホだともっと遅い。

「コンテンツはちゃんとしてるのに、遅いだけで離脱される」──これはもったいない。

そこで、次のサイトからは**Astro(アストロ、表示速度に特化した最新のWebフレームワーク)**で構築することにしました。結果的に4つのサイトをAstroで作り、表示速度は劇的に改善。この記事は、その比較実験の全記録です。

WordPress vs Astro: 表示速度の比較結果

WordPress (coffee-explorer.net)
65
Lighthouseパフォーマンススコア
読み込み: 約3.2秒
Astro (ai-cowork-lab.com 等)
98
Lighthouseパフォーマンススコア
読み込み: 約0.3秒

つまり、表示速度が約10倍、Lighthouseスコアが65点 → 98点になったということです。


実験の背景: 5つのサイトを作った話

今回の実験の全体像を説明します。約2週間で5つのメディアサイトを構築しました。

構築した5つのサイト

coffee-explorer.net
コーヒー探究サイト
WordPress
エックスサーバー
trip-journal.net
旅行記サイト
Astro
Cloudflare Pages
vibe-code-lab.com
バイブコーディング入門
Astro
Cloudflare Pages
ai-cowork-lab.com
AI業務活用サイト
Astro
Cloudflare Pages
ceo-tax.com
経営者向け税金サイト
Astro
Cloudflare Pages

1サイト目をWordPressで、2〜5サイト目をAstroで作った。この「同じ人が、ほぼ同じ時期に、両方の方法で作った」というのが、今回の比較実験として価値がある部分です。


WordPress vs Astro: 完全比較表

両方を実際に使ってみた上での、正直な比較です。

項目WordPressAstro
初期セットアップ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ほど豊富ではない
SEOYoast SEOプラグインが優秀。設定はかんたん自分で設定が必要だが、表示速度の速さがSEOに有利
セキュリティ攻撃対象になりやすい。定期的なアップデートが必須静的サイトなので攻撃対象が極めて少ない
メンテナンスWordPress本体・プラグイン・PHPの更新が必要ほぼ不要。ビルドが通れば壊れない
学習コスト低い。プログラミング不要中〜高い。HTML/CSS/Markdownの知識が必要

なぜAstroは速いのか

Astroが速い理由を、技術的な背景を含めて説明します。

WordPressとAstroの仕組みの違い

WordPress の仕組み

1. ユーザーがページにアクセスする

2. サーバーがPHPを実行する

3. データベース(MySQL)に問い合わせる

4. HTML を動的に生成する

5. プラグインのJavaScriptを読み込む

6. やっと表示される
→ 毎回この処理が走るので遅い
Astro の仕組み

1. ビルド時にすべてのHTMLが事前生成される

2. CDN(世界中に配置されたサーバー群)に配信される

3. ユーザーがアクセスすると、最寄りのCDNからHTMLが即座に返される

4. JavaScriptはデフォルトで0バイト
→ サーバー処理ゼロ、JS ゼロで爆速

つまり、WordPressは「アクセスのたびにページを作る」のに対して、Astroは「あらかじめ作っておいたページを配信するだけ」ということです。料理で例えると、WordPressは注文を受けてから調理する「フルオーダー」、Astroは「作り置きのお弁当を渡す」イメージです。

ℹ️

Astroの『アイランドアーキテクチャ』

Astroはデフォルトでは JavaScript を一切ブラウザに送りません。インタラクティブ(操作に反応する)な部分が必要な場合だけ、その部分にだけ JavaScript を送る「アイランドアーキテクチャ」という仕組みを採用しています。だからページの大部分は超軽量なHTMLだけで表示されるのです。


ホスティング費用の比較: 月額1,000円 vs 0円

今回の実験でもっとも衝撃だったのが、ホスティング費用(Webサイトをインターネット上に公開するための費用)の差です。

年間ホスティング費用の比較

WordPress + エックスサーバー
約13,200円/年
月額1,100円 x 12ヶ月(スタンダードプラン)
Astro + Cloudflare Pages
0円/年
無料プランで十分(月500ビルド、帯域無制限)
※ドメイン費用(年間約1,500円)は別途かかります。これは両方とも同じです。

4サイトをAstro + Cloudflare Pagesで運用すると、WordPressと比べて年間52,800円の節約。5年続ければ26万円以上の差になります。個人で複数サイトを運営するなら、この差は無視できません。

つまり、「Astro + Cloudflare Pagesなら、サイトをいくつ作ってもホスティング費用がゼロ」ということです。


WordPressで困ったこと

WordPressのcoffee-explorer.netを構築する中で、実際にぶつかった問題を率直に書きます。

WordPress構築で困った5つのこと

1. CSSの上書きが地獄
テーマのデザインを少し変えたいだけなのに、テーマのCSSと自分のCSSが競合して、意図しない表示になる。!important(CSSの強制適用指定)を乱用するしかなく、コードがカオスになりました。
2. REST API認証のハマり
AIから自動で記事を投稿するためにREST API(プログラムから記事を投稿する仕組み)を使おうとしたところ、認証の設定で丸1日ハマりました。Application Passwordsプラグインの設定が独特です。
3. プラグインの相性問題
キャッシュプラグインとSEOプラグインが干渉してページが正しく表示されない問題が発生。原因の特定に時間がかかりました。
4. 画像の最適化が面倒
WebP形式への自動変換、レスポンシブ画像(デバイスの画面サイズに合わせて最適な画像を表示する仕組み)の設定に追加のプラグインが必要でした。
5. テキストだけの記事が地味すぎる
WordPress のブロックエディターだけでは、図解やリッチなレイアウトの記事を作るのが難しい。HTMLとCSSを直接書くことになり、結局コーディングが必要になりました。

Astroに切り替えてよかったこと

逆に、2サイト目以降をAstroに切り替えてから感じたメリットです。

Astroのここが良かった

表示速度が圧倒的に速い
Lighthouseスコアが98-100点。何もチューニングしなくても、デフォルトでこのスコアが出ます。WordPressでこのスコアを出そうとすると、キャッシュプラグインやCDNの設定が必要で大変です。
MDXでリッチな記事が書きやすい
MDX(Markdown + JSX。Markdownの中にHTMLコンポーネントを埋め込める形式)で記事を書けるので、この記事のようなリッチなレイアウトがかんたんに作れます。Calloutコンポーネントなど、再利用可能なパーツも自作できます。
テンプレートの使い回しが完璧
site.tsファイルを書き換えるだけで、同じテンプレートから異なるデザインのサイトを量産できます。2サイト目以降は1〜2時間で公開まで完了しました。
Gitでバージョン管理できる
すべてのコードと記事がGit(ファイルの変更履歴を管理するツール)で管理されるので、「いつ何を変えたか」が全部記録されます。WordPressにはこの機能がありません。
セキュリティの心配がほぼゼロ
静的HTMLファイルが配信されるだけなので、サーバーへの侵入やデータベースへの攻撃といったセキュリティリスクがほぼありません。アップデートに追われることもありません。

じゃあ、WordPressはダメなのか?

いいえ、そんなことはありません。WordPressを選ぶべきケースは確実にあります。

WordPress を選ぶべきケース

ECサイト(ネットショップ)
WooCommerceプラグインで本格的なECサイトが構築可能。決済、在庫管理、配送設定まで対応。Astroには同等の機能がありません。
複数人での運営
プログラミングがわからないメンバーでも、管理画面から記事を書ける。チーム運営ならWordPressの管理画面は圧倒的に便利です。
お問い合わせフォーム・会員機能
Contact Form 7やMemberPressなど、サーバーサイドの機能が必要なサイトはWordPressが得意。Astroは静的サイトなので、動的な機能には外部サービスの組み合わせが必要です。
クライアントワーク
お客さんに納品するサイトの場合、管理画面から更新できるWordPressのほうが喜ばれます。「Gitにpushして」とは言えません。
💡

結論: 目的で選ぶ

「速さとコスト重視の個人メディア」ならAstro。「機能の豊富さと使いやすさ重視」ならWordPress。どちらが優れているかではなく、何を作りたいかで選ぶのが正解です。


移行のリアルな教訓

最後に、この実験を通じて得られた教訓をまとめます。

5つの教訓

1
最初の1サイト目にWordPressを選んだのは正解だった
WordPress を触った経験があるからこそ、Astro の良さもわかった。「何でもいいから早く公開する」という最初の一歩には、WordPress の手軽さが活きました。
2
複数サイトを作るならテンプレート化が必須
2サイト目以降の構築時間が劇的に短くなりました。最初にテンプレートの設計に時間をかけたのは大正解。
3
Cloudflare Pagesの安定感がすごい
GitHubにpushするだけで自動デプロイ(サイトの更新)。一度設定してしまえば、あとは何もしなくてもサイトが安定して動き続けます。障害もゼロ。
4
Claude Codeとの相性が抜群
Astroのコードベースはシンプルなので、Claude Codeで記事の生成からデザインの調整まで全部できました。WordPressだとPHPの複雑な構造にAIが迷うことがありました。
5
表示速度はユーザー体験に直結する
Googleの調査では、ページの読み込みが3秒以上かかると53%のユーザーが離脱するとされています。0.3秒で表示されるAstroサイトは、それだけで有利です。

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は個人メディア・速度重視向き
  • 「どちらが優れているか」ではなく「何を作りたいか」で選ぶのが正解

テクノロジーの選択に正解はありません。大事なのは「自分の目的に合ったツールを選ぶ」こと。この実験ログが、同じ選択に悩む誰かの参考になれば嬉しいです。

他のカテゴリの記事