🎨 Critical CSS API

独自実装によるクリティカルCSS生成APIです。Above-the-foldコンテンツに必要なCSSのみを抽出します。

✨ 主な機能

POST /critical-css

📤 リクエスト例 (CSS URL指定):

{
  "url": "https://example.com",
  "cssUrl": "https://example.com/style.css",
  "viewport": { "width": 1200, "height": 900 }
}

📤 リクエスト例 (インラインCSS):

{
  "url": "https://example.com",
  "css": "body{margin:0;font-family:Arial}h1{color:blue}...",
  "viewport": { "width": 1200, "height": 900 }
}

📥 レスポンス例:

{
  "success": true,
  "data": {
    "url": "https://example.com",
    "cssSource": "url",
    "cssUrl": "https://example.com/style.css",
    "criticalCSS": "html{font-family:sans-serif}body{margin:0}...",
    "originalCSSSize": 45680,
    "criticalCSSSize": 3421,
    "reduction": 92,
    "processingTime": "340ms"
  }
}

🔧 使用例 (JavaScript)

// CSS URLを指定する場合
const response = await fetch('/critical-css', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    url: 'https://example.com',
    cssUrl: 'https://example.com/assets/style.css',
    viewport: { width: 1200, height: 900 }
  })
});

// インラインCSSを指定する場合
const response2 = await fetch('/critical-css', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    url: 'https://example.com',
    css: 'body{margin:0}h1{color:blue}...',
    viewport: { width: 768, height: 1024 }
  })
});

const result = await response.json();
console.log('Critical CSS:', result.data.criticalCSS);
console.log('CSS Source:', result.data.cssSource);
body: JSON.stringify({ url: 'https://your-website.com', viewport: { width: 1200, height: 900 } }) }); const result = await response.json(); console.log('Critical CSS:', result.data.criticalCSS);