{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🚀 Кратко: почему это важно"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый HTTP-запрос — это:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"отдельное подключение"},{"type":"text","text":" к серверу (TCP, TLS-рукопожатие),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"задержка (latency)"},{"type":"text","text":", пока идёт запрос-ответ,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"нагрузка на сервер и сеть"},{"type":"text","text":"."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"👉 Чем больше запросов — тем "},{"type":"text","marks":[{"type":"bold"}],"text":"медленнее рендерится страница"},{"type":"text","text":", дольше показывается контент пользователю и падают метрики вроде LCP, FCP и TTFB."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 Что происходит при каждом запросе"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда браузер делает новый HTTP-запрос (например, за CSS, JS или картинкой):"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"DNS-резолвинг"},{"type":"text","text":" — найти IP домена."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"TCP-соединение"},{"type":"text","text":" — “рукопожатие” клиента и сервера."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"TLS-шифрование"},{"type":"text","text":" (если HTTPS) — ещё одно рукопожатие."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Запрос → ответ"},{"type":"text","text":" — данные начинают загружаться."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Даже если ресурс маленький, эти этапы занимают "},{"type":"text","marks":[{"type":"bold"}],"text":"десятки–сотни миллисекунд"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"А если таких файлов сотни — задержка суммируется."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚠️ Почему это замедляет сайт"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проблема"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что происходит"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Долгие сетевые задержки"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пока загружаются все файлы, рендер откладывается"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Блокирующие ресурсы"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"CSS и JS блокируют отображение контента"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Нагрузка на CPU и память"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Браузеру нужно обработать много файлов"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Больше соединений → больше энергии"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Особенно критично на мобильных"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Падение Core Web Vitals"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"LCP, FID, TBT, CLS ухудшаются"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💡 Примеры"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"❌ Плохо:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n\n\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"— 7 HTTP-запросов только ради CSS и JS."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✅ Лучше:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"— 2 запроса вместо 7."},{"type":"hardBreak"},{"type":"text","text":"CSS и JS минифицированы и объединены."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧰 Как уменьшить количество HTTP-запросов"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"1. 🧩 "},{"type":"text","marks":[{"type":"bold"}],"text":"Бандлинг и минификация"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Объединяй CSS и JS (Webpack, Vite, Rollup, esbuild, Next.js делает это сам)."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Минифицируй (удаление пробелов, сокращение имён переменных)."}]}]}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"2. 🖼️ "},{"type":"text","marks":[{"type":"bold"}],"text":"Спрайты для иконок"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"SVG-спрайты или один спрайт PNG вместо десятков мелких изображений."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В CSS можно использовать "},{"type":"text","marks":[{"type":"code"}],"text":"background-position"},{"type":"text","text":" для вырезания."}]}]}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"3. 🧃 "},{"type":"text","marks":[{"type":"bold"}],"text":"Используй "},{"type":"text","marks":[{"type":"code"}],"text":"image-set()"},{"type":"text","marks":[{"type":"bold"}],"text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"srcset"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вместо загрузки всех размеров картинок — загружай только нужный под экран."}]}]}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"4. ⚡ "},{"type":"text","marks":[{"type":"bold"}],"text":"HTTP/2 и HTTP/3"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Эти протоколы позволяют "},{"type":"text","marks":[{"type":"bold"}],"text":"мультиплексировать"},{"type":"text","text":" несколько файлов через одно соединение."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Но даже тогда — меньше запросов = меньше заголовков, меньше оверхеда."}]}]}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"5. 📦 "},{"type":"text","marks":[{"type":"bold"}],"text":"Кэширование и CDN"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Используй заголовки "},{"type":"text","marks":[{"type":"code"}],"text":"Cache-Control"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"ETag"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"Last-Modified"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Тогда браузер не делает новые запросы, если ресурсы не изменились."}]}]}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"6. 🧠 "},{"type":"text","marks":[{"type":"bold"}],"text":"Lazy Loading"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Загружай изображения, видео и JS только когда они действительно нужны."}]}]}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"7. 🧬 "},{"type":"text","marks":[{"type":"bold"}],"text":"Inlining"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Критические CSS или SVG можно вставить прямо в HTML ("},{"type":"text","marks":[{"type":"code"}],"text":"

Минимизация HTTP запросов

Комментарии