Налаштування Varnish Cache для прискорення веб-додатка

Наша компанія займається розробкою, підтримкою та обслуговуванням сайтів будь-якої складності. Від простих односторінкових сайтів до масштабних кластерних систем, побудованих на мікро сервісах. Досвід розробників підтверджено сертифікатами від вендорів.

Розробка та обслуговування будь-яких видів сайтів:

Інформаційні сайти або веб-програми
Сайти візитки, landing page, корпоративні сайти, онлайн каталоги, квіз, промо-сайти, блоги, ресурси новин, інформаційні портали, форуми, агрегатори
Сайти або веб-програми електронної комерції
Інтернет-магазини, B2B-портали, маркетплейси, онлайн-обмінники, кешбек-сайти, біржі, дропшиппінг-платформи, парсери товарів
Веб-програми для управління бізнес-процесами
CRM-системи, ERP-системи, корпоративні портали, системи управління виробництвом, парсери інформації
Сайти або веб-програми електронних послуг
Дошки оголошень, онлайн-школи, онлайн-кінотеатри, конструктори сайтів, портали надання електронних послуг, відеохостинги, тематичні портали

Це лише деякі з технічних типів сайтів, з якими ми працюємо, і кожен із них може мати свої специфічні особливості та функціональність, а також бути адаптованим під конкретні потреби та цілі клієнта.

Послуги, які ми пропонуємо
Показано 1 з 1Усі 2062 послуг
Налаштування Varnish Cache для прискорення веб-додатка
Середній
~2-3 дні
Часті запитання

Наші компетенції:

Етапи розробки

Останні роботи

  • image_website-b2b-advance_0.webp
    Розробка сайту компанії B2B ADVANCE
    1359
  • image_web-applications_feedme_466_0.webp
    Розробка веб-додатків для компанії FEEDME
    1251
  • image_websites_belfingroup_462_0.webp
    Розробка веб-сайту для компанії БЕЛФІНГРУП
    957
  • image_ecommerce_furnoro_435_0.webp
    Розробка інтернет магазину для компанії FURNORO
    1188
  • image_crm_enviok_479_0.webp
    Розробка веб-додатків для компанії Enviok
    929
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Розробка веб-сайту для компанії ФІКСПЕР
    947

Зауважте: коли ваш веб-сервер починає задихатися при пікових навантаженнях, а час відповіді (TTFB) перевищує 500 мс — це сигнал, що час впроваджувати HTTP-акселератор. Varnish Cache перехоплює запити до backend і віддає кешовані відповіді з оперативної пам'яті. В результаті затримка знижується до 1–5 мс, а сервер витримує десятки тисяч запитів на секунду. Ми — команда з 5-річним досвідом у налаштуванні Varnish, яка реалізувала понад 100 проектів для highload-сервісів. Правильне налаштування Varnish покращує Core Web Vitals (LCP, INP). Типовий hit rate при коректній VCL досягає 95–99%, а час відповіді скорочується в 100 разів порівняно з прямим зверненням до backend.

Проблеми, які вирішує Varnish

  • Високе навантаження на backend. Без кешування кожен запит обробляється додатком — база даних, рендеринг, бізнес-логіка. Varnish знімає до 90% навантаження, обслуговуючи кешовані сторінки безпосередньо.
  • Повільні динамічні сторінки. Навіть якщо сторінка генерується 200 мс, при 1000 паралельних запитах час очікування зростає. Varnish з фрагментарним кешуванням (ESI) дозволяє кешувати спільну частину, а персоналізовані блоки підвантажувати асинхронно. Це скорочує час генерації сторінки на 60–80%.
  • Нестабільна робота при піках трафіку. Varnish виступає буфером: якщо backend тимчасово недоступний, віддається застаріла копія (grace mode). Це запобігає простоям і помилкам 503.

Як Varnish покращує Core Web Vitals?

Core Web Vitals — метрики, від яких залежить ранжування в Google. Varnish безпосередньо впливає на Largest Contentful Paint (LCP) та Interaction to Next Paint (INP). При кешуванні HTML-сторінок LCP падає з 2–3 секунд до 200–300 мс. INP покращується завдяки тому, що сервер швидше віддає контент, зменшуючи затримку для скриптів. На одному з проектів hit rate зріс з 40% до 98% після коригування VCL.

Grace mode: навіщо він потрібен?

Grace mode — це механізм, який дозволяє віддавати застарілий кеш, якщо backend не відповів вчасно. Як зазначено в документації Varnish: Grace mode дозволяє віддавати застарілий кеш, запобігаючи помилкам 503. Налаштування beresp.grace = 6h дає 6 годин на відновлення, протягом яких Varnish продовжує віддавати стару копію. Це критично для highload-проектів, де кожна секунда простою коштує грошей.

Коли Varnish не потрібен?

Varnish не ефективний для сайтів з повністю персоналізованим контентом (особистий кабінет, онлайн-банкінг), де кожен запит потребує унікальних даних. У таких випадках краще використовувати кешування на рівні додатку (Redis, Memcached) або CDN. Однак навіть для таких проектів Varnish може кешувати статику та спільні блоки.

Базова конфігурація VCL

# Debian/Ubuntu
apt install varnish

# /etc/varnish/default.vcl
vcl 4.1;

import std;

backend default {
    .host = "127.0.0.1";
    .port = "8080";
    .first_byte_timeout = 60s;
    .connect_timeout = 5s;
    .between_bytes_timeout = 10s;
}

# Несколько бэкендов с балансировкой
import directors;

backend app1 { .host = "10.0.0.1"; .port = "8080"; }
backend app2 { .host = "10.0.0.2"; .port = "8080"; }

sub vcl_init {
    new cluster = directors.round_robin();
    cluster.add_backend(app1);
    cluster.add_backend(app2);
}

sub vcl_recv {
    set req.backend_hint = cluster.backend();

    # Нормализация URL (удалить trailing slash кроме корня)
    if (req.url ~ "^(/[^?]+)/$") {
        set req.url = regsub(req.url, "/$", "");
    }

    # Не кэшировать admin-панель
    if (req.url ~ "^/admin") {
        return (pass);
    }

    # Не кэшировать авторизованных пользователей (если контент персонализирован)
    if (req.http.Authorization || req.http.Cookie ~ "session_id|auth_token") {
        return (pass);
    }

    # Удалить маркетинговые параметры из ключа кэша
    set req.url = regsuball(req.url, "(\\?|&)(utm_source|utm_medium|utm_campaign|utm_content|fbclid|gclid)=[^&]+", "");
    set req.url = regsub(req.url, "\\?&", "?");
    set req.url = regsub(req.url, "\\?$", "");

    # Нормализовать Accept-Encoding
    if (req.http.Accept-Encoding) {
        if (req.url ~ "\\.(gif|jpg|jpeg|png|webp|avif|ico|zip|gz|mp4)$") {
            unset req.http.Accept-Encoding;
        } elsif (req.http.Accept-Encoding ~ "br") {
            set req.http.Accept-Encoding = "br";
        } elsif (req.http.Accept-Encoding ~ "gzip") {
            set req.http.Accept-Encoding = "gzip";
        } else {
            unset req.http.Accept-Encoding;
        }
    }
}

sub vcl_backend_response {
    # Кэшировать 404 ненадолго
    if (beresp.status == 404) {
        set beresp.ttl = 30s;
        return (deliver);
    }

    # Кэшировать только успешные ответы
    if (beresp.status != 200 && beresp.status != 301 && beresp.status != 302) {
        set beresp.uncacheable = true;
        return (deliver);
    }

    # Если backend не прислал Cache-Control — установить по умолчанию
    if (!beresp.http.Cache-Control) {
        if (bereq.url ~ "\\.(css|js|woff2|png|jpg|svg)$") {
            set beresp.ttl = 30d;
        } else {
            set beresp.ttl = 5m;
        }
    }

    # Grace period: отдавать устаревший кэш при backend сбое
    set beresp.grace = 6h;

    # Сжатие
    if (beresp.http.content-type ~ "text/(html|css|javascript|xml|plain)" ||
        beresp.http.content-type ~ "application/(json|javascript)") {
        set beresp.do_gzip = true;
    }

    # Не хранить Set-Cookie в кэше
    unset beresp.http.Set-Cookie;
}

sub vcl_deliver {
    # Debug заголовок (отключить в production)
    if (obj.hits > 0) {
        set resp.http.X-Cache = "HIT " + obj.hits;
    } else {
        set resp.http.X-Cache = "MISS";
    }

    # Скрыть внутренние заголовки от клиента
    unset resp.http.X-Varnish;
    unset resp.http.Via;
    unset resp.http.X-Powered-By;
}

sub vcl_hit {
    if (obj.ttl >= 0s) { return (deliver); }
    # Grace: отдать устаревший объект
    if (obj.ttl + obj.grace > 0s) { return (deliver); }
    return (restart);
}

Інвалідація кешу: PURGE, BAN, ESI

acl purge_acl {
    "127.0.0.1";
    "10.0.0.0"/8;
}

sub vcl_recv {
    if (req.method == "PURGE") {
        if (!client.ip ~ purge_acl) {
            return (synth(405, "Not allowed"));
        }
        return (purge);
    }

    if (req.method == "BAN") {
        if (!client.ip ~ purge_acl) {
            return (synth(405, "Not allowed"));
        }
        ban("req.http.host == " + req.http.host + " && req.url ~ " + req.url);
        return (synth(200, "Ban added"));
    }
}

Використання з додатку:

# Інвалідувати конкретний URL
curl -X PURGE http://localhost/page/about

# Інвалідувати за патерном (BAN)
curl -X BAN -H "Host: company.com" http://localhost/category/

ESI (Edge Side Includes)

sub vcl_backend_response {
    if (beresp.http.Surrogate-Control ~ "ESI/1.0") {
        set beresp.do_esi = true;
    }
}

Процес налаштування, типові помилки та що входить в роботу

Процес налаштування

  1. Аудит додатку: аналіз URL, cookies, сесій, частота оновлення.
  2. Проектування VCL: правила кешування, TTL, grace, ESI.
  3. Тестування на staging: замір hit rate, навантаження на backend.
  4. Деплой: налаштування systemd, виділення пам'яті, моніторинг.
  5. Моніторинг та оптимізація: varnishstat, Prometheus, коригування VCL.
Чек-лист аудиту додатку перед налаштуванням Varnish
  • Аналіз структури URL та параметрів
  • Виявлення динамічних та статичних сторінок
  • Перевірка використання cookies та сесій
  • Визначення частоти оновлення контенту
  • Виявлення вузьких місць у продуктивності backend

Типові помилки та рекомендації

Помилка Рішення
Ігнорування нормалізації URL Додати нормалізацію trailing slash у vcl_recv
Кешування авторизованих сторінок Перевіряти cookies та Authorization header, return(pass) для персоналізованого контенту
Занадто довгий TTL для динаміки Встановити розумний TTL (1–5 хвилин) для сторінок з контентом, що часто змінюється
Тип контенту TTL Grace ESI Приклад URL
Статика (CSS, JS, картинки) 30 днів 12 год Ні /static/css/app.css
Сторінки каталогу 5 хвилин 6 год Так (для фільтрів) /catalog/phones/
Персоналізовані сторінки 0 (pass) - Ні /account/

Що входить в роботу

  • Аудит поточної архітектури та виявлення вузьких місць
  • Проектування та написання VCL-конфігурації з урахуванням специфіки проекту
  • Налаштування балансування та grace mode
  • Реалізація інвалідації PURGE/BAN та ESI за потреби
  • Тестування на staging та вимірювання продуктивності
  • Деплой у production та налаштування моніторингу (Prometheus + Grafana)
  • Документація та навчання команди
  • Гарантійна підтримка після впровадження

Терміни та вартість

Базове налаштування Varnish з типовою VCL займає 1–2 робочих дні. Для проектів з нестандартною архітектурою, ESI або складними правилами інвалідації — 2–3 дні. Вартість розраховується індивідуально після аудиту.

Замовте налаштування Varnish та отримайте консультацію — ми допоможемо збільшити продуктивність вашого сайту. Зв'яжіться з нами, щоб обговорити ваш проект.

Для поглибленого вивчення VCL ми рекомендуємо документацію Varnish.

Чому Core Web Vitals критичні для технічного SEO

PageSpeed показує 34/100 на мобільних. У Search Console — червоні метрики по всіх сторінках категорій. Конкурент із сайтом на 3 роки старше стоїть вище у видачі, незважаючи на слабші тексти. Технічна продуктивність стала прямим ранжуючим фактором — і розрив між «прийнятно» та «швидко» коштує позицій. Ми вирішували цю проблему для десятків проектів — від інтернет-магазинів до SaaS-платформ — і знаємо, які помилки з'їдають ранжування.

Як досягти хороших показників Core Web Vitals?

Core Web Vitals: що реально впливає на позиції

Google використовує три метрики як сигнали ранжування (Page Experience): LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), INP (Interaction to Next Paint, замінив FID з останнього великого оновлення алгоритму).

LCP: чому 8 секунд — це не проблема зображення

LCP вимірює час відмальовки найбільшого видимого елемента сторінки. Найчастіше — hero image або H1. Пороги: добре < 2.5s, погано > 4s.

Типовий діагноз на реальному проекті: інтернет-магазин одягу, LCP 7.8s на мобільних. Елемент — hero image категорії, 4.2MB JPEG без srcset, завантажується через CSS background-image (не <img>). Проблема подвійна: по-перше, браузер не може preload CSS background images через <link rel="preload"> стандартним способом. По-друге, 4.2MB на мобільному з'єднанні — це фізично повільно.

Рішення по кроках:

  1. Переносимо hero з CSS background в <img> з fetchpriority="high" та loading="eager"
  2. Конвертуємо в WebP, додаємо srcset: 800w для мобільних, 1400w для десктопа
  3. <link rel="preload" as="image" href="hero-800.webp" media="(max-width: 768px)"> в <head>
  4. Прибираємо всі render-blocking скрипти вище hero через defer

Підсумок: LCP 7.8s → 1.9s. Без зміни хостингу, без CDN.

Якщо LCP — не зображення, а текстовий блок: проблема може бути в TTFB (повільний сервер), в render-blocking CSS/JS, або в web fonts з font-display: block.

CLS: зсуви, які дратують користувача і Google

CLS вимірює сумарний зсув елементів в процесі завантаження. Пороги: добре < 0.1, погано > 0.25. CLS 0.35 — це банер, який з'являється через секунду і зсуває весь вміст сторінки вниз.

Джерела CLS:

  • Зображення без заданих розмірів. <img src="photo.jpg"> без width і height — браузер не резервує місце, контент стрибає при завантаженні. Фікс: явні width/height або aspect-ratio в CSS.
  • Рекламні блоки та віджети. Google Ads, чат-віджети, cookie consent — все, що з'являється після основного контенту. Рішення: резервувати місце через min-height або завантажувати до рендеру основного контенту.
  • Web fonts. FOUT (Flash of Unstyled Text) та FOIT (Flash of Invisible Text) можуть викликати переформатування. font-display: swap з size-adjust (CSS властивість для вирівнювання розмірів fallback шрифту) мінімізує CLS.
  • Динамічний контент. Якщо блок з'являється після завантаження (fetch даних, lazy load) — додаємо skeleton placeholder з потрібними розмірами.
Типовий сценарій CLS до CLS після Основний фікс
Банер знижок без min-height 0.42 0.02 min-height: 300px
Картинки в статтях без атрибутів 0.18 0.01 width/height + aspect-ratio
Віджет чату, що завантажується через 3с 0.35 0.05 position: fixed із зарезервованим відступом

INP: чому інтерфейс «зависає» на 500ms

INP вимірює затримку відповіді на будь-яку взаємодію користувача: клік, тап, введення. Пороги: добре < 200ms, погано > 500ms. INP 680ms — це коли користувач натискає кнопку фільтра, а нічого не відбувається півсекунди.

Головна причина високого INP — заблокований main thread. JavaScript-бандл 2.1MB парситься і виконується синхронно. Поки виконується, користувацькі події не обробляються.

Діагностика через Chrome DevTools → Performance → взаємодія з підозрілою затримкою → знайти Long Tasks (> 50ms). Типові винуватці:

  • Безперервна обробка великого списку без requestIdleCallback або requestAnimationFrame
  • Важкі event listeners без debounce/throttle
  • Синхронний setState в React, який тригерить повний ре-рендер складного дерева компонентів
  • Third-party scripts: livechat, аналітика, віджети — вони виконуються в тому ж main thread

Рішення: code splitting через динамічний import(), перенесення важких обчислень в Web Workers, React.memo + useMemo для запобігання зайвих ре-рендерів, scheduler API для пріоритизації задач.

Schema.org: розмітка, яку читають роботи

Структуровані дані через JSON-LD — не прямий ранжуючий фактор, але дають rich snippets у видачі (зірки рейтингів, ціни, дата публікації), що збільшує CTR на 20–30%.

Типи розмітки за сценаріями:

  • E-commerce: Product з offers (ціна, наявність, валюта), aggregateRating (рейтинг з відгуків), brand. BreadcrumbList для навігації. ItemList для сторінок категорій.
  • Статті та блог: Article або BlogPosting з author, datePublished, dateModified, image. Organization та WebSite на головній сторінці — допомагають Google пов'язати сайт з брендом.
  • Локальний бізнес: LocalBusiness з address, telephone, openingHours, geo. Критично для локального SEO.
  • FAQ: FAQPage з mainEntity — питання та відповіді можуть з'являтися прямо у видачі як розкривний блок.

Валідація: Google Rich Results Test та Schema Markup Validator. Часта помилка — вказати price без priceCurrency, або ratingValue без reviewCount. Google ігнорує неповну розмітку.

Як проводити технічний SEO-аудит

Сканованість. robots.txt блокує потрібні сторінки (або навпаки, не блокує службові). Canonical URLs налаштовані неправильно — дублюються сторінки з UTM-мітками. Sitemap містить сторінки з noindex. Все це Screaming Frog або Sitebulb покажуть за годину сканування.

Core Web Vitals в масштабі. Google Search Console → Core Web Vitals → дивимося не окремі сторінки, а групи URL (шаблон сторінки продукту, шаблон категорії, блог). Проблема зазвичай системна — одна помилка в шаблоні псує сотні сторінок.

JavaScript SEO. Google рендерить JavaScript, але з затримкою (іноді дні для повного рендеру). Для критичного контенту — SSR або SSG обов'язкові. Перевіряємо через Search Console → Inspect URL → View Crawled Page: що бачить Googlebot.

Internal linking. Орфанні сторінки (немає вхідних внутрішніх посилань) втрачають PageRank. Бите посилання (404) — сигнал якості.

Типові помилки при впровадженні Schema.org
  • Вказано price без priceCurrency — розмітка ігнорується.
  • ratingValue без reviewCount — у видачі не показується.
  • Кілька Product на одній сторінці без @type: ItemList — Google бере тільки перший.
  • JSON-LD в GTM — Google не завжди бачить динамічну розмітку, краще серверний рендеринг.
Етап роботи Що входить Термін
Аудит Сканування, аналіз Core Web Vitals, аудит Schema, звіт з пріоритетами 1–2 тижні
Оптимізація одного шаблону LCP, CLS, INP, впровадження SSR/SSG, налаштування preload 2–4 тижні
Повна технічна оптимізація Всі шаблони, code splitting, Web Workers, моніторинг в CI 4–10 тижнів
Впровадження Schema.org JSON-LD генерація, валідація, тестування rich snippets 1–3 тижні

Що входить в роботу

  • Документація: звіт зі знайденими проблемами, roadmap за пріоритетами, таймінги для кожного етапу.
  • Доступи: налаштування моніторингу (SpeedCurve, Sentry Search Console), передача dashboard.
  • Навчання: розбір типових помилок для вашої команди (1–2 дзвінки).
  • Підтримка: супровід протягом місяця після деплою — перевірка метрик, фікс регресій.

Зв'яжіться з нами — ми оцінимо ваш проект за 2 дні і покажемо, скільки позицій можна повернути за рахунок технічного SEO. Досвід роботи з проектами рівня сотень тисяч відвідувань на місяць — гарантуємо вимірний результат в Core Web Vitals до/після. Замовте аудит у цій формі — отримайте персональний чек-лист з 15 пунктів.