Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Мінімізація HTTP-запитів». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Кожен HTTP-запит** - це окреме підключення до сервера (TCP, TLS-рукостискання), затримка (latency), поки триває запит-відповідь, і навантаження на сервер і мережу. **Ключове:** чим більше запитів, тим повільніше рендериться сторінка і гірші метрики на кшталт LCP, FCP і TTFB.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Коротко: чому це важливо Кожен HTTP-запит - це: - **окреме підключення** до сервера (TCP, TLS-рукостискання), - **затримка (latency)**, поки триває запит-відповідь, - **навантаження на сервер і мережу**. Чим більше запитів - тим **повільніше рендериться сторінка**, довше показується контент користувачу, і падають метрики на кшталт LCP, FCP і TTFB. --- ## Що відбувається при кожному запиті Коли браузер робить новий HTTP-запит (наприклад, за CSS, JS або картинкою): 1. **DNS-резолвінг** - знайти IP домену. 2. **TCP-з'єднання** - "рукостискання" клієнта і сервера. 3. **TLS-шифрування** (якщо HTTPS) - ще одне рукостискання. 4. **Запит -> відповідь** - дані починають завантажуватися. Навіть якщо ресурс маленький, ці етапи займають **десятки-сотні мілісекунд**. А якщо таких файлів сотні - затримка сумується. --- ## Чому це сповільнює сайт | Проблема | Що відбувається | |---|---| | **Довгі мережеві затримки** | Поки завантажуються всі файли, рендер відкладається | | **Блокувальні ресурси** | 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 | Користувач бачить контент швидше |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.