WordPressからAstroに変えれば速くなる？実測でわかった表示速度の意外な原因

「WordPressは重いから、Astroに変えれば速くなる」

そんな話を聞いて、本当にそうなのか気になりました。

そこで、自分のサイト「SOLEIA」を使って、実際に比べてみることにしました。

ところが、結果は予想外。

同じ条件で測ってみると、WordPressとAstroの表示速度には、ほとんど差がありませんでした。

では、何が表示速度を左右していたのでしょうか？

今回は、実際の測定結果と、原因を調べていった過程をご紹介します。

比べてみた結果

SOLEIAのトップページを、スマホ向けの条件で測りました。WordPress版は本番のサイトのまま。Astro版は、文章・画像・デザインに加えて、計測用のタグ（アクセス解析のGoogleアナリティクスと、画面の動きが見えるClarity）も、WordPressと同じにしています。

測定条件：Mac上のLighthouse・スマホ向け条件・各5回の中央値

差は2点でした。測り方の詳細は、後半に書いています。

点数を押し上げたのは、日本語フォントの軽量化でした

では、どこが遅かったのか。読み込まれるファイルを順に見ていくと、日本語フォント3本（標準・太字・極太）だけで約420KBありました。日本語は文字の種類が多いので、どうしても大きくなります。しかもフォントは、画面を出す前に読み込まれるので、表示を待たせてしまいます。

そこで、トップページで実際に使っている466文字だけを入れた軽いフォントに差し替えました。3本あわせて約170KBです。見た目は変えていません。

本番のWordPressにこの対策を入れると、Googleの無料ツール「PageSpeed Insights」で、59点から74点に上がりました。前半の表の74点は、この対策のあとの数字で、Astro版にも同じフォントを使っています。

フォントの軽量化は、WordPressのままでできます。ただし、これはツールでの測定結果です。実際の訪問者の体感が、どれだけ変わるかは確かめていません。

点数は、測り方によっても変わります

今回の検証では、点数の測り方によって、結果の見え方がかなり変わりました。特に、計測用のタグがあるかどうかで、点数が大きく動く測り方がありました。

どちらの測り方も、ツールの中での測定です。実際に訪れた人が感じる速さを、そのまま表しているわけではありません。この違いは、後半でくわしく書きます。

乗り換える前に見てほしいこと

表示が遅いと感じたとき、「仕組みを変えるしかない」と考える前に、確かめておきたいことが2つあります。

• 日本語フォントが重くなっていないか
• 計測用のタグが、測定結果に影響していないか

どちらも、今のWordPressのままで調べられて、直せるところです。

ここからは、どうやって調べていったかを、順番に書いていきます。測り方や数字を詳しく知りたい方向けです。

測り方

測ったのは、トップページ1枚。スマホを想定した条件です。

使ったのは、PageSpeed Insights（公式）と、自分のMacで動かすLighthouseです。Lighthouseは公式ツールの中身になっている測定ツールで、公式とは分けて記録しています。同じページでも測るたびに数字が変わるので、Macでは基本的に5回ずつ、交互に測りました。

表に出てくる「いちばん大きな画像が表示されるまで」は、スマホで見る人が「やっと出た」と感じるタイミングに近いので、点数と並べて見ています。

まず、本番のWordPressを測ってみる

最初の点数は59点。最初の表示まで3.2秒、いちばん大きな画像が出るまで6.8秒でした（公式のツール）。同じ日にMacで5回測ると、中央値は73点で、69〜100点とばらつきがありました。

このときは、「WordPressをやめれば速くなるのでは」と思っていました。

Astroで同じページを作ってみる

Astroは、動的に配信する使い方もできますが、今回は、できあがったページのファイルをそのまま置く静的な構成にしました。文章・画像・フォント・デザインは本番のものをそのまま移して、ページを配るサービスのCloudflareに置いています。この時点では、計測用のタグは入れていません（あとで、これが大事な点になります）。

Macで5回ずつ測ると、こうなりました。

点数は6点上がり、画像が出るまでも1.5秒ほど短くなりました。ただ、最初の表示まではどちらも3秒台のままで、変わっていません。

フォントを軽くしてみる

最初の表示が変わらないのは、フォントが先に読み込まれているからではないか。そう考えて、前半に書いた軽いフォントを試しました。

Astro版は、79点から96点へ（5回とも96点）。同じ対策を本番のWordPressにも入れ、先に読み込んでおく指定も足すと、公式のツールで59点から74点になりました（途中経過は71点）。

置き場所を変えてみる

それでもAstro版のほうが点数は高いままです。置き場所の違いかもしれないと思い、同じAstro版を、WordPressと同じXserverにも置いて測りました。

差はありませんでした。日本からのスマホで測った範囲では、置き場所は関係なさそうです。

犯人は計測用のタグ？

残る違いは、計測用のタグです。WordPressにはあって、この時点のAstro版にはありませんでした。

試しに、WordPressのページを、できあがったファイルにしてXserverに置き、タグあり・なしで測りました。タグなしは96点、タグありは78点。「タグが原因だ」と、ほぼ決めかけていました。

ただ、Astro版にタグを入れずに比べていては、公平ではありません。

同じタグを入れて、もう一度比べる

Astro版にも、WordPressと同じ種類のタグを入れました。本番の計測データにテストのアクセスが混ざらないよう、テスト専用の計測先を用意して、実際にデータを送りながら測っています。

比べたのは、次の4つです。

5回ずつ、交互に測った結果です。

標準の測り方（ページを実際に取得し、その結果をもとに、遅い環境での表示時間をシミュレーションする方式。公式のツールと同じです）

実際に近い測り方（実際に回線を遅くして読み込む方式）

公式のツールでも測りました。回数は少なく、参考値です。C1は70点、C2は94点（どちらも1回）。本番のWordPressは、フォントを軽くする前後で59、59、71、74点でした。

同じタグを入れると、AstroもWordPressと同じくらいの点数になりました。置き場所も、WordPressかAstroかという違いも、測定結果を決める主な要因ではなさそうです。

測り方で、なぜ結果が違ったのか

2つの表を見比べると、違いがはっきりしています。標準の測り方では、タグがあるかどうかで20点ほど変わります。実際に近い測り方では、4つとも87〜90点で、差は3点以内です。

標準の測り方は、実際に取得したページの結果をもとに、遅い回線と性能の低いスマホでかかる時間をシミュレーションします。そのシミュレーションの中で、タグの読み込みが画面を出す作業と重なると、画面が出るまでの時間が一気に長く見積もられることがありました。5回測って、速い回と遅い回にはっきり分かれることもあります。

大事なのは、どちらの測り方も、実際の訪問者の体感速度を測ったものではないことです。お客さんの端末や回線は、ツールの想定とは違います。実際の訪問者のデータでは、確かめていません。

途中で、いくつか間違えました

• 「タグが原因」と早く決めすぎました。Astro版にタグを入れていない比較は、公平ではありませんでした。
• タグを外して測った実験で、外し忘れがありました。「タグを外しても変わらない」という誤った結果が出て、あとで取り消しています。
• 自分のパソコンの中だけで動かした実験では、「Astro版にタグを入れても97点」と出ました。ところが、実際のインターネット上に置くと76点でした。パソコンの中では実際の通信が再現されず、タグの影響が見えなかったのだと思います。この結果は、比較から外しています。

測り方や条件が少し違うだけで、結果は変わります。どう測ったかが書かれていない数字は、あまり信用しないほうがいいと、あらためて感じました。

タグを後から読み込む方法

C2のように、タグをページが表示されてから読み込むと、標準の測り方でも94点まで戻り、実際に近い測り方でも90点でした。

ただ、この方法は、まだ本番のSOLEIAには入れていません。アクセス解析は、お問い合わせの件数を数える大事な役割があるので、速さより先に、数え漏れが出ないかを確かめる必要があります。たとえば、ページを開いてすぐ閉じた訪問は、後読みだと数えられない可能性があります。

テスト用の計測先に、データが届くところまでは確認しました。精度への影響は、これから調べます。結果が出たら、改めてお知らせします。

まだ測れていないこと

• 動いている状態のWordPressを最適化して測ることは、していません。本番に手を入れる必要があるためです。代わりに、できあがったファイルにしたコピーで確かめました。動いているものと、点数はほぼ同じでした。
• 公式のツールの測定は、回数が少ないです（1〜4回）。
• 測ったのは、日本からのスマホと、トップページ1枚だけです。海外からのアクセスや、一度に大量のアクセスが来たときの強さは測っていません。
• 今回は表示速度だけを比べています。サーバー費用、保守のしやすさ、更新のしやすさは、続きの記事で比べました。ホームページのセキュリティ対策7項目を、チェックリストにまとめました。

まとめ

WordPressとAstroを同じ条件で比べると、測定上の表示速度にほとんど差はありませんでした。

点数に効いていたものは、2つあります。ひとつは日本語フォントの大きさです。軽くすると、標準の測り方で点数が上がりました。もうひとつは計測用のタグで、影響の大きさは測り方によって違いました。標準の測り方では20点ほど、実際に近い測り方では3点以内です。どちらも、WordPressのままで調べて直せます。

ただし、これはツールでの測定結果です。フォントやタグが、実際の訪問者の体感にどれだけ影響しているかは、確かめられていません。

表示が遅いと感じたとき、仕組みを変えるのは大きな決断です。その前に、何が遅さの原因なのかを数字で確かめると、直す手間も費用も、ずっと小さくて済むことがあります。

SOLEIAでは、サイトの診断で、こうした遅さの原因を数字で特定しています。気になる方は、無料の簡易診断をご利用ください。

WordPressからAstroへの移行を考えるとき、表示速度以外にも確認したいことがあります。

維持費や保守、更新方法にはどんな違いがあるのか。続きの記事で、3つの運用方法を比較しました。

WordPressを続ける？ Astroへ移す？ メリット・デメリットと維持費を比較する →