レスポンシブサイトのパフォーマンス最適化

<picture>
    <source
        type="image/webp"
        srcset="hero-600w.webp 600w, hero-1200w.webp 1200w"
        sizes="(max-width: 600px) 100vw, 80vw">
    <img
        src="hero-1200w.jpg"
        srcset="hero-600w.jpg 600w, hero-1200w.jpg 1200w"
        sizes="(max-width: 600px) 100vw, 80vw"
        alt="ヒーロー画像"
        loading="lazy"
        width="1200"
        height="675">
</picture>

:root {
    --font-heading: clamp(1.4rem, 4vw, 2.2rem);
    --font-body: clamp(0.9rem, 2vw, 1rem);
    --space-section: clamp(24px, 5vw, 48px);
    --grid-cols: 1;
    --card-radius: 12px;
}

@media (min-width: 640px) {
    :root {
        --grid-cols: 3;
    }
}

.lp-page {
    font-family: sans-serif;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-section);
    background: #f8fafc;
}

.page-header {
    text-align: center;
    margin-bottom: var(--space-section);
}

.headline {
    font-size: var(--font-heading);
    color: #1e293b;
    margin: 0 0 8px;
}

.subline {
    font-size: var(--font-body);
    color: #64748b;
    margin: 0;
}

.feature-section {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: 16px;
}

.feature-card {
    background: #fff;
    border-radius: var(--card-radius);
    padding: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.feature-card i {
    font-size: 2rem;
    color: #10b981;
    margin-bottom: 12px;
    display: block;
}

.feature-card h2 {
    font-size: 1rem;
    margin: 0 0 8px;
    color: #1e293b;
}

.feature-card p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

/* 負荷が高くなりやすい例: レイアウトを毎フレーム再計算 */
.cta-button-bad {
    position: relative;
    left: 0;
    transition: left 0.25s ease;
}

.cta-button-bad:hover {
    left: 8px;
}

/* 改善例: コンポジット中心で処理 */
.cta-button-good {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.cta-button-good:hover {
    transform: translateX(8px);
    opacity: 0.92;
}

/* 長いランディングページの各セクションに適用 */
.lp-section {
    content-visibility: auto;
    /* ジャンプ防止のためおおよその高さを指定する */
    contain-intrinsic-size: 0 600px;
}

<!-- 元画像が2000×1200px / 2.1MB でもCSSで縮小するだけでは全デバイスが2.1MBを受け取る -->
<img src="hero.jpg" alt="ヒーロー画像">

.hero img {
    max-width: 100%;
    height: auto;
}

<img
    src="hero-600w.jpg"
    srcset="hero-600w.jpg 600w, hero-1200w.jpg 1200w, hero-2000w.jpg 2000w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 80vw, 1200px"
    alt="ヒーロー画像"
    loading="lazy"
    width="1200"
    height="675">

/* スマホから見えないようにしたが、画像は読み込まれてしまう */
.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .desktop-only {
        display: block;
    }
}

.hero { font-size: 2rem; padding: 32px; }
.card { margin-bottom: 24px; }

@media (max-width: 768px) { .hero { font-size: 1.4rem; padding: 20px; } }
@media (max-width: 768px) { .card { margin-bottom: 16px; } }

/* 同じ条件が各所に散らばり、変更時に漏れが発生しやすい */

/* NG：topを変えるとレイアウト再計算が毎フレーム発生する */
.item-ng {
    position: absolute;
    top: 0;
    transition: top 0.3s ease;
}
.item-ng:hover {
    top: -8px;
}

/* OK：transformはGPUコンポジット層で処理される */
.item-ok {
    position: relative;
    transition: transform 0.3s ease;
}
.item-ok:hover {
    transform: translateY(-8px);
}