Как ускорить сайт с Cloudflare CDN: пошаговый практический гайд

Содержание

Если сайт тормозит, не торопитесь винить хостинг или грешить на локальные сбои. Рассказываем, как ускорить загрузку сайта через Cloudflare и не поломать его в процессе.

Введение

С каждым месяцем всё больше сайтов в российском сегменте Интернета жалуются на рост задержки в загрузке страниц. Кто-то решает, что дело в хостинге, кто-то винит локальные сбои. Но причина зачастую кроется в другом: слишком длинный путь от пользователя до сервера. Когда посетители из Москвы, Казани или Новосибирска ждут контент с площадки где-нибудь в Германии, это становится настоящей головной болью, особенно в часы пик. Скорость загрузки давно уже не просто вопрос удобства. Она влияет на поведение пользователей, продажи, позиции в поиске и даже на доверие к бренду.

В статье рассказали, как ускорить сайт с помощью CDN, что такое Cloudflare и как его правильно подключить.

Аренда VPS/VDS — от ₽219/месяц

Почему выбирают VPS от AdminVPS:

✓ Дешевле физического сервера

✓ Более гибкий и мощный, чем обычный хостинг

✓ Бесплатная защита от DDoS и техподдержка 24/7

✓ Масштабируется под любые задачи

Виртуальный сервер VPS/VDS — ваш личный сервер для сайтов, магазинов, ботов и других проектов.

Зачем нужен CDN

Когда человек открывает сайт, его браузер запрашивает кучу данных: текст, картинки, таблицы стилей, скрипты. Всё это тянется с сервера, где физически живёт ваш сайт. Если этот сервер где-нибудь далеко, например, в Финляндии, США или Азии, пользователь в России получает всё с задержкой. Особенно если интернет-соединение не самое стабильное.

CDN (Content Delivery Network) решает эту проблему с помощью сети точек по всему миру. Контент копируется и распределяется между этими узлами, и при каждом запросе браузер обращается не к основному серверу, а к ближайшему CDN-узлу. В России таких точек у Cloudflare десятки. А значит, контент можно отдать почти моментально, без путешествий через полмира.

Это похоже на то, как вы храните закладки под рукой, а не лезете каждый раз в историю поиска. Страницы открываются быстрее, серверы нагружаются меньше, а пользователи реже закрывают сайт из-за подвисаний. При этом CDN может не только ускорять, но и защищать. Многие решения, вроде Cloudflare, умеют фильтровать вредоносный трафик, блокировать подозрительные IP и автоматически прятать настоящий сервер за прокси.

Если ваш сайт размещён на VPS и работает на WordPress или другом движке, настройка CDN даст ощутимый прирост к скорости без лишних расходов. Особенно это важно для лендингов, интернет-магазинов и любых ресурсов, где счёт идёт на миллисекунды.

Блокировка Cloudflare в России: текущая ситуация и решения для пользователей

Подключение сайта к Cloudflare

Для начала создайте аккаунт на Cloudflare. Укажите рабочую почту, на неё будут приходить отчёты и уведомления. После подтверждения запустится мастер добавления сайта.

Введите домен без https и www, просто example.ru. Cloudflare просканирует текущие DNS-записи. Если сайт уже работает, большинство подтянется автоматически. Проверьте их вручную, особенно A, CNAME, MX и TXT — ошибки здесь могут нарушить работу сайта и почты.

На этапе выбора тарифа нажмите Free и продолжите. Этого режима хватает для большинства задач. В будущем вы сможете изучить платные тарифы и выбрать подходящий под свои задачи.

Теперь настройте DNS. Перейдите в панель хостинга. Замените текущие NS-записи на те, что предложил Cloudflare, вроде:

coffee.nsk.cloudflare.com
tvshop.mos.cloudflare.com

Обновление может занять до суток, но обычно всё работает через пару часов. Статус проверки отображается в кабинете Cloudflare.

Когда домен активен, откройте раздел SSL/TLS и выберите режим Full. Это создаст соединение между Cloudflare и сервером по HTTPS, что критично для логинов и форм. В разделе Caching проверьте, что включён уровень Standard, а также активируйте Always Online, тогда при сбоях пользователи будут видеть кешированную версию сайта.

Убедитесь, что файрвол пропускает запросы от Cloudflare, иначе возможны ошибки или бесконечная загрузка. Для финальной проверки откройте сайт и загляните в заголовки ответа. Если всё настроено верно, появится строка:

cf-cache-status: HIT

Этот ответ означает, что кеш и CDN уже работают.

Настройка кеширования и правил Page Rules

Cloudflare по умолчанию кеширует только статический контент, такой как изображения, стили, скрипты. Это ускоряет загрузку, но можно добиться большего, особенно для сайтов на WordPress или другой CMS с динамическими страницами.

Откройте раздел Caching, включите Caching Level: Standard и установите Browser Cache TTL хотя бы на 1 день. Это позволит браузеру хранить файлы локально и не дёргать сервер при каждом открытии сайта.

Дальше тонкая настройка. Перейдите в Rules → Page Rules. Здесь задаются условия кеширования для отдельных разделов. Бесплатно доступны три правила, этого обычно хватает. Добавьте правило для лендинга или другой статичной страницы:

URL: example.ru/landing*

Правила: Cache Level: Cache Everything, Edge Cache TTL: a day

Так Cloudflare будет хранить в кеше не только картинки, но и HTML. Страница отдастся прямо с узла CDN, даже если сервер занят или временно лёг.

Не применяйте Cache Everything на страницах с корзинами, формами и логинами. Там важны индивидуальные данные, и кеш может привести к утечке, например, один пользователь увидит корзину другого.

Если новости или блог часто обновляются, добавьте исключение:

URL: example.ru/news*

Правило: Cache Level: Bypass

Так вы исключите нужный раздел из кеша, не трогая остальной сайт.

Для WordPress без плагинов кеширования Page Rules с Cache Everything — отличная подмога. Они ускоряют сайт и снижают нагрузку.

Проверьте, работает ли кеш. Откройте DevTools (F12), вкладка Network, клик по файлу. Ищите заголовок cf-cache-status: HIT. Если он есть, значит, кеш включён и всё работает.

Оптимизация контента

Когда сайт подключён к Cloudflare и кеш работает, переходите к ускорению загрузки. Чем меньше весит страница, тем быстрее она откроется, особенно на мобильных устройствах.

Сначала включите минификацию. Она удаляет лишние пробелы и комментарии из HTML, CSS и JS. Перейдите в Speed → Optimization, найдите Auto Minify и активируйте все три галочки. На сервере ничего не поменяется, но в браузер уйдут уже облегчённые версии файлов.

После минификации включите Brotli. Это современное сжатие, оно делает файлы легче на четверть. Разница особенно заметна при медленном Интернете.

Теперь об изображениях. Они почти всегда загружаются дольше остальных элементов. Встроенная функция Polish работает только на платных тарифах, но ускорить картинки можно и на бесплатном. Первый вариант — подготовить их вручную. Сожмите изображения через специальные сервисы и переведите в формат WebP. Такие файлы открываются быстрее почти в два раза и при этом выглядят так же, как оригиналы.

Если не хочется заниматься этим вручную, подключите плагин на стороне сайта. Для WordPress подойдут ShortPixel или Imagify. Они автоматически уменьшают вес загружаемых картинок и отдают их в формате WebP. Убедитесь, что сервер поддерживает mod_rewrite или правила в .htaccess, иначе WebP может не сработать.

Читайте в нашем блоге практическое руководство по увеличению скорости загрузки сайта.

Чтобы JavaScript не мешал загрузке страницы, включите Rocket Loader. Сначала появится всё важное, скрипты подгрузятся потом. Это особенно помогает, если подключена аналитика, сторонние библиотеки или виджеты.

Проверьте результат в PageSpeed Insights. После всех включённых функций сайт почти всегда получает дополнительно 20–30 баллов, даже если хостинг не самый быстрый.

Безопасность, SSL и защита бэкенда

Даже если на сервере уже стоит SSL, откройте раздел SSL/TLS и выберите режим Full (strict). В этом режиме соединение шифруется от пользователя до Cloudflare и дальше до сервера. Но для этого на сервере должен быть действующий сертификат. Если его пока нет, поставьте бесплатный от Let’s Encrypt или создайте через панель управления. Ранее в блоге мы рассказывали, как выпустить SSL-сертификат для сайта.

Дальше включите Always Use HTTPS. Эта настройка переведёт всех пользователей на защищённую версию сайта. Чтобы не возникало предупреждений в браузере, активируйте Automatic HTTPS Rewrites — она заменит устаревшие ссылки, которые до сих пор указывают на HTTP.

Если начались атаки или сайт внезапно начал тормозить, включите Under Attack Mode. Перед тем как загрузится страница, появится капча или короткая проверка. Боты на этом этапе отваливаются, обычные посетители заходят спокойно.

Зайдите в раздел Firewall → Tools, если нужно вручную ограничить доступ по IP или по странам. Но не торопитесь. Сначала посмотрите логи или отчёты — резкие ограничения могут отрезать пользователей, которые ничего не нарушали.

Самое уязвимое место — панель управления. Папки вроде /wp-admin и /bitrix/admin часто становятся целью атак. Чтобы закрыть их от посторонних, создайте правило в Firewall Rules. Укажите путь, разрешите вход только со своего IP, а всех остальных либо заблокируйте, либо отправьте на дополнительную проверку через JavaScript.

Если у вас динамический IP, используйте VPN с постоянным адресом или настройте обновление IP через Cloudflare API. Это немного сложнее, но зато доступ всегда будет под контролем.

Работа с CMS

Когда сайт работает на CMS, важно учитывать, как она взаимодействует с CDN. Особенно это касается кеша и динамического контента. Например, WordPress по умолчанию отдаёт HTML, который может сильно меняться от пользователя к пользователю. Cloudflare по умолчанию не кеширует HTML, но может это делать, вот тут нужно быть осторожным.

Если кешировать всё подряд, авторизация и корзина могут перестать работать. Чтобы этого избежать, настройте Page Rules — задайте правила, что именно нужно кешировать. Например, можно явно исключить /wp-admin, /cart, /checkout, /personal и любые другие страницы, где важна персонализация. Для остального включите кеширование и экономьте ресурсы сервера.

В «1С-Битрикс» тоже есть нюансы. Он сам умеет кешировать данные, но это никак не мешает Cloudflare. Просто следите, чтобы кеши не конфликтовали. Если что-то отображается криво, проверьте, нет ли двойного кеширования одной и той же страницы. Можно включить Development Mode на время отладки, чтобы CDN временно отключился.

И не забудьте о бекапах. Ни один CDN не заменит резервную копию. Даже если сайт работает быстро и стабильно, всегда держите свежую копию файлов и базы данных.

Мониторинг и повседневная проверка

Cloudflare даёт инструменты не только для ускорения, но и для контроля. В разделе Analytics можно посмотреть, сколько трафика обрабатывается, откуда приходят пользователи, сколько атак было заблокировано. Статистика обновляется почти в реальном времени, удобно отслеживать подозрительные всплески.

Для продвинутых сценариев можно подключить внешние системы мониторинга, например, Zabbix или UptimeRobot. Или использовать webhook-оповещения, если на сайте критически важные процессы.

Обратите внимание на графу Origin Errors — это ошибки связи между Cloudflare и вашим сервером. Если их много, значит сайт недоступен на уровне хостинга. Возможно, сервер перегружен или временно недоступен. В таких случаях CDN уже не поможет, нужно проверять конфигурацию сервера, лимиты, логи.

Раз в неделю заходите в панель Cloudflare и проверяйте настройки. Обновления, новые функции, сбои — всё это влияет на поведение сайта. Не бросайте настройки на самотёк, иначе рано или поздно придётся всё чинить в спешке.

Заключение

Cloudflare помогает вам быть внимательнее к деталям. Здесь нет кнопки «сделать хорошо», зато есть всё, чтобы вы могли сами решить, как должен работать ваш продакшен. Когда вы понимаете, что именно включаете и зачем, сайт начинает дышать свободно: быстро загружаться, держать удар и не бояться трафика и времени.

Читайте в блоге: