Сжатие данных: почему сайт тяжёлый даже без больших картинок

Типичный разговор: «Мы сжали все фотографии, поставили современный формат картинок, а сайт всё равно грузится долго». И действительно — открываешь страницу, изображений мало, они лёгкие, а до появления содержимого проходит четыре-пять секунд. Значит, вес создают не картинки.

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

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

Когда посетитель открывает адрес, браузер скачивает не один файл, а десятки. Условно их можно разделить на группы.

Разметка страницы. Собственно текст и структура. Обычно от 50 до 300 килобайт. На страницах с большими каталогами и фильтрами бывает и мегабайт.

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

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

Шрифты. Каждое начертание — отдельный файл. Обычный, полужирный, курсив, полужирный курсив — это четыре файла. Если на сайте два шрифта в четырёх начертаниях, получается восемь файлов общим весом до нескольких сотен килобайт.

Изображения. То, о чём думают в первую очередь и что чаще всего уже оптимизировано.

Сторонние подключения. Счётчики аналитики, чат, коллтрекинг, карты, рекламные сети, виджеты соцсетей, сервисы отзывов. Каждый подключает свои файлы, часто немаленькие, и не с вашего сервера, а со своего.

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

Что такое сжатие данных на сервере

Теперь главное. Текстовые файлы — разметка, стили, код — состоят из повторяющихся последовательностей символов. Их можно сжать точно так же, как файлы упаковывают в архив: в несколько раз, без потери содержимого.

Механизм работает так. Браузер, обращаясь к серверу, сообщает, какие способы сжатия он понимает. Сервер, если умеет, сжимает файл перед отправкой и помечает, каким способом. Браузер получает сжатый файл, распаковывает и использует. Для посетителя это происходит незаметно, а объём переданных данных сокращается кратно.

Насколько кратно: текстовые файлы обычно сжимаются в три-пять раз. Файл стилей на 400 килобайт превращается в 80. Файл со скриптами на 300 килобайт — в 70. По странице целиком экономия часто составляет от половины до трёх четвертей объёма.

Существует два распространённых способа сжатия. Более старый поддерживается всеми браузерами и включён почти везде. Более новый сжимает лучше — обычно на 15–20 процентов сильнее — и тоже поддерживается всеми современными браузерами. Разумная настройка: включены оба, сервер сам выбирает подходящий для конкретного посетителя.

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

Как проверить, включено ли сжатие

Самый простой способ — воспользоваться любым публичным сервисом проверки скорости сайта: они прямо указывают, сжимаются ли текстовые ресурсы, и показывают, сколько можно сэкономить.

Второй способ — в инструментах разработчика браузера. Открыть панель, вкладку с сетевыми запросами, обновить страницу и посмотреть на список загруженных файлов. Там видно два размера: сколько файл весит на диске и сколько реально передано по сети. Если эти числа совпадают для текстовых файлов — сжатие не работает.

Третий способ — по объёму. Если главная страница сайта передаёт три-четыре мегабайта, а изображений на ней мало, почти наверняка сжатие отключено или настроено неправильно.

Настраивается сжатие на стороне сервера — либо в панели управления хостингом, либо в конфигурации веб-сервера. На большинстве современных хостингов оно включено по умолчанию, но исключения встречаются регулярно, особенно на выделенных серверах, которые настраивали давно и вручную.

Отдельный случай — когда сжатие включено для одних типов файлов и отключено для других. Например, разметка сжимается, а стили и скрипты нет. Это встречается часто и проверяется по списку файлов.

Что ещё утяжеляет страницу и как это лечить

Сжатие — важная, но не единственная мера. Полный список того, что стоит проверить.

Неиспользуемые стили и код. Готовый шаблон содержит оформление для десятков блоков, из которых вы используете пять. Всё остальное всё равно скачивается. Решение — чистка файла стилей от неиспользуемого. Работа трудоёмкая, но на тяжёлых шаблонах даёт большой эффект.

Дублирующиеся библиотеки. Бывает, что одна и та же библиотека подключается дважды: один раз шаблоном, второй — модулем. Проверяется по списку загружаемых файлов.

Скрипты, загружаемые до отображения страницы. Если код подключён так, что браузер обязан скачать и выполнить его прежде, чем показать содержимое, посетитель смотрит на белый экран. Решение — перенести подключение вниз страницы или пометить его как отложенное. Это часто даёт больший эффект, чем уменьшение веса.

Шрифты. Подключайте только те начертания, которые действительно используете. Если полужирный курсив на сайте не встречается ни разу, не надо его грузить. Плюс полезно указать, чтобы до загрузки шрифта текст показывался системным — иначе посетитель несколько секунд видит пустое место вместо текста.

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

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

Отсутствие кэширования на стороне сервера. Готовые страницы должны отдаваться из кэша, а не собираться заново при каждом обращении. Это влияет не столько на вес, сколько на время до первого байта — то есть на паузу перед началом загрузки.

Изображения не по размеру. Частая история: фотография в оригинале 4000 пикселей по ширине выводится в блоке шириной 300 пикселей, а браузер скачивает оригинал. Даже сжатая, такая фотография весит много. Изображения нужно готовить под тот размер, в котором они показываются, и отдавать телефонам уменьшенные варианты.

Видео, встроенное напрямую. Один ролик может весить больше, чем весь остальной сайт. Видео должно подгружаться по нажатию, а не автоматически.

Почему вес важнее, чем кажется

Три причины, по которым за этим стоит следить.

Мобильный интернет. Большинство посетителей приходит с телефонов, и далеко не все — по быстрой связи. В районах, в поездках, в помещениях с плохим приёмом скорость падает в разы. Страница на три мегабайта грузится там десятки секунд. Страница на 600 килобайт — несколько секунд. Это разница между «остался» и «ушёл».

Трафик посетителя. У части людей мобильный интернет ограничен по объёму. Тяжёлый сайт расходует его заметно.

Нагрузка на сервер. Чем больше данных отдаёт сервер, тем больше ресурсов уходит на каждого посетителя. При всплеске посещаемости — например, после запуска рекламы — тяжёлый сайт упирается в лимиты хостинга и начинает отдавать ошибки. Сжатие снижает объём передачи в разы и заметно повышает запас прочности.

Как это связано с продвижением 3 в 1

Скорость и вес страницы влияют на все три точки, откуда приходят обращения.

Поиск и нейропоиск. Медленный сайт хуже обходится роботами: за отведённое время робот успевает обойти меньше страниц, и новые материалы попадают в индекс с задержкой. Отдельно про нейропоиск: роботы, собирающие данные для генеративных ответов, работают с текстом страницы. Если содержимое появляется только после выполнения тяжёлого кода, они могут не получить его вовсе — и в ответ попадёт материал конкурента, у которого текст отдаётся сразу. Это ещё один аргумент за то, чтобы основное содержимое было в разметке страницы, а не подгружалось скриптами.

Яндекс.Справочник и карточка в Яндекс Бизнесе. Человек переходит из карточки на сайт с телефона, часто на ходу и при плохой связи. Тяжёлая страница на этом переходе теряет самых готовых к обращению людей. Практическая мера — держать в карточке полный набор информации: услуги с ценами, фотографии, часы, кликабельный телефон. Тогда часть людей сделает обращение прямо из карточки, не заходя на сайт.

2ГИС. Переход из мобильного приложения открывает страницу во встроенном окне браузера, где всё работает медленнее, чем в обычном. Тяжёлый сайт там особенно заметен. Проверять скорость стоит именно в этом сценарии — открыв свой сайт из приложения, а не набрав адрес на компьютере.

Что измерять

Смотреть надо на обращения, а не на позиции: позиции у каждого пользователя свои — зависят от региона, устройства и истории поиска, поэтому ни целью, ни показателем быть не могут.

Что имеет смысл отслеживать:

Вес страницы и время загрузки — по основным типам страниц: главная, страница услуги, страница каталога, карточка товара. Отдельно для компьютера и для телефона на медленном соединении.

Время до появления содержимого. Важнее общего времени загрузки: посетителя интересует не когда догрузится последний виджет, а когда он увидит текст.

Доля посетителей, уходящих сразу — по устройствам. Если на телефонах она заметно выше, чем на компьютерах, это почти всегда признак проблем со скоростью.

Количество обращений по устройствам. Главный показатель. Настраивается через цели в Яндекс.Метрике, звонки — через коллтрекинг (Коллтач или Каллибри). Если доля мобильных посетителей высокая, а доля мобильных обращений низкая — проблема в мобильной версии, и скорость обычно в числе причин.

Обращения до и после работ. Сравнение за сопоставимые периоды. Именно эта цифра отвечает на вопрос, стоило ли заниматься оптимизацией.

Практический порядок работ

Если сайт тяжёлый, разумная последовательность такая:

1. Проверить, включено ли сжатие текстовых файлов на сервере. Это самая дешёвая мера с самым быстрым эффектом — иногда полчаса работы дают сокращение объёма вдвое.
2. Настроить кэширование в браузере посетителя для файлов, которые не меняются.
3. Провести ревизию сторонних подключений и убрать неиспользуемые.
4. Проверить изображения: соответствуют ли размеры тем, в которых они показываются.
5. Перенести подключение скриптов так, чтобы они не блокировали отображение.
6. Сократить набор шрифтов и начертаний.
7. Настроить кэширование готовых страниц на сервере.
8. Почистить неиспользуемые стили — самая трудоёмкая часть, делается последней.

Первые три пункта обычно дают основную часть эффекта и не требуют вмешательства в код сайта.

Про систему управления сайтом

Часть этих настроек делается на уровне системы управления сайтом, часть — на уровне сервера.

Мы работаем на ХостСМС: в ней есть встроенное кэширование страниц, объединение и сжатие файлов стилей и скриптов, управление подключением ресурсов. Это позволяет сократить и количество запросов, и общий объём без правки шаблонов вручную. Из распространённых альтернатив в 1С-Битрикс похожие механизмы есть, но система в целом требовательнее к ресурсам сервера; в ВордПресс оптимизация обычно строится на дополнительных модулях, и их сочетание нередко само становится источником проблем.

Но какая бы система ни использовалась, сжатие на сервере от неё не зависит — это настройка хостинга. И проверять её надо в первую очередь.

Итог

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

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

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