Интеграция CDN и оптимизация статических файлов

Скорость вашего сайта критически важна для пользовательского опыта и SEO-рейтингов. CDN (сеть доставки контента) и оптимизация статических файлов могут резко сократить время загрузки страниц. В этом руководстве рассматриваются основы CDN, настройка Cloudflare, конфигурация кэша Nginx и методы сжатия.

Что такое CDN?

CDN (Content Delivery Network) — сетевая инфраструктура, которая распределяет статический контент (изображения, CSS, JavaScript, видео) по серверам по всему миру и обслуживает пользователей с ближайшего сервера.

Преимущества CDN:

Может сократить время загрузки страниц на 50-80%
Снижает нагрузку на исходный сервер
Обеспечивает защиту от DDoS-атак
Предлагает низкую задержку для глобальных пользователей
Снижает затраты на пропускную способность

Настройка бесплатного CDN Cloudflare

Cloudflare предлагает CDN, защиту от DDoS и SSL-сертификат в бесплатном плане.

1. Создание аккаунта Cloudflare

Перейдите на cloudflare.com
Создайте бесплатный аккаунт
Нажмите "Add a Site"
Введите имя домена
Выберите бесплатный план

2. Перенос DNS-записей

Cloudflare автоматически сканирует существующие DNS-записи:

A     @        203.0.113.50    Proxied (оранжевое облако)
A     www      203.0.113.50    Proxied (оранжевое облако)
CNAME api      api.example.com  DNS only (серое облако)

Опция "Proxied" (оранжевое облако) направляет трафик через Cloudflare, обеспечивая CDN + защиту от DDoS. "DNS only" (серое облако) выполняет только DNS-разрешение.

3. Смена Nameserver

Измените nameserver у регистратора домена на значения, предоставленные Cloudflare:

ns1.cloudflare.com
ns2.cloudflare.com

4. Настройки Cloudflare

SSL/TLS: Выберите режим Full (strict)

Caching:

Browser Cache TTL: 4 часа
Cache Level: Standard

Speed:

Auto Minify: Включить JavaScript, CSS, HTML
Brotli: Включить

Конфигурация заголовков кэша Nginx

hljs nginx

server {
    listen 80;
    server_name example.com;
    root /var/www/mysite;

    # HTML-файлы - без кэширования
    location ~* \.html$ {
        add_header Cache-Control "no-cache, must-revalidate";
    }

    # CSS и JavaScript - длинный кэш для версионированных файлов
    location ~* \.(css|js)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Изображения
    location ~* \.(jpg|jpeg|png|gif|ico|webp|avif|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Vary "Accept-Encoding";
    }

    # Шрифты
    location ~* \.(woff|woff2|ttf|eot|otf)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Access-Control-Allow-Origin "*";
    }

    # API-эндпоинты - без кэширования
    location /api/ {
        add_header Cache-Control "no-store, no-cache";
        proxy_pass http://localhost:3000;
    }
}

Сжатие Gzip

Gzip сжимает текстовые файлы (HTML, CSS, JS), уменьшая размер передачи на 60-80%.

hljs nginx

http {
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_min_length 256;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/json
        application/javascript
        application/xml
        image/svg+xml
        font/truetype
        font/opentype;
}

Сжатие Brotli

Brotli обеспечивает на 15-25% лучшее сжатие, чем gzip, и поддерживается современными браузерами.

hljs bash

# Установить модуль Brotli
sudo apt install libnginx-mod-brotli -y

hljs nginx

http {
    brotli on;
    brotli_comp_level 6;
    brotli_static on;
    brotli_types
        text/plain
        text/css
        application/json
        application/javascript
        image/svg+xml;
}

hljs bash

sudo nginx -t && sudo systemctl reload nginx

# Проверить сжатие
curl -H "Accept-Encoding: br" -I https://example.com
# Должно показать: Content-Encoding: br

Оптимизация изображений

Конвертация в WebP

Формат WebP предлагает на 25-35% меньший размер файлов по сравнению с JPEG и PNG.

hljs bash

# Установить инструмент cwebp
sudo apt install webp -y

# Конвертировать один файл
cwebp -q 80 image.jpg -o image.webp

# Пакетная конвертация
for f in /var/www/mysite/images/*.jpg; do
    cwebp -q 80 "$f" -o "${f%.jpg}.webp"
done

Раздача WebP в Nginx

hljs nginx

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

server {
    location ~* \.(jpg|jpeg|png)$ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
    }
}

Стратегия заголовков Cache-Control

Тип контента	Cache-Control	Описание
HTML	no-cache	Всегда свежий
CSS/JS (с хэшем)	public, immutable, max-age=31536000	1 год
Изображения	public, max-age=31536000	1 год
API-ответы	no-store	Никогда не кэшировать

Используйте Chrome DevTools > вкладку Network для тестирования заголовков кэша. Проверяйте значения Cache-Control, ETag и Age в заголовках ответа.

Заключение

Интеграция CDN и оптимизация статических файлов значительно улучшают производительность сайта. Совместное использование бесплатного CDN Cloudflare для глобального распределения, заголовков кэша Nginx для кэширования в браузере, gzip/brotli для сжатия и WebP для оптимизации изображений может резко сократить время загрузки страниц.

Интеграция CDN и оптимизация статических файлов

Содержание