メインコンテンツへスキップ

Hugo のパフォーマンス最適化：サイトを高速化する

· 読了時間 2 分
Sarah Chen

はじめに​

パフォーマンスはユーザー体験と SEO にとって極めて重要である。本ガイドでは、Hugo サイトを最大限のパフォーマンスへと最適化するためのさまざまなテクニックを探っていく。

アセットの最適化​

画像の最適化​

画像はしばしばページサイズの最大の要因となる。以下がその最適化方法である：

layouts/shortcodes/optimized-image.html
{{ $image := .Page.Resources.GetMatch (printf "%s" (.Get "src")) }}
{{ $options := dict "targetWidth" 800 "quality" 85 }}
{{ $processed := $image.Process "resize 800x webp q85" }}
<img src="{{ $processed.RelPermalink }}" 
     alt="{{ .Get "alt" }}"
     loading="lazy"
     className="rounded-lg shadow-lg">

CSS と JavaScript​

アセットのフットプリントを最小化する：

  • CSS と JavaScript を最小化する
  • アセットを適切にバンドルする
  • 未使用のコードを削除する

キャッシュ戦略​

  1. ブラウザキャッシュ

    • 適切なキャッシュヘッダーを設定する
    • バージョン付きアセットを使う
    • Service Worker を実装する

  2. Hugo のキャッシュ

    • 高コストな操作には .Scratch を使う
    • パーシャルの結果をキャッシュする
    • メモ化を実装する

コンテンツ配信​

CDN セットアップ​

config.toml
[params.cdn]
  enable = true
  provider = "cloudfront"
  domain = "cdn.example.com"

エッジコンピューティング​

エッジコンピューティングを活用して、より速いコンテンツ配信を実現する：

  • 複数リージョンにデプロイする
  • 必要に応じてエッジ関数を使う
  • ジオルーティングを実装する

パフォーマンスモニタリング​

主要な指標​

  1. Core Web Vitals

    • Largest Contentful Paint (LCP)
    • First Input Delay (FID)
    • Cumulative Layout Shift (CLS)

  2. その他の指標

    • Time to First Byte (TTFB)
    • First Contentful Paint (FCP)
    • Total Blocking Time (TBT)

高度な最適化テクニック​

リソースヒント​

layouts/partials/head.html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

クリティカル CSS​

レンダリングを高速化するため、クリティカルなスタイルをインライン化する：

layouts/partials/critical-css.html
<style>
  /* ここにクリティカル CSS を記述 */
  .hero { /* ... */ }
  .nav { /* ... */ }
</style>

SEO 最適化​

  1. 構造化データ
  2. XML サイトマップ
  3. メタタグ

まとめ​

Hugo サイトの最適化は継続的なプロセスである。定期的なモニタリングと調整により、サイトは最高のパフォーマンスを維持できる。

参考資料​