На сайте строительной компании «ЭкоСтиль» мы оптимизировали изображения и порядок их загрузки. Сравнили шесть типов страниц на компьютере и смартфоне: сколько данных передаётся при первом открытии и сколько — после просмотра страницы целиком.
Основной показатель кейса — фактически загруженный объём данных при открытии без прокрутки. Замеры проведены в Chrome в одинаковых режимах до и после оптимизации. Полная прокрутка измерялась отдельно, чтобы увидеть догрузку изображений. Вес внешних изображений проверялся отдельно. Все значения приведены в МиБ (1 МиБ = 1 048 576 байт).
Шесть измеренных страниц:
Как читать полосы WebP и lazy-load. Первая полоса показывает экономию от исходного веса при открытии страницы без прокрутки. Вторая полоса имеет точно такую же длину, как заполненная зелёная часть первой, и ориентировочно распределяет эту экономию между уменьшением веса файлов и отложенной загрузкой. Разбивка рассчитывается по разнице сценариев без скролла и с полной прокруткой; это оценка механизма, а не отдельный лабораторный замер воздействия каждого приёма. На страницах со смешанными изменениями вклад не разделяется искусственно.
| Страница | Вес до → после | Изменение | Во сколько раз |
|---|---|---|---|
| Главная | 10,06 → 6,57 МиБ | −34,7% | 1,53× |
| Каталог проектов | 12,20 → 5,63 МиБ | −53,9% | 2,17× |
| Карточка проекта | 6,01 → 5,79 МиБ | −3,7% | 1,04× |
| Каталог фотоотчётов | 8,08 → 2,28 МиБ | −71,8% | 3,55× |
| Карточка фотоотчёта | 5,73 → 4,69 МиБ | −18,1% | 1,22× |
| Фотогалерея | 9,12 → 2,40 МиБ | −73,7% | 3,81× |
Суммарный вес шести страниц без прокрутки: 51,21 → 27,35 МиБ. Экономия — 23,86 МиБ (−46,6%). Показана сумма шести отдельных посещений, а не вес одного запроса.
| Страница | Вес до → после | Изменение | Во сколько раз |
|---|---|---|---|
| Главная | 10,03 → 8,54 МиБ | −14,9% | 1,17× |
| Каталог проектов | 12,20 → 5,84 МиБ | −52,1% | 2,09× |
| Карточка проекта | 6,01 → 5,91 МиБ | −1,8% | 1,02× |
| Каталог фотоотчётов | 8,08 → 2,64 МиБ | −67,4% | 3,06× |
| Карточка фотоотчёта | 5,73 → 5,04 МиБ | −12,1% | 1,14× |
| Фотогалерея | 9,12 → 3,63 МиБ | −60,2% | 2,51× |
Суммарный вес шести страниц без прокрутки: 51,17 → 31,59 МиБ. Экономия — 19,59 МиБ (−38,3%). Показана сумма шести отдельных посещений, а не вес одного запроса.
Изображения нижних блоков теперь могут подгружаться по мере просмотра, поэтому полный вес страницы закономерно выше первоначального. Эту разницу не нужно путать с потерей эффективности: объём данных передаётся тогда, когда пользователь добирается до соответствующего содержимого.
На мобильном итоговая сумма после полной прокрутки составила 36,26 МиБ против 27,35 МиБ при первоначальном открытии; на ПК — 42,10 против 31,59 МиБ. Даже при полном просмотре совокупный вес шести страниц остаётся ниже исходного: на 29,2% для мобильного сценария и на 17,8% для ПК.
Изображения стали передаваться в более экономичном формате. Это уменьшает объём загружаемых данных без необходимости убирать фотографии из каталогов, карточек проектов или отчётов о строительстве.
Изображения, которые посетитель ещё не увидел, не обязаны загружаться сразу. Для длинных каталогов, галерей и фотоотчётов это особенно заметно в первоначальном весе страницы.
В каталогах и фотогалерее много изображений, поэтому сочетание WebP и отложенной загрузки даёт максимальный эффект. На некоторых страницах выигрыш скромнее: большую часть передаваемых данных могут занимать ресурсы, не связанные с оптимизацией фотографий.
На главной остаются дополнительные резервы: статичная графика, фоновые изображения и изображения из публикаций ВК. Их отдельная оптимизация и отложенная загрузка при необходимости могут сократить первоначальный объём передаваемых данных ещё ориентировочно на 3–4 МиБ. Это прогноз по структуре оставшихся ресурсов, а не уже достигнутая экономия; точный результат определяется только после реализации и повторного измерения.
Почему мы не приводим показатели Google PageSpeed. PageSpeed Insights оценивает целый комплекс факторов: скорость работы скриптов, стили, шрифты, сторонние сервисы, характеристики тестовой среды и многое другое. Сам по себе балл не показывает, сколько мегабайт реально скачал пользователь. Здесь мы рассматриваем конкретную задачу — уменьшение передаваемых данных за счёт WebP и lazy-load — и поэтому приводим фактический сетевой вес страниц в сопоставимых сценариях.
По шести типам страниц совокупный первоначальный вес на мобильном устройстве сократился с 51,21 до 27,35 МиБ, то есть на 46,6%. На ПК — с 51,17 до 31,59 МиБ (−38,3%). Максимальное снижение веса отдельной страницы наблюдается в фотогалерее на мобильном: 9,12 → 2,40 МиБ, почти в 3,81 раза.
Это не оценка по условным баллам, а измеряемое уменьшение объёма данных, который браузеру приходится передавать при использовании сайта.
Смотреть услугу
ускорения и оптимизации там есть всё:
цены, состав работ, сроки и примеры!
Либо просто напишите нам на info@bobers.ru или в онлайн-чат — или звоните +7(900) 015-5777
+7 (900) 015-57-77
info@bobers.ru
