サイトの軽量化を図る！─ サステナブルWebコーディングの実践ノウハウ

<picture>
  <source srcset="/img/hero.avif 1x, /img/hero@2x.avif 2x" type="image/avif">
  <source srcset="/img/hero.webp 1x, /img/hero@2x.webp 2x" type="image/webp">
  <img src="/img/hero.jpg"
       srcset="/img/hero_768.jpg 768w, /img/hero_1280.jpg 1280w, /img/hero_1600.jpg 1600w"
       sizes="(max-width: 768px) 92vw, (max-width: 1280px) 80vw, 1200px"
       width="1600" height="900" alt="ページのキービジュアル">
</picture>

<img src="/img/gallery-01.webp"
     alt="ギャラリー"
     width="1200" height="800"
     loading="lazy" decoding="async">

<!-- iframeもlazy -->
<iframe src="https://www.youtube.com/embed/xxxx"
        title="動画"
        loading="lazy"
        referrerpolicy="strict-origin-when-cross-origin"
        allowfullscreen></iframe>

<!-- IntersectionObserverで遅延対象：画像（幅・高さはCLS対策で指定） -->
<img class="js-lazy" data-src="/img/gallery-01.webp" alt="ギャラリー" width="1200" height="800" />

/* 遅延対象にわかりやすい初期スタイル（任意） */
.js-lazy, .js-widget { opacity: 0; transition: opacity .25s ease; }
.is-loaded { opacity: 1; }

// IntersectionObserver で“見えたら”ローディング
(function () {
  if (!('IntersectionObserver' in window)) {
    // 古いブラウザ向け（必要ならPolyfillを読み込む）
    // https://github.com/w3c/IntersectionObserver/tree/main/polyfill
    return;
  }

  const lazyTargets = document.querySelectorAll('.js-lazy, .js-widget');

  const onIntersect = (entries, observer) => {
    entries.forEach(entry => {
      if (!entry.isIntersecting) return;

      const el = entry.target;

      // 画像 or iframe（data-src を本来の src に差し替え）
      if (el.matches('.js-lazy')) {
        const src = el.getAttribute('data-src');
        if (src) el.setAttribute('src', src);
        el.addEventListener('load', () => el.classList.add('is-loaded'), { once: true });
      }

      // 任意ウィジェット（見えたら初期化スクリプトを読み込む）
      if (el.matches('.js-widget')) {
        const scriptUrl = el.getAttribute('data-script');
        const cfgText   = el.getAttribute('data-config') || '{}';

        if (scriptUrl) {
          const s = document.createElement('script');
          s.src = scriptUrl;
          s.async = true;
          s.onload = () => {
            try {
              const cfg = JSON.parse(cfgText);
              // グローバル初期化関数を想定（実装に合わせて変更）
              if (window.initReviewWidget) {
                window.initReviewWidget(el, cfg);
              }
              el.classList.add('is-loaded');
            } catch (e) { /* no-op */ }
          };
          document.head.appendChild(s);
        }
      }

      // 1度読み込んだら監視解除
      observer.unobserve(el);
    });
  };

  const io = new IntersectionObserver(onIntersect, {
    root: null,           // ビューポート
    rootMargin: '200px',  // 200px 手前で“先読み”開始
    threshold: 0          // 交差を検知したら実行
  });

  lazyTargets.forEach(t => io.observe(t));
})();

<link rel="preload" as="font" href="/fonts/NotoSansJP-subset.woff2" type="font/woff2" crossorigin>

<style>
@font-face {
  font-family: 'NotoSansJP';
  src: url('/fonts/NotoSansJP-subset.woff2') format('woff2');
  font-weight: 400; font-style: normal;
  font-display: swap; /* FOIT回避 */
}
body { font-family: system-ui, "NotoSansJP", sans-serif; }
</style>

<script src="/assets/app.js" defer></script> <!-- HTML解析後に実行 -->
<script src="/assets/analytics.js" async></script> <!-- 依存なしは並行読み込み -->

<!--ページ別に遅延import（例：ES Modules） -->
<script type="module">
  if (location.pathname.startsWith('/dashboard')) {
    import('/assets/dashboard.js');
  }
</script>

<!-- 1. クリティカルCSSのみインライン -->
<style>
/* above-the-fold の最小限 */
.header{display:flex;align-items:center;min-height:56px}
.hero{padding:8vw 0 4vw}
</style>

<!-- 2. 残りは遅延読み込み -->
<link rel="preload" as="style" href="/assets/app.css">
<link rel="stylesheet" href="/assets/app.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="/assets/app.css"></noscript>

# Cache-Control（静的アセット）
Cache-Control: public, max-age=31536000, immutable

# HTMLは短め
Cache-Control: no-cache

# Nginx例：Brotli（サーバ設定）
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/javascript application/json image/svg+xml;

# HTTPヘッダでのヒント
Link: <https://cdn.example.com>; rel=preconnect; crossorigin