Мета – скоротити час від кліку до користі. У 2025 це: Core Web Vitals (LCP, INP, CLS), швидкі мережі (HTTP/3, TLS 1.3), менше зайвого JavaScript і розумне кешування на краю. Далі – 25 практичних кроків із прив’язкою до інфраструктури Unihost.
1) LCP до 2.5 с
Виводьте головний елемент раніше, використовуйте fetchpriority=high, preload і мінімізуйте блокуючі стилі.
2) INP замість FID
Дрібні обробники, Web Worker для важкого коду, менше синхронного JS, passive listeners.
3) CLS≈0.1
Фіксуйте розміри медіа, не рухайте контент зверху, шрифти з font- display: swap.
4) HTTP/3 + TLS 1.3
Увімкніть QUIC/HTTP/3, OCSP stapling, обережно з 0‑RTT; використовуйте сучасні шифри.
5) CDN
Статика й зображення з CDN, геореплікація, трансформації webp/avif, кеш на краю.
6) Зображення
AVIF/WebP, srcset/sizes, loading=lazy, decoding=async.
7) Критичний CSS
Inline критичне, інше – preload as=style → stylesheet; мінімізуйте CSS.
8) Менше JS
Tree‑shaking, code‑splitting, динамічний import, без зайвих полифілів.
9) Defer/async
Другорядні скрипти – відкладено; пріоритизуйте критичні сценарії.
10) Острівна архітектура
SSR/SSG/ISR + часткова гідратація лише там, де справді потрібна.
11) Edge‑рендеринг
Шаблони ближче до користувача; кеш HTML за мовою/гео; stale‑while‑revalidate.
12) Кеш‑заголовки
Статика – max‑age+immutable; HTML – короткий TTL + ETag/Last‑Modified.
13) Brotli
Стиснення CSS/JS/HTML, передсжаті артефакти для віддачі з фронта.
14) Шрифти
WOFF2, сабсети, preconnect до font‑CDN, display=swap/optional.
15) Пріоритет мережі
preconnect, dns‑prefetch, preload; бережіть зайві підключення.
16) 103 Early Hints
Надсилайте ранні підказки для критичних ресурсів.
17) Service Worker
Кешуйте shell і статичні ассети; stale‑while‑revalidate.
18) Стрімінг HTML
Потокове віддавання та серверні компоненти зменшують JS на клієнті.
19) База + Redis
Індекси, уникнення N+1, кеш на читання/запис, обмеження payload.
20) Батчинг API
Групуйте запити, використовуйте keep‑alive та стиснення.
21) Треті скрипти
Аудит через Tag Manager, завантаження за згодою, тайм‑аути, ліміти.
22) Мобільні мережі
Мінімізуйте запити, client‑hints, адаптивні зображення, обережні анімації.
23) RUM і синтетика
Реальні метрики + перевірки з різних регіонів; SLO й алерти.
24) Перф‑гейти в CI/CD
Lighthouse/WebPageTest як перевірка PR; блокування деградацій.
25) План і ролі
Пріоритети, відповідальні, SLA; метрики до/після – у звіт.
Чек‑лист Unihost
Аудит CWV → CDN/HTTP/3 → зображення → критичний CSS → оптимізація JS → кеш на краю → RUM/синтетика → перф‑гейти. Команда Unihost допоможе з вибором VPS/виділених серверів, налаштуванням Nginx/HTTP/3 і CDN.
FAQ
Чи обов’язково все одразу? – Ні, починайте з найбільших вузьких місць. Чи можна без CDN? – Для міжнародного трафіку втратите секунди. Чому менше JS = швидше? – Менше блокувань і GC, легший бандл.
Висновок
Швидкість – постійна практика. Вибудуйте дорожню карту, автоматизуйте контроль і тримайте фокус на користувачеві. Unihost забезпечить інфраструктуру, мережу та спостережуваність.
Методика вимірювань
Зберіть RUM за LCP/INP/CLS по країнах і пристроях; запустіть синтетику з 3–5 регіонів. Встановіть бюджети: HTML 50–80 КБ, критичний CSS ≤ 100 КБ, стартовий JS ≤ 170–200 КБ. Звітність по релізах – таблиця до/після з LCP/INP/CLS, TTFB і відсотком cache‑hit на краю.
Кейси застосування
- Контент‑сайти: SSG/ISR, CDN, агресивний кеш, AVIF/WebP, мінімум JS.
- E‑commerce: серверні компоненти, edge‑кеш категорій/пошуку, батчинг API кошика, оптимізація БД і Redis.
- SaaS: острівна архітектура, воркери для важких обчислень, перф‑гейти у CI.
Антипатерни
Величезні CSS/JS‑фреймворки «повністю», десятки сторонніх скриптів, важкі PNG‑зображення, шрифти без сабсетів, постійні анімації на мобільному – усе це погіршує INP/LCP і збільшує відтік.
План на 30 днів
- Тиждень 1: аудит і мережа (HTTP/3, CDN).
- Тиждень 2: зображення/шрифти, критичний CSS, прибирання third‑party.
- Тиждень 3: JS‑рефактор і edge‑кеш.
- Тиждень 4: БД/API, гейти в CI/CD, підсумковий звіт та QBR.
Що робити інфраструктурі, а що – розробці
Розробка: критичний CSS, мінімізація JS, аудит third‑party, острівна архітектура, поступове покращення, lazy‑механіки. Інфраструктура: CDN, HTTP/3, кеш на краю, Brotli, Early Hints, геореплікація, балансування.
Для продакт‑менеджера – таблиця пріоритетів: «крок → виграш LCP/INP → трудовитрати → ризики». Конвертація зображень у AVIF/WebP та сабсетинг шрифтів часто дають великі виграші з мінімальним ризиком.
Інструменти діагностики
Lighthouse, WebPageTest, Chrome DevTools (Coverage/Performance), профайлер фреймворку, Server‑Timing для позначок на TTFB/рендері, RUM‑збір з розрізом по країні/пристрою; у CI – Lighthouse CI з бюджетами.
Приклади рішень по Nginx/CDN
Nginx: вмикайте HTTP/3, Brotli, довгі кеш‑заголовки для статики; для HTML – короткий TTL і revalidate. У CDN – edge‑кешування HTML зі SWR, трансформації зображень і статус‑сторінки для інцидентів.
Зображення та шрифти: детальний чек‑лист
- Зображення: AVIF/WebP, 2–3 брейкпоїнти ширини (srcset/sizes), DPR≤2 для мобільних, lazy‑loading поза екраном, decoding=async. Герой LCP – preload та fetchpriority=high. У CDN ввімкніть трансформації й оптимізацію.
- Шрифти: приберіть зайві накреслення, зробіть сабсети (латиниця/кирилиця), WOFF2, preconnect до font‑CDN, display=swap/optional, системний fall‑back у критичному CSS. Пам’ятайте: великі variable‑fonts інколи важчі за кілька woff2.
Бізнес‑ефект і метрики
Після оптимізації зображень і JS сайти часто отримують −20–40% до LCP і −15–25% до INP. Додавайте A/B‑вимірювання і звіти до/після з урахуванням сезонності. Конвертуйте виграші у гроші: швидші сторінки краще монетизуються.
Політика продуктивності та гвардії якості
Опишіть бюджети (вага HTML/CSS/JS), правила для third‑party, вимоги до зображень/шрифтів, ліміти CLS/INP. У CI – гейти, що блокують деградації; щомісячні рев’ю і чистка «мертвих» залежностей.
Edge‑кеш і SWR: практичні поради
Для сторінок категорій/пошуку застосовуйте короткі TTL на краю (5–60 с) з параметром stale‑while‑revalidate, щоб наступні відвідувачі отримували сторінку миттєво, а оновлення відбувалося асинхронно. Для HTML варіюйте кеш за мовою, країною, типом пристрою. На бекенді позначайте варіації заголовками Vary.
Випадки SPA та гідратація
Якщо SPA вирішити неможливо, використовуйте часткову гідратацію/острови, код‑сплітинг, відкладене завантаження маршрутів і компонентів, а також передрендер (SSG/ISR) для публічних сторінок. Сервіс‑воркер може кешувати shell і дані API для повторних відвідин.
Аналітика і сторонні скрипти
Виносьте всі теги у Tag Manager, вмикайте через consent, вимірюйте їхній внесок у INP/LCP. Лімітуйте тайм‑аути і повтори, забороняйте самовільні редиректи/вікна. Те саме стосується пікселів реклами, віджетів чату, карт і плеєрів.
Траблшутінг: що робити, якщо метрики «стрибають»
Перевірте черги серверів, пропускну спроможність мережі, кеш‑hit на краю, «холодні» регіони, а також розмір і кількість зображень у фідах. Проаналізуйте розподіл за пристроями: старі Android часто дають гірший INP. У RUM зменшуйте шум семплінгом і відсікайте екстремальні значення лише у звітності, але не в алертах.
Ролі та відповідальність (поглиблено)
Сформуйте on‑call‑ротацію, виділіть власника продуктивності, призначте регулярні огляди дашбордів та backlog перф‑робіт. Кожен реліз супроводжуйте коротким перф‑звітом: що змінено, як це вплинуло на бюджети, які наступні кроки.
Фінальна порада: фіксуйте релізні мітки на графіках (release annotations), додавайте причини змін і залежності. Це суттєво прискорює пошук кореневих причин і допомагає менеджеру продукту відслідковувати, як саме перформанс впливає на бізнес‑метрики.
Набір базових SLI для початку: аптайм фронтенду (HTTP 200), LCP p75 по країнах, INP p75 по типах пристроїв, частка CLS>0.1, TTFB p75, частка кеш‑hit на краю, розмір стартового JS‑бандла та кількість запитів на стартовій сторінці. Зафіксуйте цілі на квартал і регулярно переглядайте їх у QBR разом із продакт‑командою.
Пам’ятайте: продуктивність – це звичка, а не разовий проєкт. Кожен реліз – це шанс прибрати застарілий код і поліпшити досвід користувачів.
Фокусуйтеся на метриках, що корелюють із бізнес‑результатами, і уникайте «марнославних» показників без реальної цінності.
Як Unihost допоможе
Ми закриваємо інфраструктуру і практичну оптимізацію: від аудиту метрик до CDN і гейтів у CI/CD.
- Аудит CWV (LCP/INP/CLS), мережі та бекенда; звіт із пріоритетами й прогнозованим ефектом.
- Міграція на оптимальні тарифи VPS/виділених серверів, кластеризація та балансування.
- Налаштування Nginx/HTTP/3, TLS 1.3, HSTS, WAF; випуск/автооновлення SSL.
- CDN і edge‑кеш HTML/статичних ресурсів, трансформації зображень (WebP/AVIF).
- Оптимізація шрифтів/зображень, критичний CSS, аудит third‑party і «дієта» JS.
- Спостережуваність: RUM і синтетика, Prometheus/Grafana, алерти й статус‑сторінки.
- CI/CD: перф‑бюджети та гейти, автоматичні звіти «до/після».
- Супровід за SLA 24/7 або разове впровадження «під ключ».
Зверніться – підготуємо план робіт, бюджет і очікуваний виграш LCP/INP для ваших регіонів.