Мінімізація HTTP-запитів

JavaScriptJunior~3 хв читання

Коротко: чому це важливо

Кожен HTTP-запит - це:

окреме підключення до сервера (TCP, TLS-рукостискання),
затримка (latency), поки триває запит-відповідь,
навантаження на сервер і мережу.

Чим більше запитів - тим повільніше рендериться сторінка, довше показується контент користувачу, і падають метрики на кшталт LCP, FCP і TTFB.

Що відбувається при кожному запиті

Коли браузер робить новий HTTP-запит (наприклад, за CSS, JS або картинкою):

DNS-резолвінг - знайти IP домену.
TCP-з'єднання - "рукостискання" клієнта і сервера.
TLS-шифрування (якщо HTTPS) - ще одне рукостискання.
Запит -> відповідь - дані починають завантажуватися.

Навіть якщо ресурс маленький, ці етапи займають десятки-сотні мілісекунд. А якщо таких файлів сотні - затримка сумується.

Чому це сповільнює сайт

Проблема	Що відбувається
Довгі мережеві затримки	Поки завантажуються всі файли, рендер відкладається
Блокувальні ресурси	CSS і JS блокують відображення контенту
Навантаження на CPU і пам'ять	Браузеру потрібно обробити багато файлів
Більше з'єднань -> більше енергії	Особливо критично на мобільних
Падіння Core Web Vitals	LCP, FID, TBT, CLS погіршуються

Приклади коду

Погано:

javascript

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="footer.css">
<script src="jquery.js"></script>
<script src="slider.js"></script>
<script src="form.js"></script>

7 HTTP-запитів тільки заради CSS і JS.

Краще:

javascript

<link rel="stylesheet" href="bundle.min.css">
<script src="bundle.min.js" defer></script>

2 запити замість 7. CSS і JS мінімізовані та об'єднані.

Як зменшити кількість HTTP-запитів

1. Бандлінг і мінімізація

Об'єднуй CSS і JS (Webpack, Vite, Rollup, esbuild, Next.js робить це сам).
Мінімізуй (видалення пробілів, скорочення імен змінних).

2. Спрайти для іконок

SVG-спрайти або один спрайт PNG замість десятків дрібних зображень.
У CSS можна використовувати background-position для вирізання.

3. Використовуй `image-set()` і `srcset`

Замість завантаження всіх розмірів картинок - завантажуй тільки потрібний під екран.

4. HTTP/2 і HTTP/3

Ці протоколи дозволяють мультиплексувати декілька файлів через одне з'єднання.
Але навіть тоді - менше запитів = менше заголовків, менше накладних витрат.

5. Кешування і CDN

Використовуй заголовки Cache-Control, ETag, Last-Modified.
Тоді браузер не робить нові запити, якщо ресурси не змінилися.

6. Lazy Loading

Завантажуй зображення, відео і JS тільки коли вони справді потрібні.

7. Inlining

Критичні CSS або SVG можна вставити прямо в HTML (<style> або <svg>).
Особливо важливо для Above-the-Fold контенту.

Цифри для орієнтиру

Тип ресурсу	Середня вага	Вплив на завантаження
CSS/JS	30-500 КБ	Блокують рендер
Зображення	100-1000 КБ	Довге завантаження
Шрифти	30-150 КБ	Можуть викликати Flash of Invisible Text
API-запити	100-500 мс latency	Затримка контенту

Навіть 10-20 дрібних файлів по 5 КБ можуть сповільнити сторінку на сотні мілісекунд - просто через мережеві затримки.

Результат оптимізації

Після мінімізації запитів:

швидший перший рендер (First Paint);
нижчий Time to Interactive (TTI);
менше блокувальних ресурсів;
краще SEO і Core Web Vitals;
користувачу здається, що сайт "літає".

Короткий висновок

Причина	Навіщо мінімізувати
Менше мережевих затримок	Швидше завантаження сторінки
Менше накладних витрат	Менше CPU і пам'яті
Краще на мобільних	Менша витрата батареї і трафіку
Краще SEO	Google ранжує швидкі сайти вище
Покращує UX	Користувач бачить контент швидше

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.