# HTTP/2とHTTP/3の違い：パフォーマンス最適化の実践 Webのパフォーマンスを向上させるため、HTTPプロトコルは継続的に進化してきました。この記事では、HTTP/1.1からHTTP/2、そして最新のHTTP/3までの進化を、実際のパフォーマンス測定と最適化テクニックを通じて理解します。フロントエンドエンジニアやバックエンドエンジニアが、Webアプリケーションの高速化のために知っておくべき知識を実践的に学びます。 --- ## 1. HTTPプロトコルの進化 ### 1.1 HTTP/1.1の制限 HTTP/1.1は、以下のような制限がありました： - **同時接続数の制限**: ブラウザごとに最大6-8接続 - **ヘッダの重複**: リクエストごとにヘッダを送信 - **行頭ブロッキング**: 1つのリソースの処理が他のリソースをブロック - **テキストベース**: パースにコストがかかる ### 1.2 HTTP/2の改善点 HTTP/2は、以下の機能を導入しました： - **多重化（Multiplexing）**: 1つのTCP接続で複数のリクエスト/レスポンスを並列処理 - **ヘッダ圧縮（HPACK）**: ヘッダの効率的な圧縮 - **サーバープッシュ**: サーバーがクライアントにリソースを事前に送信 - **バイナリプロトコル**: テキストからバイナリ形式への変更 ### 1.3 HTTP/3の革新的変更 HTTP/3は、さらに以下の改善を導入しました： - **QUICプロトコル**: UDPベースの新しいトランスポート層 - **改良された多重化**: ストリームレベルでの多重化 - **接続移行**: IPアドレスの変更にも対応 - **より高速な接続確立**: 0-RTT、1-RTT接続 ## 2. HTTP/2の詳細 ### 2.1 多重化（Multiplexing） HTTP/2では、1つのTCP接続上で複数のストリームを並列処理できます。 ```javascript // HTTP/1.1では順次処理 // 画像1のダウンロード完了後、画像2、画像3と順番に処理 // HTTP/2では並列処理 // 画像1、画像2、画像3を同時にダウンロード ``` ### 2.2 サーバープッシュの実装 ```javascript // Node.js + ExpressでのHTTP/2サーバープッシュ例 const express = require('express'); const http2 = require('http2'); const fs = require('fs'); const app = express(); const server = http2.createSecureServer({ key: fs.readFileSync('server.key'), cert: fs.readFileSync('server.crt') }, app); app.get('/', (req, res) => { // サーバープッシュの実装 res.push('/styles.css', { 'content-type': 'text/css' }).end(fs.readFileSync('./styles.css')); res.push('/app.js', { 'content-type': 'application/javascript' }).end(fs.readFileSync('./app.js')); res.writeHead(200); res.end(`

HTTP/2 Server Push Example

`); }); server.listen(443); ``` ### 2.3 HPACKヘッダ圧縮 HPACKは、HTTP/2のヘッダ圧縮アルゴリズムです。 ```javascript // ヘッダの効率的な圧縮 // 同じヘッダフィールドは、インデックス参照で圧縮 // 例： // 1回目: "user-agent: Mozilla/5.0..." (全体を送信) // 2回目以降: ":user-agent" (インデックスのみ送信) ``` ## 3. HTTP/3とQUIC ### 3.1 QUICプロトコル QUIC（Quick UDP Internet Connections）は、UDP上に構築されたトランスポート層プロトコルです。 **QUICの特徴**： - **0-RTT接続**: 以前の接続情報を利用して即座に接続 - **改良された多重化**: ストリームごとに独立したフロー制御 - **接続移行**: ネットワーク変更時の再接続不要 - **組み込みの暗号化**: TLSが統合されている ### 3.2 HTTP/3の実装例 ```javascript // Node.jsでのHTTP/3実装（node-http3などのライブラリが必要） // 注意: HTTP/3のサポートはまだ限定的です // Cloudflare WorkersでのHTTP/3サポート // HTTP/3は自動的に利用可能（QUICプロトコル） // クライアント側での確認 fetch('https://example.com', { method: 'GET', // HTTP/3は自動的にネゴシエーション }); ``` ## 4. パフォーマンス測定 ### 4.1 Chrome DevToolsでの確認 ```javascript // Chrome DevToolsでHTTP/2の使用を確認 // 1. Networkタブを開く // 2. リクエストをクリック // 3. HeadersタブでProtocolを確認 // - h2: HTTP/2 // - http/1.1: HTTP/1.1 // - h3: HTTP/3 ``` ### 4.2 パフォーマンス比較スクリプト ```javascript // パフォーマンス測定スクリプト async function measurePerformance(url) { const results = { http1: [], http2: [], http3: [] }; // HTTP/1.1の測定（複数接続） for (let i = 0; i < 10; i++) { const start = performance.now(); await fetch(url, { // HTTP/1.1を強制（プロキシや設定で制御） }); results.http1.push(performance.now() - start); } // HTTP/2の測定（1接続、多重化） const start = performance.now(); await Promise.all([ fetch(`${url}/resource1`), fetch(`${url}/resource2`), fetch(`${url}/resource3`), fetch(`${url}/resource4`), fetch(`${url}/resource5`) ]); results.http2.push(performance.now() - start); return { http1: { avg: results.http1.reduce((a, b) => a + b) / results.http1.length, total: results.http1.reduce((a, b) => a + b) }, http2: { avg: results.http2[0], total: results.http2[0] } }; } ``` ### 4.3 WebPageTestでの測定 ```bash # WebPageTestを使用した測定 # 1. https://www.webpagetest.org/ にアクセス # 2. テストURLを入力 # 3. Advanced SettingsでHTTPバージョンを確認 # 4. 結果の"Waterfall View"でHTTP/2の多重化を確認 ``` ## 5. 最適化テクニック ### 5.1 HTTP/2での最適化 ```javascript // ❌ HTTP/1.1の最適化（HTTP/2では不要または逆効果） // - スプライト画像 // - インライン化 // - リソースの結合 // ✅ HTTP/2での最適化 // - リソースの分離（キャッシュ効率を向上） // - Critical CSSのインライン化（最初のレンダリング） // - 非クリティカルなリソースの遅延読み込み // Critical CSSのインライン化例 const html = ` ... `; ``` ### 5.2 リソースヒントの活用 ```html ``` ### 5.3 リソースの優先度制御 ```html Hero

``` ## 6. サーバー設定 ### 6.1 NginxでのHTTP/2設定 ```nginx # /etc/nginx/sites-available/example.com server { listen 443 ssl http2; # http2を追加 listen [::]:443 ssl http2; server_name example.com; ssl_certificate /etc/ssl/certs/example.com.crt; ssl_certificate_key /etc/ssl/private/example.com.key; # HTTP/2 Server Pushの設定 http2_push /styles.css; http2_push /app.js; # 静的ファイルの配信 location / { root /var/www/html; index index.html; } # キャッシュ設定 location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 1y; add_header Cache-Control "public, immutable"; } } # HTTP/1.1からHTTP/2へのリダイレクト server { listen 80; listen [::]:80; server_name example.com; return 301 https://$server_name$request_uri; } ``` ### 6.2 ApacheでのHTTP/2設定 ```apache # /etc/apache2/sites-available/example.com.conf ServerName example.com # SSL設定 SSLEngine on SSLCertificateFile /etc/ssl/certs/example.com.crt SSLCertificateKeyFile /etc/ssl/private/example.com.key # HTTP/2を有効化 Protocols h2 http/1.1 # HTTP/2 Server Push Header add Link "; rel=preload; as=style" Header add Link "; rel=preload; as=script" DocumentRoot /var/www/html Options Indexes FollowSymLinks AllowOverride All Require all granted ``` ### 6.3 Node.jsでのHTTP/2サーバー ```javascript const http2 = require('http2'); const fs = require('fs'); const express = require('express'); const app = express(); const options = { key: fs.readFileSync('./server.key'), cert: fs.readFileSync('./server.crt'), allowHTTP1: true // HTTP/1.1へのフォールバック }; const server = http2.createSecureServer(options, app); // 静的ファイルの配信 app.use(express.static('public')); // HTTP/2 Server Pushのミドルウェア app.use((req, res, next) => { if (req.httpVersionMajor === 2) { // Critical CSSのプッシュ res.push('/styles/critical.css', { 'content-type': 'text/css' }).end(fs.readFileSync('./public/styles/critical.css')); } next(); }); server.listen(443, () => { console.log('HTTP/2 server running on port 443'); }); ``` ## 7. パフォーマンス最適化のベストプラクティス ### 7.1 リソースの最適化 ```javascript // 画像の最適化 // - WebP形式の使用 // - レスポンシブ画像（srcset） // - 遅延読み込み Description

// JavaScriptの最適化 // - コード分割 // - ツリーシェイキング // - ミニファイ ``` ### 7.2 キャッシュ戦略 ```javascript // Service Workerでのキャッシュ戦略 self.addEventListener('fetch', (event) => { if (event.request.destination === 'image') { event.respondWith( caches.open('images-v1').then((cache) => { return cache.match(event.request).then((response) => { return response || fetch(event.request).then((response) => { cache.put(event.request, response.clone()); return response; }); }); }) ); } }); // HTTPキャッシュヘッダの設定 // Cache-Control: public, max-age=31536000, immutable ``` ## 8. 実践的なパフォーマンステスト ### 8.1 Lighthouseでの測定 ```javascript // Lighthouse CIの設定例 // .lighthouserc.js module.exports = { ci: { collect: { url: ['https://example.com'], numberOfRuns: 3 }, assert: { assertions: { 'categories:performance': ['error', {minScore: 0.9}], 'categories:accessibility': ['error', {minScore: 0.9}], 'categories:best-practices': ['error', {minScore: 0.9}], 'categories:seo': ['error', {minScore: 0.9}] } } } }; ``` ### 8.2 パフォーマンス監視 ```javascript // Web Vitalsの測定 import {getCLS, getFID, getFCP, getLCP, getTTFB} from 'web-vitals'; function sendToAnalytics(metric) { const body = JSON.stringify(metric); navigator.sendBeacon('/analytics', body); } getCLS(sendToAnalytics); getFID(sendToAnalytics); getFCP(sendToAnalytics); getLCP(sendToAnalytics); getTTFB(sendToAnalytics); ``` ## 9. HTTP/3への移行 ### 9.1 サポート状況の確認 ```javascript // HTTP/3のサポート確認 async function checkHTTP3Support() { const response = await fetch('https://cloudflare.com', { method: 'HEAD' }); // Chrome DevToolsでProtocolを確認 // Networkタブ > Headers > Protocol: h3 } // ユーザーエージェントでの確認は困難 // サーバー側でALPN（Application-Layer Protocol Negotiation）を確認 ``` ### 9.2 CloudflareなどのCDNの活用 ```javascript // Cloudflareは自動的にHTTP/3をサポート // QUICプロトコルが自動的にネゴシエーションされる // 設定例（Cloudflare Dashboard） // - Network > HTTP/3 (with QUIC) を有効化 // - 自動的にQUICプロトコルが使用される ``` ## 10. まとめと次のステップこの記事を通じて、HTTP/2とHTTP/3の違い、そしてパフォーマンス最適化の実践方法を学びました。 ### 学んだこと - **HTTP/1.1の制限**: 同時接続数の制限、行頭ブロッキング - **HTTP/2の改善**: 多重化、ヘッダ圧縮、サーバープッシュ - **HTTP/3とQUIC**: UDPベース、0-RTT接続、接続移行 - **パフォーマンス測定**: Chrome DevTools、WebPageTest、Lighthouse - **最適化テクニック**: リソースヒント、優先度制御、キャッシュ戦略 - **サーバー設定**: Nginx、Apache、Node.jsでのHTTP/2設定 ### パフォーマンス向上のポイント 1. **HTTP/2の活用**: 多重化による並列処理 2. **リソースの最適化**: 画像、JavaScript、CSSの最適化 3. **キャッシュ戦略**: 適切なキャッシュヘッダとService Worker 4. **リソースヒント**: preload、prefetch、preconnectの活用 5. **監視**: Web Vitalsによる継続的な監視 ### 次のステップ 1. **実サイトでの測定**: 自分のサイトでHTTP/2/3の効果を測定 2. **CDNの活用**: Cloudflare、AWS CloudFrontなどのCDN 3. **Edge Computing**: Cloudflare Workers、AWS Lambda@Edge 4. **継続的な最適化**: パフォーマンス監視と改善のサイクル Webパフォーマンスは、ユーザー体験に直接影響します。HTTP/2とHTTP/3の理解を深め、実践的な最適化を通じて、高速なWebアプリケーションを構築しましょう！ Happy Optimizing!

タグ: