WordPressからAstroへ移行してサイト表示速度を改善した記録

3秒まとめ#

WordPress で運用していた写真ポートフォリオサイトを Astro に移行した
移行作業は数時間で完了し、専用ツールでサクッと移行できた
Lighthouse スコアが大幅改善し、めちゃくちゃ速いサイトになった
開発サーバの起動やビルドも高速で、開発体験も良好

どんな人向けの記事？#

WordPress から静的サイトへの移行を検討している方
Astro に興味があり、実際の移行事例を知りたい方
写真やポートフォリオサイトを高速化したい方
静的サイトジェネレーターの導入を考えている方

背景#

業務で Astro を調査していたら、Astro で作ったウェブサイトの表示速度がめちゃくちゃ速くて驚愕しました。開発サーバの起動やビルドも爆速です。

Astroって何？ Astro は、コンテンツ重視の高速なウェブサイトを構築するための静的サイトジェネレーター（SSG）です。デフォルトで JavaScript をクライアントに送信せず、必要な部分だけをハイドレーション（動的に機能を追加）する「アイランドアーキテクチャ」を採用しています。

WordPress からの移行ツールも充実しているので、重い腰を上げて WordPress で運用していた写真ポートフォリオサイトを Astro に移行してみました。

そもそも、なぜ自分でサイトを構築したのかというと、 Flickr や 500px といった写真共有サービスだと 1 ファイルあたりの最大容量制限があって、高画質なファイルをフル解像度でアップロードできる場所がなかったんです。だから自分でホスティングする方針にしました。

概要#

まずは見た目の変化

Before#

After#

移行手順の概要#

WordPress から Astro への移行手順を以下にまとめます。各ステップの詳細はこの後に説明します。

Astroのテンプレート探し
Astroプロジェクトの初期化
WordPressからのフルバックアップ取得
バックアップデータのAstroへの復元
Astro上での各種調整
Cloudflare Pagesへのデプロイ

1. Astroのテンプレート探し#

Astro公式サイトのテーマライブラリから、Freeのフラグをオンにしてサクッと探します。

今回見つけたのがこちらの Photography Portfolio Template。トップページと一覧ページだけのシンプルな構成です。

もともと写真を掲載しているだけのサイトだし、Astro 初心者だったのでシンプルな方が良いと思ってこれを選びました。

2. Astroプロジェクトの初期化#

Astro公式のテンプレートであれば、コマンド1発で初期化できます。

npm create astro@latest -- --template blog

でも今回は公式提供のテーマじゃないので、GitHubリポジトリをcloneして使います。MITライセンスなので安心。

git clone [email protected]:rockem/astro-photography-portfolio.git

完成品をcloneしてるので、あとは自分好みにパパっと変更していくだけ。デモ用の写真データがそのまま入ってるので、それをサンプルとして参照しながら置き換えていく感じです。元データがサンプルとして使えるので学習が捗りました。

リポジトリをcloneしただけだとパッケージが古い可能性があるので、最新版にアップデートしておきます。

npm update

3. WordPressからのフルバックアップ取得#

まず、WordPressの管理画面から「ツール」→「エクスポート」を選択してフルバックアップを取得します。

ここで取得できるのはテキストデータ（投稿内容、メタデータなど）だけです。アップロードされている画像などのアセットはURL形式のリンクとして記録されてます。

でも大丈夫！　後述するAstroインポートツールが、XMLファイル内のアセットURLを検知して自動的にローカルにダウンロードしてくれます。優秀！

エクスポートファイルは portfolio.WordPress.2025-10-23.xml みたいなファイル名で保存されます。

4. バックアップデータのAstroへの復元#

wordpress-export-to-markdownというツールを使います。

このツールを実行すると、エクスポートファイルの場所や展開方法について対話形式で質問されるので、サクッと答えていきます。

今回は投稿のタイトルやカテゴリ、画像ファイルが整理された状態で取得できれば十分だったので、そのように選択しました。

npx wordpress-export-to-markdown

Starting wizard...
✓ Path to WordPress export file? photoportfolio-yukimatsukura.WordPress.2025-10-24.xml
✓ Put each post into its own folder? No
✓ Add date prefix to posts? No
✓ Organize posts into date folders? No
✓ Save images? All Images

Parsing...
54 normal posts found.
1 pages found.
81 attached images found.
55 images scraped from post body content.

Saving posts...
55 posts to save.
✓ [post] shou-ren-in
✓ [post] umbrella
✓ [post] maple-on-the-moss
✓ [post] tanuki-ko
✓ [post] skytree
✓ [post] skytree-2
✓ [post] tokyo-tower
✓ [post] summer-morning
✓ [post] relais-la-suvera
✓ [post] ginza
✓ [post] relais-la-suvera
✓ [post] colosseo
✓ [post] grotta-azzurra
✓ [post] venetia
✓ [post] positano
✓ [post] eiffel-tower

5. Astro上での各種調整#

今回選択したテンプレートでは、src/gallery/gallery.ymlファイルで画像とそのメタ情報を管理してます。

collections:
  - id: kyoto
    name: Kyoto
  - id: japan
    name: Japan
images:
  - path: japan/dsc_7137.jpg
    meta:
      title: calm moss and water
      description: Calm pound and stone with moss.
      collections:
        - japan
      tags:
        - Koishikawa Korakuen Garden
        - Japan
        - Tokyo
    exif:
      captureDate: 2015-11-28T10:40:21.000Z
      fNumber: 8
      focalLength: 70
      iso: 125
      model: NIKON D800
      shutterSpeed: 15
      lensModel: 24.0-70.0 mm f/2.8

先ほど展開したWordPressのデータを、このYAML形式にコンバートします。ファイルの変換はCline（AIコーディングアシスタント）経由でClaude 3.5 Sonnetに実行させました。めちゃくちゃ便利。

その他、以下のようなカスタマイズを実施：

UIの調整
写真1枚ごとにパーマリンクを持つ個別ページの追加
Sitemap XMLの追加
トップページにHeroセクションの追加
レスポンシブ対応のためのサムネイル画像を複数サイズで生成
dark mode対応
footerの追加
prefetchの追加
robots.txtの追加

6. Cloudflare Pagesへのデプロイ#

Cloudflare PagesでGitHubと連携して、今回作ったリポジトリを指定。リポジトリのタイプをAstroと選んでデプロイボタンをポチッと押したら、約2分後にデプロイ完了しました。速い！

使ってるドメインはCloudflareで管理してるので、ProxyモードをオンにするだけでCDN経由での高速配信が実現できてます。

パフォーマンスベンチマーク#

Lighthouseって何？ Googleが提供するWebサイトの品質測定ツールです。パフォーマンス、アクセシビリティ、SEOなどを100点満点で評価してくれます。

カスタムフォントの読み込みと、画像拡大表示用のLightBoxライブラリのJavaScriptロードがあるので、スコアはやや抑えめです。でも、特別な最適化を施さずにこれだけリッチな見た目と機能があるのに、このスコアは優秀！

トップページのLighthouseスコア#

写真個別ページのLighthouseスコア#

Coverage Treemap#

JavaScript/CSSの使用状況を可視化したTreemapも超シンプル。無駄なコードがほぼないですね。下の方のチャンクはGoogle Tag Managerです。

比較用にNext.jsのTreemapも貼っておきます。こちらのサイトです。

アセットのサイズは、Next.jsでは162KiB、では24.5KiBなのでAstroは約15％のサイズです（さいとが違うのでなんとも言えませんが、概算だけ掴んでもらえればと思います）

実際に使ってみた感想#

良かった点#

めちゃくちゃ速い！

プロダクション環境でのレンダリングが爆速。静的HTMLを生成するからサーバーサイドの処理が不要
開発サーバの起動も速いし、ファイル変更時のホットリロードもサクサク

自動最適化が優秀

画像の遅延読み込み、CSSの最小化など、Webパフォーマンスに必要な最適化を勝手にやってくれる
何も考えずにデプロイしてもそこそこ速いサイトになる

モダンな開発体験

React/Next.jsなどのUI構築が主流の昨今、Astroは生のHTMLに近い形でレンダリングを高速化しつつ、開発体験はReactっぽい
必要な部分だけJavaScriptを使う「アイランドアーキテクチャ」で、パフォーマンスと開発効率を両立してる

ホスティングコストが安い

Cloudflareの無料プランで運用できるので、コストゼロ！

正直なところ、ここは微妙#

Astro専用の構文を覚える必要がある

.astro ファイルの書き方を新しく学ぶ必要があります
とはいえ、HTML と JavaScript の知識があれば割とすぐ慣れました

まとめ#

WordPress から Astro への移行、想像以上にスムーズでした。

専用の移行ツールが充実してるので、技術的なハードルは低いです。数時間程度の作業で移行完了しました。

結果として得られた成果：

圧倒的なパフォーマンス向上 - Lighthouse スコアが大幅改善
保守性の向上 - Git 管理で変更履歴を追跡できるように
運用コストの削減 - サーバーレスで無料ホスティング（Cloudflare Pages 最高）
開発体験の向上 - 開発サーバもビルドも爆速

WordPress みたいな動的 CMS から静的サイトジェネレーターへの移行を検討してる方、Astro はかなり有力な選択肢だと思います。

次のステップとしては、さらなるパフォーマンス最適化（画像の最適化、フォントのサブセット化など）にも挑戦してみたいですね。