はじめに
ページの表示に3秒かかると、多くのユーザーが待たずに離脱すると言われています。ECサイトにとって表示速度は、デザインや品揃えと同じくらい売上に関わる要素です。分かってはいても、商品数が増えるほどサイトは重くなりがちで、速度改善は後回しになりやすい部分でもあります。
この記事では、ISR（ページを作り置きして自動更新するNext.jsの仕組み）を導入すると何がどう良くなるのかを、表示速度・SEO・運用コストの3つの面から解説します。
表示が速くなる仕組み
世界各地の「配布拠点」から作り置きを返す
ISRでは、作り置きしたページをCDN（コンテンツ配信ネットワーク。世界各地に置かれた配布用のサーバー網）に置いておきます。ユーザーがページを開くと、その人にいちばん近い拠点から完成品のページが返ってくるため、物理的な距離による遅れも、ページを組み立てる処理の待ちもほとんどありません。
サーバーの処理をユーザーが待たなくていい
従来のSSR（アクセスのたびにサーバーでページを組み立てる方式）では、商品データの取得とページの組み立てが終わるまで、ユーザーは画面の前で待つことになります。ISRはすでに完成しているページを返すだけなので、この待ち時間が丸ごとなくなります。体感としては「クリックした瞬間に表示される」に近い状態です。
スマホ回線でこそ差が出る
この差が特にはっきり出るのが、通信環境の不安定なスマホでの閲覧です。ECサイトのアクセスの多くはスマホからで、移動中や電波の弱い場所で見られることも珍しくありません。サーバーとの何往復ものやり取りが必要なSSRは回線品質の影響を受けやすい一方、ISRは近くの拠点から完成品を1回受け取るだけなので、環境が悪くても表示が安定します。「オフィスのPCでは速いのに、お客さまのスマホでは遅い」という食い違いを減らせるのは、実務ではかなり大きな利点です。
データ取得 → ページ組み立て → 表示、と処理が積み重なり、そのぶんユーザーを待たせる
完成品のページを近くの拠点から返すだけ。組み立ての待ち時間が発生しない
図を一言でまとめると、「その場で作って渡すか、作り置きをすぐ渡すか」の違いです。
Core Web VitalsとSEOへの効果
Core Web Vitalsとは
Core Web Vitalsは、Googleが定めた「ページの快適さ」を測る指標で、検索順位にも影響します。代表的な指標は次の3つです。
- LCP（Largest Contentful Paint）: メインコンテンツが表示されるまでの時間
- INP（Interaction to Next Paint）: クリックなどの操作に対する反応の速さ
- CLS（Cumulative Layout Shift）: 表示中にレイアウトがずれない安定性
つまりGoogleは、「速くて、反応が良くて、表示が安定しているページ」を評価するということ。ISRはこのうち、特に最初の「速さ」に直接効いてきます。
いちばん効くのはLCPの改善
ISRによるキャッシュ配信で大きく改善するのがLCPです。ページの主役となるコンテンツ（商品画像や見出しなど）が完成品としてすぐ届くため、ユーザーの体感速度が上がり、指標の数字も良くなります。表示速度は検索順位を決める要素の1つなので、速さを保つことはSEO（検索エンジンからの集客対策）の土台づくりでもあります。
改善の度合いは計測ツールで確認できる
速くなったかどうかは、感覚ではなくツールで確かめられます。GoogleのPageSpeed Insights（ページ速度の無料診断ツール）にURLを入れると、Core Web Vitalsの各指標が点数つきで表示されるので、導入前後で数字を見比べるだけで効果が分かります。非エンジニアでも扱える診断ツールなので、施策の成果を社内に説明する材料としても使いやすい存在です。
API呼び出しが減ることのメリット
従量課金のコストが下がる
ECサイトでは、商品情報をShopifyなどのAPI（外部サービスからデータを受け取るための窓口）から取得します。SSRではアクセスのたびにこの問い合わせが発生しますが、ISRならキャッシュが有効な間は問い合わせ自体が起こりません。呼び出し回数に応じて課金されるサービスでは、これがそのまま費用の削減につながります。
アクセス集中に強くなる
SNSやメディアで紹介されて急にアクセスが増えても、返しているのは作り置きのページなので、裏側のサーバーにはほとんど負荷がかかりません。セール開始直後のような瞬間的なアクセス集中にも耐えやすくなります。正直、この安心感は運用を始めてから実感した部分で、アクセス急増のたびにサーバーの心配をしなくて済むのは大きなメリットでした。
まとめ
ISRの効果は、表示速度の改善、Core Web Vitals経由でのSEOへの好影響、そしてAPIコストとサーバー負荷の削減という3つの面に表れます。どれも「作り置きを返す」というシンプルな発想から生まれるメリットです。
では、その作り置きはいつ、どうやって新しくなるのか。仕組みの中身は次の記事で解説します。