Cloudflare пропонує декілька інструментів прискорення сайту, які працюють на рівні CDN без змін на сервері. Багато з них вмикаються одним кліком.

Auto Minify

Speed → Optimization → Content Optimization → Auto Minify.

Увімкніть для: ✅ JavaScript, ✅ CSS, ✅ HTML.

⚠️ Іноді Auto Minify ламає JS-код з синтаксичними особливостями. Якщо після ввімкнення щось перестало працювати — вимкніть HTML або JS мініфікацію.

Rocket Loader

Speed → Optimization → Content Optimization → Rocket Loader → On.

Відкладає завантаження JS до повного завантаження HTML. Покращує LCP і TTI (Time to Interactive).

⚠️ Rocket Loader конфліктує з деякими jQuery-скриптами та Google Analytics. Тестуйте перед увімкненням на production.

Стиснення Brotli

Speed → Optimization → Content Optimization → Brotli → On. Brotli стискає текстовий контент краще за gzip на 15–25%.

HTTP/2 та HTTP/3

Network → HTTP/2 → On (увімкнено за замовчуванням). HTTP/3 (QUIC) → увімкніть для ще більшої швидкості на нестабільних з'єднаннях.

Polish (оптимізація зображень)

Speed → Optimization → Image Optimization → Polish → Lossless або Lossy (Pro+).

Режим	Опис
Off	Без оптимізації
Lossless	Видалення метаданих без втрати якості
Lossy	Стиснення з втратою якості (більш агресивне)

✅ Найбільш відчутний приріст швидкості на безкоштовному плані: увімкнути Auto Minify (JS+CSS+HTML) + Brotli + HTTP/2. Це не потребує плану Pro.

Early Hints (103)

Speed → Optimization → Performance → Early Hints → On. Браузер починає завантажувати ресурси ще до отримання повної HTML-відповіді.

Розбір проблем після ввімкнення оптимізацій

Верстка поїхала або JS перестав працювати після Auto Minify

HTML-мінімізація іноді прибирає пробіли там, де вони значущі (наприклад, між інлайновими елементами із залежною версткою), а JS-мінімізація може зламати код із нестандартним використанням ASI (automatic semicolon insertion) або вбудовані шаблонні рядки з особливим форматуванням. Вимикайте мінімізацію по одному типу файлів (спочатку HTML, потім JS), щоб знайти винуватця, замість того щоб вимикати все одразу.

Rocket Loader ламає інтерактивність форм чи віджетів

Rocket Loader відкладає виконання скриптів і змінює порядок їхнього запуску, через що код, який очікує синхронного завантаження бібліотеки (наприклад, звернення до jQuery одразу в inline-скрипті), може виконатися раніше, ніж бібліотека завантажиться. Рішення — додати атрибут data-cfasync="false" до конкретних тегів <script>, які не повинні оброблятися Rocket Loader.

Перевірка ефекту оптимізацій

# Перевірити що Brotli справді застосовується
curl -I -H "Accept-Encoding: br" https://example.com/ | grep -i content-encoding
# Очікувано: content-encoding: br

# Перевірити що відповідь віддано з кешу Cloudflare
curl -I https://example.com/wp-content/themes/style.css | grep -i cf-cache-status
# Очікувано: cf-cache-status: HIT

Різницю в реальній швидкості завантаження найкраще дивитися через PageSpeed Insights або WebPageTest до і після ввімкнення кожного налаштування — так видно, яка опція дала ефект, а яка ні. Тонше налаштування кешування конкретних шляхів роблять через Cache Rules.

Коли оптимізації Cloudflare не допоможуть

Вузьке місце — повільні запити до бази даних або важкий серверний рендеринг: мінімізація і Brotli пришвидшують доставку готової відповіді, а не її генерацію.
Сайт уже віддає повністю оптимізовані, стиснуті й мінімізовані файли зі збіркою (Webpack, Vite) — Cloudflare не дасть помітного виграшу поверх уже готової збірки.
Контент персоналізований для кожного користувача (особистий кабінет, кошик) — такі сторінки зазвичай не кешуються, і частина пришвидшень Cloudflare на них не діє. Про багаторівневе кешування між дата-центрами читайте у статті про Argo і Tiered Cache.

Перш ніж щось вмикати, визначте вузьке місце через вкладку Network у DevTools або водоспад WebPageTest: якщо найдовший за часом ресурс — це сам HTML-документ (TTFB), проблема на сервері, і жодна мінімізація статики її не вирішить.

Polish додатково конвертує зображення у WebP чи AVIF для браузерів, які їх підтримують, визначаючи це за заголовком Accept — конвертація відбувається автоматично, без заміни оригіналів на сервері.

Перевіряючи cf-cache-status з різних місць, пам'ятайте: у Cloudflare десятки дата-центрів, і перший запит до конкретного дата-центру завжди дає MISS, навіть якщо той самий файл уже кешовано в іншому місті. Кілька послідовних запитів поспіль з одного місця надійніші для перевірки, ніж разові перевірки з різних сервісів.

Для проєктів з аудиторією на кількох континентах додатково пришвидшити TTFB за рахунок оптимальної маршрутизації між дата-центрами Cloudflare допомагає Argo Smart Routing — це окрема платна надбудова поверх звичайного CDN.