WordPressからNext.jsに移行して表示速度3倍になった話

Web制作📖 7分で読める
Next.jsWordPressWeb制作表示速度SEO

WordPress サイトの表示が遅い、プラグインの更新が面倒、セキュリティ対策に追われている——そういう相談を受けることが増えた。

自分自身も以前 WordPress を使っていたが、Next.js に移行してから管理コストが激減した。速度面での変化が特に大きくて、Google PageSpeed Insights のスコアが 40台から 90台に跳ね上がった。「3倍」というのは表示時間ベースの体感だが、ツールの数値でも同程度の差が出ている。

この記事では、移行の判断基準・実際の手順・やってみてわかった注意点を書く。

WordPress で感じていた限界

WordPress 自体の機能は十分すぎるくらいある。ブログ、固定ページ、WooCommerce を使ったEC、会員サイト。何でも作れる。

ただ、シンプルな情報発信サイトやポートフォリオに使うには、構造が重すぎる。

  • 毎月の更新作業: プラグインのアップデートを放置するとセキュリティリスクになる。気づくとダッシュボードに「6件の更新があります」と出ている
  • 表示速度の限界: PHPでHTMLを動的生成するため、サーバーの処理時間が発生する。キャッシュプラグインで改善できるが、設定が複雑
  • 無駄なオーバーヘッド: ブログ記事を1本表示するだけなのに、データベース接続・PHP処理・プラグイン処理が走る

SEO を意識して Core Web Vitals を改善しようとすると、プラグインが競合したり、テーマが重かったりと、問題の切り分けだけで時間を食う。

Next.js 移行で何が変わるか

Next.js の最大の特徴は**静的生成（SSG）**だ。ビルド時にHTMLを生成しておき、ユーザーがアクセスしたときはそのファイルを返すだけ。データベースへの問い合わせも、PHPの処理も発生しない。

結果として：

  • TTFB（最初のバイトが届くまでの時間）が圧縮される: CDNから静的ファイルを返すだけなので、サーバー応答時間が数ms〜数十msになる
  • LCP（最大コンテンツの表示時間）が改善される: Google が重視するCore Web Vitalsの指標。静的ファイルは有利
  • プラグイン管理がなくなる: コードで完結するので、定期メンテナンスの手間が減る
  • Vercel で無料デプロイできる: git push でデプロイが完了する。サーバー代も不要

実際に移行したサイト（このサイトも含む）で、PageSpeed スコアが平均で 50点前後から 90点台に上がった。

移行の手順（ざっくり）

1. コンテンツのエクスポート

WordPress の管理画面から「ツール → エクスポート」でXMLをダウンロードする。ブログ記事・固定ページ・メディアが含まれる。

記事数が多い場合は、wordpress-export-to-markdown などのツールでMarkdownに一括変換できる。

2. Next.js プロジェクトのセットアップ

npx create-next-app@latest my-site
cd my-site

App Router を使う構成がおすすめ。src/app 配下にページを置く。

ブログ記事は MDX（Markdownの拡張）で管理するのが楽。content/blog/ 以下に .mdx ファイルを置いて、getAllPosts() で読み込む形にすると、記事追加がファイル1枚で完結する。

3. デザインの再実装

WordPress のテーマは流用できない。CSS/コンポーネントを書き直す必要がある。

正直ここが一番手間かかる。ただ、Tailwind CSS を使うと素のCSSより格段に速く書けるし、WordPress のテーマに依存しないので後から修正もしやすい。

シンプルなブログサイトなら、既存デザインを参考に1〜3日で再現できる。

4. Vercel へのデプロイ

GitHub リポジトリを Vercel に接続するだけ。無料プランで商用サイトも運用できる。

vercel.com → New Project → GitHubリポジトリを選択 → Deploy

初回デプロイで https://your-site.vercel.app のURLが発行される。独自ドメインの設定もVercelのダッシュボードから数分でできる。

やってみてわかった注意点

動的機能はサーバー側の処理が必要になる。 お問い合わせフォーム・会員機能・決済機能を Next.js だけで作るには、Vercel Functions か別途APIサーバーが必要。WordPress の Contact Form 7 のような手軽さはない。

画像の移行は手動作業が発生する。 WordPress のメディアライブラリから画像を全部ダウンロードして、public/ 以下に再配置する必要がある。記事内の画像パスも書き換えが必要。

SEO リダイレクトを忘れると順位が落ちる。 WordPress の URL 構造（/2024/01/article-title/）と Next.js のURL構造（/blog/article-title）が違う場合、301リダイレクトを設定しないと既存のSEO評価が引き継がれない。next.config.ts の redirects 設定で対応できる。

WordPress を使い続けていい場合

Next.js への移行が向いていないケースもある。

  • 非エンジニアが自分で記事更新する場合 → WordPress の管理画面は直感的で使いやすい。GutenbergエディタをNext.jsで再現するのは大変
  • WooCommerce で EC を運営している場合 → 移行コストに見合わないことが多い
  • 高機能なプラグインに依存している場合 → 機能の再実装が発生する

情報発信サイト・ポートフォリオ・LP専用サイトなら、移行のメリットが大きい。管理コストが下がって、表示速度が上がって、セキュリティリスクが減る。

WordPress からの移行作業、自分でやるのが難しければ代わりに対応します。既存サイトの URL 構造を引き継ぎながら Next.js に移行した実績もあるので、まずは現状のサイトを見せてもらえれば見積もります。