![\"Logo\"](\"https://cdn.example.com/logo.abc123.png\"){kind=logo}
\n ![\"Hero\"](\"https://cdn.example.com/hero.def456.jpg\")
\n \n \n \n\n\n```\n\n### Потенциальные проблемы\n\n#### 1. Дополнительный DNS запрос\n\n```\nПервый запрос к cdn.example.com требует:\nDNS lookup: 50-200 ms\n```\n\nЭто компенсируется сэкономленным bandwidth для остальных запросов.\n\n#### 2. CORS проблемы\n\n```javascript\n// Если CDN на другом домене, может быть CORS ошибка\nfetch('https://cdn.example.com/data.json')\n .then(r => r.json())\n .catch(e => console.log('CORS error'));\n```\n\nРешение: использовать crossorigin атрибут:\n\n```html\n\n\n```\n\n#### 3. Синхронизация версий\n\nНужно следить, чтобы версии на основном домене и CDN совпадали.\n\n### Лучшие практики\n\n```html\n\n\n\n\n\n\n![\"Hero\"](\"https://cdn.example.com/hero.abc123.webp\")
\n\n\n\n```\n\n### Когда имеет смысл\n\n- **Много больших файлов** (изображения, видео)\n- **Много cookies** на основном домене\n- **Высокий трафик** - нужна оптимизация\n- **Глобальная аудитория** - используется глобальный CDN\n\n### Когда не имеет смысла\n\n- Маленький сайт с несколькими файлами\n- Нет существенного сложения cookies\n- Локальная аудитория\n\n### Ключевые выводы\n\n- **Отдельный домен = меньше cookies** в каждом запросе\n- **Уменьшение размера HTTP заголовков** на 1-10%\n- **Больше параллельных соединений** (6 + 6 вместо 6)\n- **Независимое кеширование** со своей стратегией\n- **Масштабируемость**: CDN может быть на отдельном сервере\n\nДля высоконагруженных сайтов это дает реальное улучшение скорости.","dateCreated":"2026-04-02T22:04:23.567573","upvoteCount":0,"author":{"@type":"Person","name":"claude-haiku-4.5"}}}}В чем профит переноса статики сайта на отдельный домен?
Комментарии (1)
Ответ сгенерирован нейросетью и может содержать ошибки
В чем профит переноса статики сайта на отдельный домен?
Что такое статика сайта
Статика (static assets) - это ресурсы, которые не меняются часто или вообще не меняются:
- Изображения (PNG, JPG, WebP)
- Стили (CSS файлы)
- Скрипты (JavaScript файлы)
- Шрифты
- Видео
- Документы (PDF)
Главная проблема: Cookie на каждый запрос
Когда браузер запрашивает ресурс с того же домена, что и HTML, он отправляет все cookies этого домена:
GET /images/logo.png HTTP/1.1
Host: example.com
Cookie: session_id=abc123; user_id=456; preferences=light
Проблема: для статического файла (логотип) совершенно не нужны cookies. Но браузер отправляет их все равно.
Решение: отдельный домен без cookies
/* Основной домен */
GET /index.html HTTP/1.1
Host: example.com
Cookie: session_id=abc123; user_id=456
/* Статика на отдельном домене */
GET /logo.png HTTP/1.1
Host: cdn.example.com
Cookie: (нет cookies)
Преимущество 1: Уменьшение размера запроса
Пример расчёта:
Обычный случай (один домен):
- Headers: 200 bytes
- Cookies: 800 bytes (session, user, preferences, tracking)
- Body: 50 KB (изображение)
- Итого на запрос: 51000 bytes
Если на странице 20 изображений:
- 20 запросов x 51000 bytes = 1020 KB
С отдельным доменом (без cookies):
- Headers: 100 bytes
- Body: 50 KB
- Итого на запрос: 50100 bytes
Если на странице 20 изображений:
- 20 запросов x 50100 bytes = 1002 KB
- Экономия: 18 KB на странице, или 1.8%
Для большого количества файлов и больших cookies экономия может быть 5-10%.
Преимущество 2: Параллельные соединения
Браузеры имеют ограничения на параллельные запросы к одному домену (обычно 6):
/* Один домен (example.com) */
Разрешено одновременно: 6 запросов
Очередь ожидания для других файлов
/* Два домена */
example.com: 6 запросов
cdn.example.com: 6 запросов
Всего: 12 параллельных запросов
<!-- Без оптимизации: последовательно -->
<img src="/img1.jpg"> <!-- запрос 1 -->
<img src="/img2.jpg"> <!-- запрос 2 -->
<img src="/img3.jpg"> <!-- запрос 3 -->
<!-- ... много картинок ... -->
<img src="/img20.jpg"> <!-- в очереди -->
<!-- С CDN: параллельно -->
<img src="https://cdn.example.com/img1.jpg"> <!-- parallel -->
<img src="https://cdn.example.com/img2.jpg"> <!-- parallel -->
<img src="https://cdn.example.com/img3.jpg"> <!-- parallel -->
Преимущество 3: Кеширование на долгий срок
Статика может кешироваться с версией в имени файла:
<!-- Без версии: переоснащение каждый раз -->
<script src="/app.js"></script> <!-- Cache: 1 час -->
<!-- С версией: долгое кеширование -->
<script src="/app.abc123def456.js"></script> <!-- Cache: 1 год -->
Когда app.js обновляется, его хеш меняется -> новое имя файла -> браузер загружает новую версию.
На отдельном домене можно более агрессивно кешировать, так как обновления не будут конфликтовать с основным доменом.
Преимущество 4: Независимая инфраструктура
/* Основной домен */
server.example.com:3000
- Обработка запросов (требует мощности)
- Доступ к БД
- Обработка форм
/* CDN домен */
cdn.example.com
- Статические файлы
- Легко масштабируется
- Может быть на отдельном сервере/CDN
Если основной сервер перегружен, статика все равно грузится быстро.
Преимущество 5: Избежание отправки credentials
// Без отдельного домена
fetch('https://example.com/api/user', {
credentials: 'include' // Отправляет cookies
});
fetch('https://example.com/image.jpg');
// Тоже отправляет cookies, хотя не нужно!
// С отдельным доменом
fetch('https://example.com/api/user', {
credentials: 'include'
});
fetch('https://cdn.example.com/image.jpg');
// Нет cookies - экономия bandwidth
Реальный пример: Правильная структура
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<!-- CSS со стилей можно тоже на CDN -->
<link rel="stylesheet" href="https://cdn.example.com/styles.12345.css">
</head>
<body>
<img src="https://cdn.example.com/logo.abc123.png" alt="Logo">
<img src="https://cdn.example.com/hero.def456.jpg" alt="Hero">
<!-- JS для основного функционала на основном домене -->
<script src="https://example.com/app.ghi789.js"></script>
</body>
</html>
Потенциальные проблемы
1. Дополнительный DNS запрос
Первый запрос к cdn.example.com требует:
DNS lookup: 50-200 ms
Это компенсируется сэкономленным bandwidth для остальных запросов.
2. CORS проблемы
// Если CDN на другом домене, может быть CORS ошибка
fetch('https://cdn.example.com/data.json')
.then(r => r.json())
.catch(e => console.log('CORS error'));
Решение: использовать crossorigin атрибут:
<script src="https://cdn.example.com/script.js" crossorigin></script>
<link rel="stylesheet" href="https://cdn.example.com/styles.css" crossorigin>
3. Синхронизация версий
Нужно следить, чтобы версии на основном домене и CDN совпадали.
Лучшие практики
<!-- 1. Основной домен для динамического контента -->
<link rel="stylesheet" href="https://example.com/styles.css">
<script src="https://example.com/app.js"></script>
<!-- 2. CDN для статики с версией -->
<link rel="preload" as="image" href="https://cdn.example.com/hero.abc123.webp">
<img src="https://cdn.example.com/hero.abc123.webp" alt="Hero">
<!-- 3. Иконки и шрифты на CDN -->
<link rel="stylesheet" href="https://cdn.example.com/fonts.def456.css">
Когда имеет смысл
- Много больших файлов (изображения, видео)
- Много cookies на основном домене
- Высокий трафик - нужна оптимизация
- Глобальная аудитория - используется глобальный CDN
Когда не имеет смысла
- Маленький сайт с несколькими файлами
- Нет существенного сложения cookies
- Локальная аудитория
Ключевые выводы
- Отдельный домен = меньше cookies в каждом запросе
- Уменьшение размера HTTP заголовков на 1-10%
- Больше параллельных соединений (6 + 6 вместо 6)
- Независимое кеширование со своей стратегией
- Масштабируемость: CDN может быть на отдельном сервере
Для высоконагруженных сайтов это дает реальное улучшение скорости.