WordPress から Astro への移行ガイド: 2026年の7ステップ
Astroは2026年のコンテンツ多用型サイト向けWordPress最高の代替ツール -- ブログ、ドキュメント、マーケティングページ -- デフォルトではゼロJavaScriptを配信し、Core Web VitalsでWordPressを60~80ポイント上回ります。過去2年間、私は約12のWordPressサイトをAstroに移行してきました。50投稿の個人ブログから3,000ページのドキュメントポータルまで様々な規模ですが、結果は一貫して劇的です:サブ秒のロード時間、Lighthouseスコア95以上、ホスティング料金が99ドル/月からなんとゼロに低下しています。
これは「XML をエクスポートして祈るだけ」というガイドではありません。私が実際に使っているプロセスを詳しく説明します。これには、計画しないと痛い目に遭う落とし穴も含まれます -- 壊れたURL、見落とされた画像、孤立したショートコード、そしてみんなを引っかかる質問であるコメントシステムです。
目次
- WordPressの代わりにAstroを選ぶ理由
- WordPress移行向けAstro vs Next.js vs Gatsby
- 7ステップ移行プレイブック
- WordPressデータをAstroコンテンツコレクションにエクスポート
- SEOを保護する: 301リダイレクト、サイトマップ、スキーマ
- ホスティングコスト比較
- FAQ
WordPressの代わりにAstroを選ぶ理由
WordPressはほとんどのコンテンツサイトでは過度に設計されています。PHP、MySQL、ウェブサーバー、キャッシングレイヤー、そしておそらくキャッシュレイヤーを実行しています。あなたはおそらく基本的に静的コンテンツを提供するだけのために、数十個のプラグインを実行しています。すべてのページロードはデータベースにヒットします。すべてのプラグインは潜在的なセキュリティホールです。すべての更新は何も壊れないという祈りです。
Astroはこのモデルを反転させます。ビルド時に静的HTMLにページを事前レンダリングします。データベースはありません。サーバーサイドランタイムはありません。PHPはありません。出力はプレーンなHTML、CSS、そして--明示的にオプトインする場合のみ--JavaScriptです。
これは移行全体で一貫して見られるものです:
| メトリクス | WordPress(マネージド) | Astro(静的) | 改善 |
|---|---|---|---|
| Lighthouseパフォーマンス | 34-55 | 95-100 | +60-80ポイント |
| First Contentful Paint | 2.8-4.2秒 | 0.4-0.8秒 | ~80%高速化 |
| Total Blocking Time | 200-800ms | 0-10ms | ~98%削減 |
| ページサイズ(一般的なブログ投稿) | 1.5-3.5 MB | 80-250 KB | ~90%削減 |
| Time to Interactive | 4-8秒 | 0.5-1.0秒 | ~85%高速化 |
| HTTPリクエスト | 60-130 | 8-15 | ~85%削減 |
これらはチェリーピックではありません。実際の移行からの平均値です。キャッシングプラグインとCDNを使用しているWordPressサイトでさえ、リクエストごとにより多くの作業を行っているため、静的Astroビルドに追いつくことはできません。
セキュリティの観点
WordPressはインターネット上で最も攻撃されるCMSです。悪いからではなく、どこにでもあり、攻撃面が大きいため--PHP実行、データベースアクセス、ファイルアップロード、XML-RPC、REST APIエンドポイント、管理者ログインページ。毎月新しいプラグインの脆弱性がもたらされます。
グローバルエッジネットワーク上のCDNにデプロイされたAstroサイトは、本質的には攻撃面がゼロに近いです。エクスプロイト対象となるサーバーはなく、ブルートフォース対象となる管理者パネルはなく、SQL注入対象となるデータベースはありません。あなたのサイトはグローバルエッジネットワーク上にあるHTMLファイルのフォルダです。
開発者経験
WordPressテーマをカスタマイズしようとしたことがあれば、その苦痛を知っています:HTMLと混在するPHPテンプレートタグ、暗記が必要なテンプレート階層、保守不可能なモンスターに成長するfunctions.phpファイル、絶え間ないプラグイン競合。
Astroはコンポーネントベースのアーキテクチャを使用し、HTMLにスーパーパワーを備えたファイル形式です。AstroページのReact、Vue、Svelte、またはSolidコンポーネントを使用できます--ただし、実際にインタラクティビティが必要な場合のみです。ブログまたはマーケティングサイトの場合、おそらく必要ありません。
---
// src/pages/blog/[...slug].astro
import { getCollection } from 'astro:content';
import BlogLayout from '../../layouts/BlogLayout.astro';
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map(post => ({
params: { slug: post.slug },
props: { post },
}));
}
const { post } = Astro.props;
const { Content } = await post.render();
---
<BlogLayout title={post.data.title} description={post.data.excerpt}>
<article>
<h1>{post.data.title}</h1>
<time datetime={post.data.date.toISOString()}>
{post.data.date.toLocaleDateString()}
</time>
<Content />
</article>
</BlogLayout>
それは完全な動的なブログ投稿ページです。WordPressで同じ明確性でそれを行ってみてください。
WordPress移行向けAstro vs Next.js vs Gatsby
Astro
Astroはコンテンツサイト向けに特別に構築されました。その「アイランドアーキテクチャ」は、特定のコンポーネントがそれを必要としない限り、ゼロJSをシップすることを意味します。コンテンツコレクションは、組み込みスキーマ検証を備えたタイプセーフなマークダウン処理を提供します。ビルド時間は速く、メンタルモデルはシンプルで、Reactを理解する必要はありません。ブログ、ドキュメント、マーケティングサイトの場合、2026年では明らかな選択肢です。このルートを探索している場合、当社のAstro開発チームはあらゆる規模の移行を処理してきました。
Next.js
Next.jsは完全なアプリケーションフレームワークです。認証、サーバーサイドレンダリング、APIルート、ミドルウェア、およびブログに必要のない100他のものを処理します。あなたがインタラクティビティを必要としているかどうかに関わらず、あなたはすべての訪問者にReactランタイムをシップします(App Routerのサーバーコンポーネントは役立ちますが、基本的なバンドルはまだより重いです)。Next.jsは、SaaSプロダクトまたはユーザーダッシュボード、電子商取引、リアルタイム機能などの重い動的機能を持つサイトを構築している場合に意味があります。WordPressからのコンテンツ移行の場合?それは過剰です。ただし、あなたのサイトがこれらの機能を必要とする場合、当社のNext.jsチームは正しいアーキテクチャを理解するのを助けることができます。
Gatsby
Gatsbyは本質的にメンテナンスモードです。Netlifyは2023年にそれを買収し、開発は着実に停滞しています。一度は賢いと思われたGraphQLデータレイヤーは、現在は不必要な複雑さのように見えます。大規模なサイトのビルド時間は苦痛です。プラグインエコシステムは古い。2026年で新しいGatsbyプロジェクトを開始することは強くお勧めしません。現在Gatsby上にいる場合、Astroへの移行は実際にはWordPressからの移行よりも簡単です。あなたのコンテンツはおそらくすでにマークダウン形式だからです。
| 機能 | Astro | Next.js | Gatsby |
|---|---|---|---|
| デフォルトJSシップ | 0 KB | ~85-100 KB | ~70-90 KB |
| コンテンツコレクション | 組み込み、タイプセーフ | 手動セットアップ | GraphQLレイヤー |
| ビルド時間(1000投稿) | ~30-45秒 | ~60-90秒 | ~120-300秒 |
| 学習曲線 | 低い | 中~高 | 中程度 |
| 最適用途 | コンテンツサイト | ウェブアプリ | レガシープロジェクト |
| アクティブな開発 | 非常にアクティブ | 非常にアクティブ | 最小限 |
| SSRサポート | オプション | デフォルト | 限定的 |
7ステップ移行プレイブック
これが私が従う正確なプロセスです。手を振ることはありません。
ステップ1: WordPress サイトを監査
コードに触れる前に、何を扱っているかを知る必要があります。WordPress管理者にログインして、インベントリを取ります。
# WP-CLIがインストールされている場合(そうすべき)
wp post list --post_type=post --format=csv --fields=ID,post_title,post_name,post_date > posts.csv
wp post list --post_type=page --format=csv --fields=ID,post_title,post_name,post_date > pages.csv
wp plugin list --format=table
wp theme list --format=table
すべてのプラグインとそれが何をするかを文書化します。Astroの同等品を見つけるか、削除する必要があります。一般的なもの:
- Yoast SEO → Astroの組み込み
<head>管理 +@astrojs/sitemap - Contact Form 7 → Formspree、Formspark、またはサーバーレス関数
- WP Super Cache / W3 Total Cache → 不要(サイトはすでに静的)
- Wordfence / Sucuri → 不要(保護するサーバーはない)
- Google Analyticsプラグイン → 直接スクリプトタグまたはPartytownの統合
- WooCommerce → Snipcart、Shopify Buy Button、または専用の電子商取引プラットフォーム
ステップ2: WordPress コンテンツをエクスポート
2つのオプションがあります:XMLエクスポートまたはREST API。ほとんどのサイトではXMLエクスポートをお勧めします。1回で全てをキャプチャするため。
WordPress管理者で:ツール → エクスポート → すべてのコンテンツ → エクスポートファイルをダウンロード
これにより、すべての投稿、ページ、コメント、カスタムフィールド、カテゴリ、タグ、メディア参照を含む.xmlファイルが得られます。
大規模なサイト(1000以上の投稿)の場合、REST APIアプローチはより信頼性があります:
// scripts/export-wp.mjs
import fs from 'fs/promises';
import path from 'path';
const WP_URL = 'https://your-wordpress-site.com/wp-json/wp/v2';
const PER_PAGE = 100;
async function fetchAllPosts() {
let page = 1;
let allPosts = [];
while (true) {
const res = await fetch(
`${WP_URL}/posts?per_page=${PER_PAGE}&page=${page}&_embed`
);
if (!res.ok) break;
const posts = await res.json();
if (posts.length === 0) break;
allPosts = allPosts.concat(posts);
console.log(`Fetched page ${page} (${allPosts.length} posts total)`);
page++;
}
return allPosts;
}
const posts = await fetchAllPosts();
await fs.writeFile('wp-posts.json', JSON.stringify(posts, null, 2));
console.log(`Exported ${posts.length} posts`);
ステップ3: Astro プロジェクトをスキャフォールド
npm create astro@latest my-new-site
cd my-new-site
# 必要な統合を追加
npx astro add mdx
npx astro add sitemap
npx astro add tailwind
# 追加の依存関係をインストール
npm install sharp @astrojs/rss
移行中にはテーマではなく、最小限のセットアップで開始することをお勧めします。テーマは、移行中に必要ない複雑さを追加します。最初にコンテンツを機能させてから、スタイルを設定します。
ステップ4: コンテンツを Markdown に変換
これが本当の仕事が始まる場所です。WordPressのHTMLコンテンツをクリーンなマークダウンに変換し、適切なfrontmatterを備えている必要があります。
私はturndownを使用したカスタムNode.jsスクリプトを使用しています:
npm install turndown @wordpress/block-serialization-default-parser
// scripts/convert-posts.mjs
import TurndownService from 'turndown';
import fs from 'fs/promises';
import path from 'path';
const turndown = new TurndownService({
headingStyle: 'atx',
codeBlockStyle: 'fenced',
});
// WordPress固有のHTMLを処理
turndown.addRule('wpCaption', {
filter: (node) => {
return node.nodeName === 'DIV' &&
node.className.includes('wp-caption');
},
replacement: (content, node) => {
const img = node.querySelector('img');
const caption = node.querySelector('.wp-caption-text');
return `\n`;
},
});
const posts = JSON.parse(await fs.readFile('wp-posts.json', 'utf-8'));
for (const post of posts) {
const slug = post.slug;
const markdown = turndown.turndown(post.content.rendered);
const frontmatter = `---
title: "${post.title.rendered.replace(/"/g, '\\"')}"
date: ${post.date}
excerpt: "${(post.excerpt.rendered || '').replace(/<[^>]*>/g, '').trim().replace(/"/g, '\\"')}"
categories: [${(post._embedded?.['wp:term']?.[0] || []).map(c => `"${c.name}"`).join(', ')}]
tags: [${(post._embedded?.['wp:term']?.[1] || []).map(t => `"${t.name}"`).join(', ')}]
featuredImage: "${post._embedded?.['wp:featuredmedia']?.[0]?.source_url || ''}"
draft: false
---`;
const content = `${frontmatter}\n\n${markdown}\n`;
await fs.mkdir('src/content/blog', { recursive: true });
await fs.writeFile(`src/content/blog/${slug}.md`, content);
console.log(`Converted: ${slug}`);
}
ステップ5: メディアをダウンロードして整理
WordPressはメディアをwp-content/uploads/YYYY/MM/ディレクトリに保存します。すべてをダウンロードして参照を更新する必要があります。
# 簡単で雑な:uploads ディレクトリの wget ミラー
wget -r -np -nH --cut-dirs=2 -P public/uploads \
https://your-wordpress-site.com/wp-content/uploads/
# マークダウンファイルの古いURLを見つけて置換
find src/content/blog -name '*.md' -exec sed -i '' \
's|https://your-wordpress-site.com/wp-content/uploads/|/uploads/|g' {} +
本番移行では、sharpライブラリを使用したAstroの画像最適化を使用してすべてをWebPに変換し、ビルド時にレスポンシブサイズを生成します。これだけで画像ペイロードを40~60%削減できます。
ステップ6: レイアウトとコンポーネントを構築
AstroレイアウトをWordPressテーマ構造に一致(または改善)させます。最低限、以下が必要です:
src/layouts/BaseLayout.astro-- HTMLシェル、<head>、ナビゲーション、フッターsrc/layouts/BlogLayout.astro-- 単一投稿テンプレートsrc/pages/blog/index.astro-- ページネーション付きブログリストsrc/pages/blog/[...slug].astro-- 動的投稿ページsrc/pages/index.astro-- ホームページ
ステップ7: テスト、リダイレクト、デプロイ
ローカルでビルドして、すべてを確認してください:
npm run build
npm run preview
# 壊れたリンクを確認
npx linkinator http://localhost:4321 --recurse
リダイレクトを設定(以下で詳しく説明)、DNSを構成、デプロイします。ホスティングオプションについてはコスト比較セクションで説明します。
WordPressデータをAstroコンテンツコレクションにエクスポート
Astroのコンテンツコレクションは、最高の機能の1つです。スキーマ検証が組み込まれたマークダウンコンテンツへのタイプセーフアクセスを提供します。移行されたWordPressコンテンツに対してこれらを正しく設定する方法は次のとおりです。
スキーマを定義
// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';
const blog = defineCollection({
loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
schema: z.object({
title: z.string(),
date: z.coerce.date(),
excerpt: z.string().optional(),
categories: z.array(z.string()).default([]),
tags: z.array(z.string()).default([]),
featuredImage: z.string().optional(),
draft: z.boolean().default(false),
}),
});
export const collections = { blog };
この美しさ:移行された投稿のいずれかが欠落またはmalformed frontmatterを持っている場合、Astroはビルド時に明確なエラーメッセージで通知します。サイレント失敗はもうありません。
WordPress ショートコードを処理
これはほとんどの移行ガイドがスキップする落とし穴です。あなたのWordPress投稿が[gallery]、[caption]、[embed]、またはプラグインからのカスタムショートコードなどのショートコードを使用している場合、マークダウンで生テキストとして表示されます。
3つのオプションがあります:
- 変換中に事前処理 -- 変換スクリプトで正規表現ルールを記述して、ショートコードをマークダウンまたはHTML同等物に変換
- MDXを使用 -- 影響を受けた投稿を
.mdxに変換し、ショートコードを置き換えるAstroコンポーネントを作成 - 手動で検索して置換 -- 小規模なサイトの場合、最速のアプローチは時々です
// 例:変換中にWordPressギャラリーショートコードを変換
function convertShortcodes(content) {
// [gallery ids="1,2,3"]
content = content.replace(
/\[gallery ids="([^"]+)"\]/g,
(match, ids) => {
const imageIds = ids.split(',');
return imageIds.map(id => `}.jpg)`).join('\n');
}
);
// [youtube url="..."]
content = content.replace(
/\[youtube[^\]]*url="([^"]+)"[^\]]*\]/g,
(match, url) => `<iframe src="${url}" width="560" height="315" frameborder="0"></iframe>`
);
return content;
}
コンテンツを照会
コンテンツがコレクション内にある場合、照会は簡単です:
---
// src/pages/blog/index.astro
import { getCollection } from 'astro:content';
import BlogLayout from '../../layouts/BlogLayout.astro';
const posts = (await getCollection('blog'))
.filter(post => !post.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---
<BlogLayout title="Blog">
<ul>
{posts.map(post => (
<li>
<a href={`/blog/${post.slug}/`}>
<h2>{post.data.title}</h2>
<time>{post.data.date.toLocaleDateString()}</time>
<p>{post.data.excerpt}</p>
</a>
</li>
))}
</ul>
</BlogLayout>
SEOを保護する: 301リダイレクト、サイトマップ、スキーマ
このセクションは重要です。失敗した移行は、一夜にして何年ものSEO資産を破壊する可能性があります。このセクションをスキップしないでください。
URL構造と301リダイレクト
WordPressのデフォルトはURLのような/2024/03/my-post-title/または/?p=123です。すべての古いURLを新しいAstroの同等物にマップする必要があります。
最初に、古いURLの完全なリストを生成してください:
# WP-CLIを使用
wp post list --post_type=post,page --field=url > old-urls.txt
# またはサイトマップをクロール
curl -s https://your-site.com/sitemap.xml | grep -oP '<loc>\K[^<]+'
Vercelの場合、プロジェクトルートにvercel.jsonを作成します:
{
"redirects": [
{ "source": "/2024/03/my-old-post/", "destination": "/blog/my-old-post/", "permanent": true },
{ "source": "/:year(\\d{4})/:month(\\d{2})/:slug/", "destination": "/blog/:slug/", "permanent": true },
{ "source": "/category/:slug/", "destination": "/blog/category/:slug/", "permanent": true },
{ "source": "/feed/", "destination": "/rss.xml", "permanent": true }
]
}
Netlifyの場合、public/フォルダに_redirectsを使用してください:
/2024/03/my-old-post/ /blog/my-old-post/ 301
/category/* /blog/category/:splat 301
/feed/ /rss.xml 301
Cloudflare Pagesの場合、Netlifyと同じ形式で_redirectsを使用するか、ダッシュボード内のBulk Redirectsを使用します。
サイトマップ生成
@astrojs/sitemap統合が自動的に処理します:
// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://your-new-site.com',
integrations: [sitemap()],
});
デプロイ後、Google Search Consoleで新しいサイトマップをすぐに送信してください。また、リダイレクトされていない存在しないURLの削除リクエストを送信してください。
構造化データ / スキーママークアップ
Yoastがスキーママークアップを処理している場合、複製する必要があります。再利用可能なコンポーネントを作成してください:
---
// src/components/ArticleSchema.astro
const { title, date, excerpt, image, author = 'Your Name' } = Astro.props;
const schema = {
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": title,
"datePublished": date,
"description": excerpt,
"image": image,
"author": {
"@type": "Person",
"name": author
}
};
---
<script type="application/ld+json" set:html={JSON.stringify(schema)} />
RSS フィード
RSSサブスクライバーを忘れないでください:
// src/pages/rss.xml.js
import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
export async function GET(context) {
const posts = await getCollection('blog');
return rss({
title: 'Your Site',
description: 'Your description',
site: context.site,
items: posts.map(post => ({
title: post.data.title,
pubDate: post.data.date,
description: post.data.excerpt,
link: `/blog/${post.slug}/`,
})),
});
}
ホスティングコスト比較
これはビジネスケースが移行になるポイントです。
| ホスティングシナリオ | 月額費用 | 年間費用 | 注釈 |
|---|---|---|---|
| WP Engine(マネージドWordPress) | $30-60 | $360-720 | スタートアップ~成長プラン |
| Kinsta(マネージドWordPress) | $35-70 | $420-840 | スターター~ビジネスプラン |
| Flywheel(マネージドWordPress) | $15-30 | $180-360 | 小~個人プラン |
| 自己ホスト(DigitalOcean +メンテナンス) | $12-24 | $144-288 | 更新時間含まず |
| Vercel上のAstro(ホビー) | $0 | $0 | 月100GBの帯域幅 |
| Netlify上のAstro(無料) | $0 | $0 | 月100GBの帯域幅 |
| Cloudflare Pages上のAstro(無料) | $0 | $0 | 無制限の帯域幅 |
| Vercel上のAstro(Pro) | $20 | $240 | 1TBの帯域幅、チーム機能 |
コンテンツサイトの大多数 -- ブログ、ポートフォリオ、ドキュメントサイト、マーケティングサイト -- の場合、Vercel、Netlify、またはCloudflare Pagesの無料層は十分以上です。グローバルCDNから静的ファイルをサーブしています。月100,000ページビューを取得しているサイトでさえ、無料層制限に傷がつきません。
算数を詳しく説明しましょう。マネージドWordPressホスティングに月$50を払っている場合、それは年$600です。3年以上で、それは$1,800です。プレミアムプラグインライセンス(Yoast Premium $99/年、Elementor Pro $59/年、WP Rocket $59/年)を追加すると、年間$800~$1,000のコンテンツサイトに付属しています。無料でホストできます。
移行自体は一度限りのコストです。自分で処理する場合、それはあなたの時間です。当社のヘッドレスCMS開発サービスを通じてチームを雇用する場合、投資利益率は通常、ホスティング節約だけから6~12ヶ月で均等化します--パフォーマンスとSEO改善をカウント前に。詳細については、当社のプライシングページをご確認ください。
しかし、動的機能はどうですか?
最も一般的な反論:「私のWordPressサイトには、フォーム、検索、コメント、電子商取引があります。」
- お問い合わせフォーム:Formspree(無料層:月50提出)、Formspark、またはシンプルなサーバーレス関数
- 検索:Pagefind(無料、完全にクライアント側で実行、静的サイト向けに構築)--それは信じられません
- コメント:Giscus(無料、GitHubバック)、またはどうしても必要な場合はDisqus
- 電子商取引:Snipcart、Shopify Lite、またはStripe Checkout
- ニュースレターサインアップ:ConvertKit、Mailchimp、またはButtondownへの直接API呼び出し
これらのいずれもサーバーが必要です。これらのいずれもが有意義なコストを追加しません。
FAQ
WordPress から Astro への移行にはどのくらいの時間がかかりますか?
典型的なブログで50~200投稿の場合、自分で行う場合は1~2週間のパートタイム作業を期待します。コンテンツ変換は通常、良いスクリプトがあれば1日の仕事です。Astroレイアウトとコンポーネントのビルドにはデザイン複雑さによって2~4日かかります。テスト、リダイレクト設定、デプロイメントにはさらに1~2日かかります。大規模なサイト(500以上の投稿)またはプラグイン依存関係のある複合カスタム投稿タイプのサイトの場合、3~6週間を予算します。それを引き渡したい場合は、当社のチームに連絡してください--通常、移行は2~4週間で完了します。
Astro は 1000 以上の投稿を持つ WordPress ブログを処理できますか?
絶対に。3000以上の投稿を持つサイトを移行しましたが、ビルド時間は2分未満に保たれました。コンテンツコレクションは大規模なデータセット向けに最適化されており、すべてがスタティックHTMLにコンパイルされるため、コンテンツボリュームに関係なくランタイムパフォーマンスペナルティはありません。ビルドステップは、スケールが重要な唯一の場所です。Astroのビルドパフォーマンスは優れています--Gatsby や Next.js を大規模な静的コンテンツで大きく上回っています。
Astro は WordPress コメントをサポートしていますか?
ネイティブではなく、正直なところ、それはバグではなく機能です。WordPressのコメントはスパムの磁石で、継続的なモデレーションが必要です。Astroサイトの場合、最良のオプションは:Giscus(GitHub Discussionsを使用--無料、追跡なし、開発者オーディエンスに最適)、Disqus(古い定番、無料層に広告がある)、Commento(プライバシー重視、月$5)、またはTursoやSupabaseのようなデータベースを使用したカスタムソリューション。既存のWordPressコメントを保存したい場合は、エクスポートしてスタティックコンテンツとして表示し、新しいコメントの場合はこれらのサービスのいずれかを使用してください。
Astro は WordPress より高速ですか?
比較にもなりません。静的Astroサイトは、最も最適化されたWordPress設定も上回ります。それは基本的なボトルネック:サーバーサイド処理を排除するため。WordPressはPHPを実行し、データベースを照会し、ページをアセンブルし、--キャッシュされていない限り、すべてのリクエストに対して--送信する必要があります。Astroはすべてを事前構築します。訪問者は、彼らに近いCDNエッジノードから直接事前レンダリングされたHTMLを受け取ります。典型的な改善は80~90%高速なロード時間と60~80ポイントLighthouseスコア改善です。
マイ WordPress 管理者と WYSIWYG エディタはどうなりますか?
WordPressの管理パネルを失います。ほとんどの開発者にとって、それはほっとしています。マークダウンファイルを直接編集してください。より速く、より移植可能です。非技術的なコンテンツエディターが視覚的インターフェースが必要な場合は、ヘッドレスアプローチを検討してください:WordPressをコンテンツバックエンドとして実行し続け、Astroをフロントエンドとして使用してください。または、Sanity、Contentful、Storyblok、またはKeystatic(GitHub ベースのエディターを持つ)などのヘッドレス CMS と Astro をペアリングしてください。当社のヘッドレスCMS開発サービスは、チーム向けの正しいコンテンツバックエンドを選択するのに役立ちます。
移行後、Google ランキングが低下しますか?
そうすべきではありません。ほとんどの場合、改善してください。--ただし、リダイレクトを正しく処理した場合のみ。すべての古いURLが機能するか、新しいURLに301リダイレクトされる必要があります。起動した同じ日にGoogle Search Consoleに新しいサイトマップを送信してください。最初の30日間のIndex Coverage レポートを監視してください。移行から2~3か月以内に有機トラフィックが15~30%増加したサイトを見てきました。純粋にCore Web Vitals改善からです。Googleはページ体験信号をランキング要因として使用しているため。
WordPress をヘッドレス CMS として保持し、フロントエンドとして Astro を使用できますか?
はい、これは素晴らしい中間ルートです。WordPressの管理とエディター体験を保持しますが、PHPフロントエンドを完全に廃棄します。Astroはビルド時にWordPress REST API(またはWPGraphQL)からコンテンツをフェッチし、静的ページを生成します。WordPressをどこかにホストする必要があります。ホスティングコストは節約できません。しかし、すべてのフロントエンドパフォーマンスの利点が得られます。WordPressの編集ワークフローに大きく投資しているチームの場合、これはしばしば実用的な選択肢です。
Astro を使用するには React またはその他の JavaScript フレームワークを知っている必要がありますか?
いいえ。Astroコンポーネントは.astroファイル形式を使用します。frontmatterスクリプトブロック付きHTMLのように見えます。HTMLとCSSを書ければ、Astroサイトを構築できます。JavaScriptフレームワーク(React、Vue、Svelte)はオプション--検索ウィジェット、検証付きのフォーム、または画像カルーセルのようなインタラクティブなクライアント側のコンポーネントが必要な場合のみ、それらを持ち込みます。ブログまたはマーケティングサイトの場合、Reactに触れずにサイト全体を構築できます。