HTTP/2 실무 현실 점검하기 (2편): 백엔드와 프론트엔드 개발자가 실제로 확인하는 방법

// 개발자 도구 > Network 탭에서 확인할 포인트들
1. Protocol 컬럼: h2 (HTTP/2), h3 (HTTP/3), http/1.1 표시
2. Connection ID: 같은 서버로의 요청들이 동일한 Connection ID를 가지는지
3. Priority: 리소스 우선순위가 올바르게 설정되었는지

// Performance 탭에서 Server Push 확인
1. Performance 탭 열기
2. 페이지 새로고침하며 녹화
3. Network 섹션에서 "Push" 라벨 확인
4. 푸시된 리소스의 타이밍 분석

// about:networking 페이지 활용
1. 주소창에 "about:networking" 입력
2. HTTP/2 탭에서 활성 연결 상태 확인
3. 스트림 상태와 우선순위 정보 확인
4. HPACK 압축 통계 확인

# /etc/nginx/sites-available/your-site
server {
    listen 443 ssl http2;  # http2 키워드 필수

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    # HTTP/2 Push 설정 (선택사항)
    location = /index.html {
        http2_push /css/main.css;
        http2_push /js/app.js;
    }
}

# Nginx 설정 테스트
sudo nginx -t

# HTTP/2 지원 여부 확인
curl -I --http2 https://yourdomain.com

# SSL/TLS 및 HTTP/2 상세 확인
openssl s_client -alpn h2 -connect yourdomain.com:443

# httpd.conf 또는 .htaccess
LoadModule http2_module modules/mod_http2.so

# Virtual Host 설정
<VirtualHost *:443>
    ServerName yourdomain.com

    # HTTP/2 활성화
    Protocols h2 http/1.1

    # SSL 설정
    SSLEngine on
    SSLCertificateFile /path/to/cert.crt
    SSLCertificateKeyFile /path/to/key.key
</VirtualHost>

const http2 = require('http2');
const fs = require('fs');

// HTTPS/HTTP2 서버 생성
const server = http2.createSecureServer({
  key: fs.readFileSync('path/to/key.pem'),
  cert: fs.readFileSync('path/to/cert.pem')
});

// Express와 HTTP/2 연동 시 주의사항
const express = require('express');
const app = express();

server.on('stream', (stream, headers) => {
  // HTTP/2 스트림 처리
  stream.respond({
    'content-type': 'text/html',
    ':status': 200
  });

  stream.end('<h1>HTTP/2 Server</h1>');
});

// 서버 시작
server.listen(443, () => {
  console.log('HTTP/2 서버가 443 포트에서 실행 중입니다.');
});

<!-- Critical CSS 우선순위 높게 설정 -->
<link rel="preload" href="/css/critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- 비중요 CSS 우선순위 낮게 설정 -->
<link rel="preload" href="/css/non-critical.css" as="style" media="print" onload="this.media='all'">

<!-- JavaScript 모듈 우선순위 -->
<link rel="modulepreload" href="/js/app.js">

// 올바른 Server Push 사용 예시
// 1. Critical CSS만 푸시
// 2. 브라우저 캐시 상태 확인 후 푸시
// 3. 푸시할 리소스 크기 제한 (< 10KB 권장)

// 실무에서 자주 하는 실수
// ❌ 모든 CSS/JS 파일을 푸시
// ❌ 이미 캐시된 리소스를 푸시
// ❌ 큰 파일을 푸시 (번들 전체 등)

<!-- HTTP/1.1 시대의 도메인 샤딩 (이제는 제거해야 함) -->
<!-- ❌ 잘못된 방식 -->
<img src="https://img1.yourdomain.com/photo1.jpg">
<img src="https://img2.yourdomain.com/photo2.jpg">
<script src="https://js.yourdomain.com/app.js"></script>
<link href="https://css.yourdomain.com/style.css">

<!-- ✅ HTTP/2에 최적화된 방식 -->
<img src="https://yourdomain.com/images/photo1.jpg">
<img src="https://yourdomain.com/images/photo2.jpg">
<script src="https://yourdomain.com/js/app.js"></script>
<link href="https://yourdomain.com/css/style.css">

# WebPageTest API를 통한 자동화된 테스트
curl -X POST "https://www.webpagetest.org/runtest.php" \
  -d "url=https://yourdomain.com" \
  -d "k=YOUR_API_KEY" \
  -d "location=ec2-us-east-1" \
  -d "runs=3" \
  -d "fvonly=1"

# CLI를 통한 Lighthouse 실행
npx lighthouse https://yourdomain.com --output=json --output-path=./report.json

# HTTP/2 specific 점검 사항
npx lighthouse https://yourdomain.com --only-categories=performance --output=html

// 1. Time to First Byte (TTFB)
// HTTP/2: 일반적으로 100-200ms 개선

// 2. First Contentful Paint (FCP)
// 리소스 우선순위 최적화로 10-30% 개선 가능

// 3. Largest Contentful Paint (LCP)
// Server Push 활용으로 15-25% 개선 가능

// 4. Cumulative Layout Shift (CLS)
// 폰트 로딩 최적화로 개선

// CloudFlare에서 HTTP/2 활성화 후 확인사항
1. SSL/TLS 탭에서 "Full (strict)" 설정 확인
2. Speed 탭에서 "HTTP/2" 활성화 확인
3. "HTTP/3 (with QUIC)" 실험적 기능 고려

{
  "DistributionConfig": {
    "HttpVersion": "http2",
    "Origins": [{
      "DomainName": "yourdomain.com",
      "OriginProtocolPolicy": "https-only"
    }]
  }
}

// HTTP/2 지원 여부 확인
function supportsHTTP2() {
  // Service Worker를 통한 HTTP/2 지원 감지
  if ('serviceWorker' in navigator) {
    return fetch('/test-endpoint', { method: 'HEAD' })
      .then(response => {
        // HTTP/2 응답 헤더 확인
        return response.headers.get('alt-svc') !== null;
      })
      .catch(() => false);
  }
  return false;
}

// 폴백 처리
supportsHTTP2().then(supported => {
  if (!supported) {
    // HTTP/1.1 최적화 적용
    console.log('HTTP/1.1 폴백 모드');
  }
});