Как сделать сайт меньше в 2026: вес страницы и скорость загрузки

За желанием «сделать сайт меньше» стоят две разные задачи. Первая: страница не помещается в окно, и её нужно уменьшить визуально, это решается сочетанием клавиш за секунду. Вторая, куда более частая: сайт весит несколько мегабайт, долго открывается на телефоне, и человек уходит раньше, чем увидит содержимое. Ниже коротко про масштаб и подробно про вес: из чего он складывается, как его измерить и что сокращать по шагам.

«Меньше» на экране: масштаб и адаптивность

Если сайт просто не влезает в окно браузера, уменьшите масштаб: на Windows и Linux клавиши Ctrl и минус, на Mac Cmd и минус. Каждое нажатие убавляет масштаб на шаг (90%, 80%, 75% и дальше). Вернуть исходный вид: Ctrl и 0 (Cmd и 0). Тот же пункт есть в меню браузера рядом со значением масштаба, а в Chrome масштаб можно закрепить для конкретного сайта в настройках, тогда он не будет сбрасываться.

Важная оговорка: масштаб меняет картинку только у вас. У посетителей свои настройки и свои экраны. Если сайт вылезает за края и требует горизонтальной прокрутки у всех на телефонах, дело не в масштабе, а в вёрстке: не задан мета-тег viewport, у блоков жёсткая ширина в пикселях, картинка или таблица шире экрана. Лечится это адаптивностью, и разбор этой задачи целиком у нас есть в материале про мобильную версию сайта.

Дальше в статье речь только про второй смысл: как уменьшить вес страницы, чтобы она открывалась быстро.

Сколько весит обычная страница и из чего складывается вес

Чтобы понимать, много у вас или нормально, нужен ориентир. По данным Web Almanac 2025 от HTTP Archive, медианная страница весит 2 862 КБ на десктопе и 2 559 КБ на мобильных. Больше всего занимают картинки (1 058 КБ, то есть 36,9% веса десктопной страницы), на втором месте JavaScript (697 КБ, 24,3%), дальше шрифты и стили.

Медиана не эталон, а середина по больнице: половина сайтов тяжелее. Для простого лендинга или сайта-визитки реалистичная цель на первую загрузку это меньше 1 МБ, и в неё вполне можно уложиться, не отказываясь от фотографий.

Проверяет вас не только человек, но и поиск. Google измеряет три показателя Core Web Vitals: LCP (загрузка главного элемента экрана) должен укладываться в 2,5 секунды, INP (отклик на действие) в 200 миллисекунд, CLS (смещения вёрстки) в 0,1, и считаются они по 75-му процентилю реальных визитов. Лишние мегабайты бьют прежде всего по LCP.

По теме: Как сделать сайт-визитку в 2026: три способа и готовый промпт

Как измерить вес и найти самое тяжёлое

Оптимизировать наугад бессмысленно: почти всегда 80% веса дают три-четыре файла. Порядок замера такой.

1. Откройте PageSpeed Insights и вставьте адрес страницы. Сервис прогоняет её через Lighthouse на серверах Google и, если у сайта достаточно посещений, показывает ещё и данные реальных пользователей из отчёта CrUX (как устроен сервис). Смотрите не на цифру балла, а на разделы «Диагностика» и «Рекомендации»: там перечислены конкретные файлы и сколько килобайт можно сэкономить.
2. Если сайт ещё не опубликован или закрыт паролем, запустите Lighthouse прямо в браузере: Chrome, клавиша F12, вкладка Lighthouse, кнопка «Analyze page load». Тот же движок, но работает с локальной версией.
3. Откройте вкладку Network (в тех же инструментах разработчика), поставьте галочку Disable cache и перезагрузите страницу. Внизу появится строка с итогом: сколько запросов и сколько передано. Отсортируйте таблицу по колонке Size по убыванию.
4. Переключите фильтры Img, JS, Font по очереди: сразу видно, какая категория съедает вес именно у вас. Выпишите десять самых тяжёлых файлов, с ними и будете работать.
5. Повторите замер после правок и сравните итоговую цифру. Без сравнения «до и после» вы не поймёте, что именно помогло.

Сначала замер, потом правки. Половина сайтов, которые «тормозят», лечится заменой двух фотографий и отключением одного виджета, а вовсе не переездом на новый хостинг.

Картинки: где прячется половина веса

Самая частая история: фотография прямо с телефона, 4000 пикселей по ширине и 6 МБ весом, стоит в блоке шириной 800 пикселей. Браузер честно скачивает все 6 МБ и уменьшает их на экране. Порядок действий с каждой картинкой такой.

1. Уменьшите размер в пикселях под реальное место на странице. Ориентир: ширина блока, умноженная на 2 (запас на экраны с высокой плотностью). Для блока 800 пикселей достаточно файла 1600 пикселей, больше не нужно ни при каких условиях.
2. Пересохраните в современном формате. WebP по данным Google даёт файлы на 25-34% меньше JPEG при том же качестве и на 26% меньше PNG в режиме без потерь. AVIF жмёт ещё плотнее и его понимают 93% браузеров (Chrome с 85 версии, Safari с 16.4, Firefox с 93). Удобный инструмент: Squoosh от Google Chrome Labs, он работает прямо в браузере, файлы никуда не загружаются.
3. Пропишите атрибуты width и height у каждого тега img. Браузер заранее резервирует место, и вёрстка не прыгает при загрузке, это прямо снижает CLS.
4. Добавьте атрибут loading="lazy" всем картинкам ниже первого экрана: они загрузятся, только когда человек до них доскроллит. Главную картинку первого экрана лениво грузить нельзя, оставьте её обычной и добавьте fetchpriority="high", иначе вы своими руками испортите LCP.
5. Для разных экранов отдавайте разные файлы через srcset и sizes: телефон получит вариант на 600 пикселей, десктоп на 1600. Это самый заметный выигрыш на мобильном трафике.
6. Декоративные картинки замените на CSS: градиент, цвет, простая фигура. Иконки держите в SVG, они весят единицы килобайт и не мылятся.

Отдельная статья расходов это фоновое видео и тяжёлые фоны: они легко перевешивают весь остальной сайт. Что с ними делать и чем заменить, мы разбирали в материале про фон сайта.

Шрифты, скрипты и стили: что убрать без потерь

Когда картинки приведены в порядок, вторым слоем идут файлы, которые обычно ставят «на всякий случай» и потом не пересматривают.

• Шрифты. Каждое начертание и каждая насыщенность это отдельный файл. Оставьте два (обычный и жирный), формат только woff2, и положите файлы на свой сервер вместо загрузки со стороннего сервиса: в России сторонние шрифтовые CDN у части пользователей открываются с задержкой и блокируют отрисовку. Добавьте font-display: swap, чтобы текст показался сразу.
• Сторонние виджеты. Онлайн-чат, форма обратного звонка, карта, счётчики, пиксели рекламных систем. Каждый тянет свой скрипт. Пройдитесь по списку и честно ответьте, какими вы пользовались за последний месяц, остальные удалите.
• Порядок подключения скриптов. Всё, что не рисует первый экран, подключайте с атрибутом async или defer. Синхронный скрипт в head останавливает отрисовку страницы до своей загрузки.
• Библиотеки ради одного эффекта. Слайдер, библиотека анимаций, набор иконок целиком ради пяти иконок. Обычно то же самое делается несколькими строками CSS.
• Минификация. CSS и JS в собранном виде (без пробелов и комментариев) весят на 20-40% меньше исходников. У конструкторов это включено по умолчанию, у самописного сайта проверьте.
• Видео. Ставьте preload="none" и картинку-постер, чтобы файл не начинал качаться до того, как человек нажал play.

По теме: Как сделать сайт на Битриксе в 2026: Битрикс24 или CMS

Сжатие на сервере и кэш

Текстовые файлы (HTML, CSS, JS, SVG) сервер должен отдавать сжатыми. Классический вариант это gzip, более плотный это brotli, его поддерживают 95,7% браузеров, включая все актуальные версии Chrome, Safari, Firefox и Edge. На типичном наборе стилей и скриптов brotli выигрывает у gzip заметные проценты, и включается он в большинстве панелей хостинга одной галочкой, а у CDN вроде Cloudflare работает по умолчанию.

Проверить просто: вкладка Network, кликните по файлу стилей, раздел Headers, строка content-encoding. Если там br или gzip, всё в порядке. Если строки нет, сжатие выключено, и вы отдаёте файлы в два-три раза тяжелее, чем могли бы.

Второй бесплатный выигрыш это кэш. Картинкам, шрифтам и статике задайте длинный срок хранения в заголовке Cache-Control: при повторном визите браузер не будет качать их заново. На постоянных читателей это влияет сильнее любой оптимизации картинок.

Как попросить ИИ переписать тяжёлую страницу

Если сайт собран на HTML и CSS или сделан через ИИ-инструмент, правки можно не делать руками. Ассистенту (Claude, ChatGPT, Codex) нужно дать вводные, иначе он начнёт улучшать всё подряд и сломает вёрстку.

• Список десяти самых тяжёлых файлов из вкладки Network с их весом.
• Скопированные рекомендации из отчёта PageSpeed Insights.
• Сам код страницы (HTML и CSS) или ссылку на файлы проекта.
• Запрет: не менять текст, структуру блоков и внешний вид.

Формулировка запроса примерно такая: «Вот HTML и CSS страницы и отчёт PageSpeed. Задача: уменьшить вес первой загрузки. Проставь width, height и loading="lazy" всем картинкам ниже первого экрана, кроме главной картинки экрана. Собери srcset для двух размеров. Убери неиспользуемые правила CSS и подключения шрифтов, которые нигде не применяются. Верни изменённые файлы и отдельным списком объясни каждую правку. Текст, структуру и внешний вид не меняй».

После правок обязательно сравните вес до и после в той же вкладке Network и откройте страницу на телефоне: ИИ иногда «оптимизирует» так, что пропадает картинка или ломается сетка. Если вы только собираете сайт и хотите сразу делать его лёгким, посмотрите общий разбор, как сделать сайт с помощью ИИ, а если правите код вручную, пригодится база по сайту на HTML.

Частые вопросы

Как уменьшить масштаб сайта на компьютере?

Зажмите Ctrl и нажимайте минус (на Mac Cmd и минус). Ctrl и 0 возвращает 100%. Настройка запоминается для конкретного сайта и на других сайтах не действует.

Сколько должен весить сайт?

Жёсткой нормы нет, есть ориентир. Медиана по вебу около 2,5-2,9 МБ, но это средняя температура. Для лендинга и визитки цельтесь в 1 МБ на первую загрузку, для магазина с фотографиями товаров в 1,5-2 МБ. Главный критерий не вес, а время: главный элемент экрана должен появляться быстрее 2,5 секунды.

А если сайт на конструкторе и кода у меня нет?

Часть рычагов всё равно у вас: замените тяжёлые фотографии на сжатые (перед загрузкой прогоните через Squoosh), удалите неиспользуемые виджеты и интеграции, откажитесь от фонового видео и анимаций, уберите лишние шрифты в настройках темы. Сжатие, кэш и минификацию конструктор обычно уже включил сам.

Вес страницы влияет на позиции в поиске?

Влияет, но не напрямую и не решающим образом. Скорость входит в оценку страницы у Google через Core Web Vitals, у Яндекса тоже учитывается поведение пользователей. При этом медленная страница теряет посетителей ещё до того, как повлияет на позиции: человек закрывает вкладку, не дождавшись загрузки, и это бьёт по заявкам сильнее любого ранжирования.