Next.jsブログを高速化する画像・フォント最適化Tips

表示速度はユーザー体験だけでなく、Googleの検索評価(Core Web Vitals)にも影響する要素です。このブログもNext.jsで構築する際、いくつかの基本的な最適化を最初から組み込んでいます。この記事では、実際に採用している設定を具体的に紹介します。

1. 記事ページはできる限り静的生成(SSG)にする

このブログの記事ページは、generateStaticParamsを使ってビルド時にすべてHTMLとして生成しています。リクエストのたびにサーバー側で処理する必要がないため、表示速度が安定して速くなります。

export async function generateStaticParams() {
  return getAllSlugs().map((slug) => ({ slug }));
}

アフィリエイトブログのように「公開後は頻繁に内容が変わらない記事」は、基本的に静的生成が第一選択になります。

2. フォントはnext/fontでセルフホストする

Google FontsをそのままCDN経由で読み込むと、外部リクエストが発生し表示速度に影響します。Next.jsのnext/fontを使うと、ビルド時にフォントファイルを取得してNext.js自身がホスティングしてくれるため、外部リクエストなしで表示できます。

import { Geist } from "next/font/google";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

日本語フォントを使う場合はサブセット化(使用する文字だけに絞る)をしないとファイルサイズが大きくなりがちなので、必要な文字種だけに絞る設定も合わせて検討するとよいです。

3. 画像はnext/imageを使い、サイズを明示する

このブログのサムネイル・アイキャッチはSVGで軽量に保っていますが、写真素材などラスター画像を使う場合はnext/imageコンポーネントを使うことで、自動的にWebP変換・レスポンシブサイズ配信・遅延読み込みが行われます。

import Image from "next/image";

<Image src="/images/example.jpg" alt="説明文" width={800} height={450} />

widthとheightを明示することで、画像読み込み前にレイアウトのスペースが確保され、読み込み中にガタつく現象(レイアウトシフト)を防げます。これはCore Web Vitalsの「CLS」というスコアに直結します。

アイキャッチをSVGの幾何学イラストにした一番の理由も、実はここにあります。写真素材だとファイルサイズがどうしても大きくなりがちですが、SVGならベクターデータなので軽量なまま、しかもどんな解像度の画面でも綺麗に表示できます。デザインの好みだけでなく、表示速度の観点でも理にかなった選択だったと感じています。

4. 見出し構造とmetadataをページごとに設定する

Next.jsのApp Routerでは、各ページでgenerateMetadata関数やmetadataオブジェクトを使ってタイトル・説明文・canonical URLなどを個別に設定できます。このブログでも記事ごとにタイトル・descriptionを出し分け、alternates.canonicalで正規URLを明示しています。

export async function generateMetadata({ params }) {
  const post = await getPostBySlug(params.slug);
  return {
    title: post.title,
    description: post.description,
    alternates: { canonical: `https://example.com/blog/${params.slug}` },
  };
}

5. 構造化データ(JSON-LD)を埋め込む

記事ページにはArticleのJSON-LDと、パンくずリスト用のBreadcrumbListのJSON-LDを埋め込んでいます。これ自体が直接的に順位を上げるわけではありませんが、検索結果でパンくずが表示されるなど、リッチリザルトの対象になりやすくなります。

6. サイトマップ・robots.txtは自動生成にする

Next.jsにはsitemap.ts・robots.tsという規約があり、ファイルを置くだけでビルド時に/sitemap.xml・/robots.txtが自動生成されます。記事を追加するたびに手動でサイトマップを更新する必要がなく、更新漏れも防げます。

実際、記事を追加する作業を何度か繰り返してみて、この自動化のありがたみを実感しました。手動更新の運用だと「サイトマップの更新を忘れたまま記事を10本近く公開していた」ということが普通に起こり得ますが、ここを自動化しておくだけでその手のヒューマンエラーがまるごと消えます。

よくある質問

Q. SVGのアイキャッチだとGoogleの画像検索に不利になりませんか? A. 画像検索からの流入を重視するなら写真素材の方が有利な場合もありますが、記事本文のSEO評価自体には大きな影響はありません。用途に応じて使い分けるとよいでしょう。

Q. 静的生成した記事を後から編集したらどうなりますか? A. Markdownファイルを編集して再ビルド・再デプロイすれば反映されます。CMSのような管理画面はありませんが、Gitで変更履歴を追える点はメリットです。

Q. パフォーマンス計測はどうやって行えばいいですか? A. Google PageSpeed Insightsや、Chromeの開発者ツールのLighthouseタブで手軽に計測できます。公開後は定期的にチェックすることをおすすめします。

まとめ

Next.jsでブログを作る場合、静的生成・フォントのセルフホスト・画像最適化・metadata/構造化データの整備という基本を押さえるだけで、表示速度と検索エンジンへの見え方の両方をかなり改善できます。派手な施策より、まずこの基本の積み重ねが効果的です。

ホスティング先の選び方についてはこちらの記事でも解説しています。