Оптимизация — каталог и фотоотчёты стали в разы легче

Каталог и фотоотчёты стали в разы легче: вес страниц снижен на 93–94%, WebP-покрытие выросло практически с нуля

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

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

63→4 МБ

вес страницы «Каркасные дома» до/после WebP (−94%)

−93%

вес страницы «Фотоотчёты»: 46,3 → 3,2 МБ

81,4%

WebP-покрытие главной страницы (было 5,7%)

служебных PNG переведены в WebP

Что сделали

Фотографии на ключевых страницах — в WebP

На старте собственные изображения сайта вообще не отдавались в WebP. Ненулевые 5,7% на главной и 80,6% на «Отзывах» давали только сторонние превью видео. Перевели фотографии проектов, каталога и фотоотчётов в WebP без потери качества показа.

Служебная графика шаблона — тоже в WebP

43 PNG-файла темы сайта (иконки, декоративные элементы, фоновые изображения) переведены в WebP. Например, фон меню полегчал со 101 КБ до 11,8 КБ — почти в 9 раз.

Было → стало: по страницам

Ниже — независимый замер WebP-покрытия и веса страницы до и после внедрения, по шести ключевым страницам сайта. «До» — самый первый замер, сделанный ещё до начала работ.

Страница	WebP-покрытие: было → стало	Вес страницы, МБ: было → стало
Главная	5,7% → 81,4%	5,9 → 3,6 −39%
Каркасные дома	0% → 64,7%	62,8 → 4,1 −94%
Проект «Кирсанов»	0% → 53,7%	3,8 → 2,1 −43%
Фотоотчёты	0% → 80,4%	46,3 → 3,2 −93%
Карточка фотоотчёта (дом 9×6)	0% → 59,7%	4,7 → 3,9 −16%
Отзывы	0% → 95,7%	9,0 → 2,2 −76%

«Отзывы»: WebP-покрытие — доля локально отдаваемых сайтом запросов изображений проекта с MIME image/webp. Скопированные в локальное зеркало превью учитываются; прямые запросы внешних CDN исключены из обеих колонок.

Разбор по страницам

Главная

Метрика	Было → стало
WebP-покрытие	5,7% → 81,4%
Вес страницы, МБ	5,9 → 3,6 −39%

Главная страница — первая точка контакта с сайтом. В исходном замере 5,7% WebP давали четыре сторонних превью видео; собственные изображения сайта в WebP не отдавались. После работ покрытие выросло до 81,4%. Вес страницы снизился с 5,9 до 3,6 МБ — первый экран открывается заметно быстрее.

Каркасные дома

Метрика	Было → стало
WebP-покрытие	0% → 64,7%
Вес страницы, МБ	62,8 → 4,1 −94%

Самый заметный результат раунда. Каталог каркасных домов — витрина десятков проектов с большим количеством фотографий, и на старте WebP на этой странице не использовался вовсе. После перевода изображений покрытие выросло до 64,7%, а вес страницы упал с 62,8 МБ до 4,1 МБ — почти в 15 раз.

Проект «Кирсанов»

Метрика	Было → стало
WebP-покрытие	0% → 53,7%
Вес страницы, МБ	3,8 → 2,1 −43%

Карточка конкретного проекта — частая точка входа с рекламы. WebP на старте не использовался, после — 53,7% изображений в этом формате. Вес страницы снизился с 3,8 до 2,1 МБ.

Фотоотчёты

Метрика	Было → стало
WebP-покрытие	0% → 80,4%
Вес страницы, МБ	46,3 → 3,2 −93%

Второй по значимости результат раунда. Раздел «Фотоотчёты» отдавал самые тяжёлые фотографии со строек, и WebP на старте здесь тоже не использовался. После перевода изображений покрытие выросло до 80,4%, а вес страницы упал с 46,3 МБ до 3,2 МБ — тоже почти в 15 раз.

Карточка фотоотчёта (дом 9×6)

Метрика	Было → стало
WebP-покрытие	0% → 59,7%
Вес страницы, МБ	4,7 → 3,9 −16%

Отдельная карточка фотоотчёта — доверительный контент с фотографиями стройки. WebP на старте не использовался, после — 59,7% изображений в этом формате.

Отзывы

Метрика	Было → стало
WebP-покрытие изображений проекта	0% → 95,7%
Вес страницы, МБ	9,0 → 2,2 −76%

После оптимизации WebP-покрытие изображений на странице «Отзывы» выросло с 0% до 95,7%. До начала работ 15 локальных изображений страницы загружались в исходных форматах. После оптимизации в WebP отдавались 66 из 69 изображений, включая 52 превью отзывов и 14 шаблонных изображений. Одновременно общий вес страницы снизился с 9,0 до 2,2 МБ.

✓

Оригиналы под защитой

Все правки шаблонных файлов сделаны с резервными копиями. Ни один исходный файл не удалён.

✓

Ничего не сломалось

Все проверенные страницы отвечают 200, вёрстка и раскладка на месте, ошибок в консоли браузера нет — проверено вживую после внедрения.

✓

Каталог и фотоотчёты — в разы легче

Самые тяжёлые разделы сайта — каталог проектов и раздел фотоотчётов — стали легче почти в 15 раз: с десятков мегабайт до нескольких тысяч килобайт.

Что получил клиент

WebP-покрытие выросло на всех проверенных страницах — на «Каркасных домах» и «Фотоотчётах» поднялось с нуля до 64,7% и 80,4% соответственно;
вес «Каркасных домов» снижен с 62,8 МБ до 4,1 МБ (почти в 15 раз), «Фотоотчётов» — с 46,3 МБ до 3,2 МБ (тоже почти в 15 раз);
вес главной страницы снижен с 5,9 до 3,6 МБ;
43 служебных PNG-файла шаблона переведены в WebP — например, фон меню со 101 КБ до 11,8 КБ;
все изменения — с резервными копиями, без визуальных регрессий и ошибок в консоли.