Новый формат
Размер веб-страницы: как узнать вес и ускорить загрузку
Размер (вес) страницы — сколько байт браузер скачивает, чтобы показать документ: HTML, CSS, JS, картинки, шрифты, сторонние виджеты. Чем больше объём и чем хуже сжатие, тем дольше ждут люди на слабом канале.
Ниже — зачем мерить вес, как посмотреть его за минуту и что обычно даёт самый быстрый выигрыш. Это про гигиену скорости, не про «ТОП за счёт KB».
Зачем знать размер страницы
Большой объём на медленном LTE/3G = долгий LCP, пустой экран, уход до контента. На хостинге и CDN лишний трафик стоит денег. Для SEO важны полевые метрики скорости и то, дочитывают ли страницу.
Вес — простой сигнал «где жир»: сравниваете URL конкурента и свой, видите скачок после внедрения виджета, контролируете релиз.
Когда мерить обязательно:
- после редизайна / нового шаблона;
- перед рекламным заливом на посадочную;
- если растут отказы на мобилке;
- при жалобе «сайт тормозит».
Как посмотреть вес в DevTools
Откройте страницу → F12 / DevTools → вкладка Network. Включите Disable cache, обновите. Внизу увидите число запросов и объём переданных данных. Сортировка по Size показывает самых тяжёлых «едоков».
Смотрите отдельно transferred (по сети) и resource size. Кэш искажает картину — для аудита холодная загрузка важнее.
Мини-ритуал:
- инкогнито + disable cache;
- мобильный user-agent / throttling;
- зафиксировать top-10 ресурсов по Size;
- повторить на ключевой посадочной и карточке.
Онлайн-сервисы и что они показывают
PageSpeed Insights, WebPageTest, GTmetrix и аналоги дают оценку веса, цепочку запросов и рекомендации. Цифры сервисов расходятся из‑за локации и кэша — сравнивайте относительный до/после на одном инструменте.
Не гонитесь за «100 баллов» ради скрина. Цель — убрать лишние мегабайты и улучшить ощущаемую скорость.
В отчёте ищите:
- total page weight;
- картинки без сжатия/современных форматов;
- неиспользуемый CSS/JS;
- блокирующие скрипты в head;
- лишние редиректы.
Что обычно раздувает страницу
Неоптимизированные фото и фоны, видео автозапуском, куча шрифтов, тяжёлые слайдеры, метрики и чаты «на всякий случай», дубли библиотек, карта на всю главную без ленивой подгрузки.
На CMS — плагины, каждый со своим CSS/JS. Аудит плагинов часто снимает больше, чем «подкрутить качество JPEG на 5%».
Типовой топ виновников:
- изображения > 200–300 KB без нужды;
- hero в PNG вместо WebP/AVIF;
- весь jQuery UI ради одной кнопки;
- виджеты соцсетей и онлайн-консультант;
- неминифицированные бандлы.
Как ускорить: порядок работ
Сначала режьте самый тяжёлый вклад в Network. Картинки: сжатие, современные форматы, srcset, lazy-load ниже первого экрана. Текст: Brotli/Gzip. JS/CSS: убрать неиспользуемое, defer/async, код-сплит.
Кэш браузера и CDN — после того, как файлы стали лёгкими. Иначе быстро раздаёте тот же жир.
Чеклист на спринт:
- сжать hero и карточки товаров;
- включить сжатие на сервере;
- отложить некритичный JS;
- убрать 1–2 лишних виджета;
- перемерить DevTools до/после.
Контроль в проде
Заведите бюджет веса для шаблонов (главная, категория, статья). В CI или чеклисте релиза — Network snapshot. Следите за полевыми CWV в панелях вебмастеров.
После крупных релизов сравнивайте не только баллы Lighthouse, но и реальный transfer size ключевых URL.
Регламент:
- эталонные URL и их лимиты;
- ответственный за ассеты;
- запрет «залить 5MB фото в контент» без сжатия;
- раз в квартал — повторный аудит.
Частые вопросы
Вес страницы = размер HTML-файла?
Нет. Смотрите суммарный transfer size всех ресурсов документа (и кэш vs сеть). HTML часто мелочь рядом с картинками и JS.
Какой вес нормальный?
Ориентиры зависят от типа. Для посадочной на 3G лучше укладываться в разумные сотни KB–пару MB, не в десятки мегабайт без нужды. Важнее LCP/INP и полевые данные, чем одна цифра.
Где смотреть в браузере?
DevTools → Network: колонкa Size, итог внизу. Отключите кэш для «холодной» загрузки. Performance/Lighthouse — доп. диагностика.
Влияет ли вес на SEO напрямую?
Через скорость и поведение: тяжёлая страница хуже Core Web Vitals и отказов. Поисковик не ранжирует «по KB», но медленный UX бьёт видимость косвенно.
Сжимать картинки достаточно?
Часто да как первый шаг, но тяжёлый JS/CSS и лишние виджеты тоже критичны. Режьте по вкладу в Network.
Gzip/Brotli обязательны?
Да для текстовых ресурсов на проде. Без сжатия HTML/CSS/JS раздуваются в разы.
CDN уменьшает вес?
Не вес файла, а задержку доставки. Вес режут оптимизацией ассетов; CDN — близость и кэш.
Мобилка и десктоп одинаковы?
Часто нет: другие картинки, меню, скрипты. Мерим оба профиля и реальные устройства/throttling.
Страницы тяжёлые и долго грузятся?
Снимем вес в DevTools и урежем картинки/JS — без культа «100 баллов».
Обсудить задачу
