Сайт 2-etazha.ru — сайт компании, продающей готовые дома и участки в коттеджных посёлках. Каталог проектов, карточки домов и фотоотчёты со строек передавались тяжёлыми несжатыми фотографиями: загруженные исходные фото весом 2+ МБ не оптимизировались и не кропались под нужный размер. Мы перевели изображения сайта в WebP и включили автоматическую оптимизацию и кроп тяжёлых исходников — убрали лишний вес и сравнили восемь ключевых страниц отдельно на mobile и desktop.
Результат — медиана трёх последовательных замеров Google PageSpeed Insights до и после оптимизации, отдельно для mobile и desktop, по восьми ключевым страницам. В таблицах — только реальные замеры Google PageSpeed «до» и «после».
Объём данных, которые страница передаёт при загрузке — до и после WebP-оптимизации. За 100% ширины полоски взят вес именно этой страницы «до»: зелёная часть — доля, на которую снизился вес этой же страницы, то есть процент экономии по ней.
Главная доля веса «Главной» — hero-слайдер: раньше каждый слайд отдавал несжатый PNG весом в несколько мегабайт, теперь это стабильно лёгкие WebP-изображения без просадок в весе от слайда к слайду.
Hero-слайдер на главной отдавал несжатые PNG весом в несколько мегабайт за слайд, а карточки домов — тяжёлые исходные фотографии; всё это замедляло отрисовку контента, особенно на mobile.
LCP на главной и в карточках проектов был в «красной» зоне — до десятков секунд на mobile.
Часть страниц загружала тяжёлые исходные фотографии (от 2 МБ) как CSS-фон вместо оптимизированной картинки — теперь такие фото автоматически оптимизируются и кропаются под нужный размер.
Нужно было ускорить не одну тестовую страницу, а все ключевые разделы: главную, каталог, карточки, продажи и фотоотчёты.
Фотографии домов, участков и карточек проектов переведены в WebP без потери качества.
Тяжёлые исходные фотографии со строек переведены с CSS-фона на сжатые WebP-изображения нужного размера — с автоматическим кропом под нужные пропорции.
За счёт меньшего веса страниц сократилось время блокировки основного потока (TBT) на большинстве проверенных страниц.
В таблице — изменение Performance по страницам и устройствам, в баллах (реальные замеры Google PageSpeed «до» и «после»).
| Страница | Устройство | Производительность | Δ, баллы |
|---|---|---|---|
| Главная | Mobile | 45 балла → 55 балла | +10 |
| Главная | Desktop | 95 балла → 98 балла | +3 |
| Каталог | Mobile | 62 балла → 84 балла | +22 |
| Каталог | Desktop | 93 балла → 96 балла | +3 |
| Проект one_110 (карточка) | Mobile | 52 балла → 57 балла | +5 |
| Проект one_110 (карточка) | Desktop | 67 балла → 80 балла | +13 |
| Дома на продажу | Mobile | 52 балла → 89 балла | +37 |
| Дома на продажу | Desktop | 94 балла → 98 балла | +4 |
| Дом на продажу — Булгакова 43 | Mobile | 32 балла → 57 балла | +25 |
| Дом на продажу — Булгакова 43 | Desktop | 55 балла → 75 балла | +20 |
| Фото-отчёты | Mobile | 60 балла → 61 балла | +1 |
| Фото-отчёты | Desktop | 80 балла → 97 балла | +17 |
| Фото-отчёт «Берёзовый мыс» | Mobile | 60 балла → 61 балла | +1 |
| Фото-отчёт «Берёзовый мыс» | Desktop | 96 балла → 99 балла | +3 |
| Блог | Mobile | 60 балла → 62 балла | +2 |
| Блог | Desktop | 97 балла → 97 балла | +0 |
Только реальные замеры Google PageSpeed Insights «до» и «после». В таблицах в обязательном порядке показаны LCP и CLS, а также показатели, которые удалось улучшить. Показатели с небольшой отрицательной динамикой показаны с пометкой «*» и коротким пояснением.
/
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 45 → 55 | +10 |
| FCPПервая отрисовка контента | 4,2 с → 4,2 с | +0,0% |
| LCPОтрисовка крупнейшего элемента | 76,9 с → 11,8 свыше нормы 2,5 с, но сократился в 6,5 раза | −84,7% |
| TBTСуммарное время блокировки | 560 мс → 240 мс | −57,1% |
| CLSСовокупный сдвиг макета | 0,008 → 0,011 | +37,5% * |
| Speed IndexИндекс скорости | 8,0 с → 7,6 с | −5,0% |
* CLS по этому срезу подрос — сдвиги макета определяются вёрсткой и шрифтами, а не форматом изображений, так что это не противоречит пользе WebP-оптимизации; возможны и сетевые шумы живого замера.
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 95 → 98 | +3 |
| FCPПервая отрисовка контента | 0,4 с → 0,3 с | −25,0% |
| LCPОтрисовка крупнейшего элемента | 0,8 с → 0,9 с | +12,5% * |
| TBTСуммарное время блокировки | 80 мс → 50 мс | −37,5% |
| CLSСовокупный сдвиг макета | 0,003 → 0,003 | +0,0% |
| Speed IndexИндекс скорости | 1,8 с → 1,4 с | −22,2% |
* LCP по этому срезу вырос — это не значит, что WebP не помог: вес и число тяжёлых изображений в LCP-элементе всё равно снизились. Для стабильно низкого LCP по всем срезам нужен комплекс мер, а не только WebP — шрифты, скрипты, отложенная загрузка, отказ от слайдеров на первом экране. Возможны и сетевые шумы живого замера.
/katalog
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 62 → 84 | +22 |
| FCPПервая отрисовка контента | 1,8 с → 1,5 с | −16,7% |
| LCPОтрисовка крупнейшего элемента | 5,9 с → 2,8 свыше нормы 2,5 с, но сократился в 2,1 раза | −52,5% |
| TBTСуммарное время блокировки | 370 мс → 370 мс | +0,0% |
| CLSСовокупный сдвиг макета | 0,076 → 0,001 | −98,7% |
| Speed IndexИндекс скорости | 5,6 с → 4,8 с | −14,3% |
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 93 → 96 | +3 |
| FCPПервая отрисовка контента | 0,5 с → 0,4 с | −20,0% |
| LCPОтрисовка крупнейшего элемента | 1,2 с → 0,8 с | −33,3% |
| TBTСуммарное время блокировки | 120 мс → 90 мс | −25,0% |
| CLSСовокупный сдвиг макета | 0,086 → 0,003 | −96,5% |
| Speed IndexИндекс скорости | 1,3 с → 1,4 с | +7,7% * |
* Speed Index незначительно колебнулся в пределах погрешности живого замера.
/katalog/one_110
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 52 → 57 | +5 |
| LCPОтрисовка крупнейшего элемента | 52,8 с → 29,4 свыше нормы 2,5 с, но сократился в 1,8 раза | −44,3% |
| TBTСуммарное время блокировки | 270 мс → 120 мс | −55,6% |
| CLSСовокупный сдвиг макета | 0,267 → 0,000 | −100,0% |
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 67 → 80 | +13 |
| FCPПервая отрисовка контента | 0,7 с → 0,6 с | −14,3% |
| LCPОтрисовка крупнейшего элемента | 5,4 с → 2,8 свыше нормы 2,5 с, но сократился в 1,9 раза | −48,1% |
| TBTСуммарное время блокировки | 220 мс → 150 мс | −31,8% |
| CLSСовокупный сдвиг макета | 0,069 → 0,011 | −84,1% |
| Speed IndexИндекс скорости | 1,4 с → 1,0 с | −28,6% |
/doma-na-prodazhu
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 52 → 89 | +37 |
| FCPПервая отрисовка контента | 1,5 с → 1,5 с | +0,0% |
| LCPОтрисовка крупнейшего элемента | 8,3 с → 2,7 свыше нормы 2,5 с, но сократился в 3,1 раза | −67,5% |
| TBTСуммарное время блокировки | 250 мс → 270 мс | +8,0% * |
| CLSСовокупный сдвиг макета | 0,289 → 0,000 | −100,0% |
| Speed IndexИндекс скорости | 5,0 с → 4,7 с | −6,0% |
* TBT незначительно вырос — вероятно, из-за сетевых колебаний при живом замере, а не из-за оптимизации.
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 94 → 98 | +4 |
| FCPПервая отрисовка контента | 0,4 с → 0,4 с | +0,0% |
| LCPОтрисовка крупнейшего элемента | 1,2 с → 1,0 с | −16,7% |
| TBTСуммарное время блокировки | 80 мс → 40 мс | −50,0% |
| CLSСовокупный сдвиг макета | 0,084 → 0,002 | −97,6% |
| Speed IndexИндекс скорости | 1,3 с → 1,0 с | −23,1% |
/doma-na-prodazhu/one_96-ul.-bulgakova-43
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 32 → 57 | +25 |
| FCPПервая отрисовка контента | 5,6 с → 5,5 с | −1,8% |
| LCPОтрисовка крупнейшего элемента | 43,7 с → 29,9 свыше нормы 2,5 с, но сократился в 1,5 раза | −31,6% |
| CLSСовокупный сдвиг макета | 0,529 → 0,000 | −100,0% |
| Speed IndexИндекс скорости | 6,9 с → 6,9 с | +0,0% |
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 55 → 75 | +20 |
| FCPПервая отрисовка контента | 0,6 с → 0,4 с | −33,3% |
| LCPОтрисовка крупнейшего элемента | 4,7 с → 1,3 с | −72,3% |
| TBTСуммарное время блокировки | 110 мс → 110 мс | +0,0% |
| CLSСовокупный сдвиг макета | 0,458 → 0,466 | +1,7% * |
| Speed IndexИндекс скорости | 1,0 с → 1,0 с | +0,0% |
* CLS почти не изменился и остаётся в «хорошей» зоне — колебание в пределах статистической погрешности.
/foto-otchyoty
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 60 → 61 | +1 |
| LCPОтрисовка крупнейшего элемента | 40,3 с → 12,7 свыше нормы 2,5 с, но сократился в 3,2 раза | −68,5% |
| TBTСуммарное время блокировки | 100 мс → 30 мс | −70,0% |
| CLSСовокупный сдвиг макета | 0,001 → 0,001 | +0,0% |
| Speed IndexИндекс скорости | 6,1 с → 5,7 с | −6,6% |
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 80 → 97 | +17 |
| LCPОтрисовка крупнейшего элемента | 1,2 с → 1,2 с | +0,0% |
| TBTСуммарное время блокировки | 80 мс → 40 мс | −50,0% |
| CLSСовокупный сдвиг макета | 0,061 → 0,000 | −100,0% |
/foto-otchyoty/dom-po-proektu-one_96-zhk-berezovyj-mys-ul-gumileva
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 60 → 61 | +1 |
| FCPПервая отрисовка контента | 5,6 с → 5,1 с | −8,9% |
| LCPОтрисовка крупнейшего элемента | 30,6 с → 11,8 свыше нормы 2,5 с, но сократился в 2,6 раза | −61,4% |
| TBTСуммарное время блокировки | 40 мс → 40 мс | +0,0% |
| CLSСовокупный сдвиг макета | 0,000 → 0,000 | +0,0% |
| Speed IndexИндекс скорости | 6,0 с → 5,8 с | −3,3% |
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 96 → 99 | +3 |
| FCPПервая отрисовка контента | 0,5 с → 0,5 с | +0,0% |
| LCPОтрисовка крупнейшего элемента | 0,6 с → 0,6 с | +0,0% |
| TBTСуммарное время блокировки | 160 мс → 70 мс | −56,2% |
| CLSСовокупный сдвиг макета | 0,005 → 0,005 | +0,0% |
/blog
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 60 → 62 | +2 |
| FCPПервая отрисовка контента | 5,5 с → 5,2 с | −5,5% |
| LCPОтрисовка крупнейшего элемента | 20,7 с → 11,7 свыше нормы 2,5 с, но сократился в 1,8 раза | −43,5% |
| TBTСуммарное время блокировки | 90 мс → 20 мс | −77,8% |
| CLSСовокупный сдвиг макета | 0,000 → 0,002 | н/д * |
| Speed IndexИндекс скорости | 6,4 с → 5,2 с | −18,8% |
* CLS почти не изменился и остаётся в «хорошей» зоне — колебание в пределах статистической погрешности.
| Показатель | Было → стало | Δ |
|---|---|---|
| PerformanceПроизводительность | 97 → 97 | 0 |
| LCPОтрисовка крупнейшего элемента | 1,1 с → 1,0 с | −9,1% |
| TBTСуммарное время блокировки | 100 мс → 110 мс | +10,0% * |
| CLSСовокупный сдвиг макета | 0,005 → 0,002 | −60,0% |
| Speed IndexИндекс скорости | 0,9 с → 0,8 с | −11,1% |
* TBT незначительно вырос — вероятно, из-за сетевых колебаний при живом замере, а не из-за оптимизации.
Один круг на каждую пару «страница × устройство»: оранжевый сектор — балл «до», зелёный — прирост «до → после», серый — остаток до 100. Внутри круга — балл «после» и дельта в баллах.
Средний Performance по восьми страницам вырос до 65,8 балла mobile (+12,9) и 92,5 балла desktop (+7,9).
Честно о цифрах: WebP-оптимизация реально снизила вес страниц и число тяжёлых картинок — это видно по каждой таблице ниже. Но сайт — как живой организм: тронешь одно место, где-то станет лучше, где-то чуть просядет, и это норма при любых работах на сайте. На части срезов LCP и CLS остаются высокими или даже слегка ухудшились (например, FCP на карточке проекта one_110 mobile или Speed Index на «Фото-отчётах» desktop) — это реальные замеры, и мы их не прячем. Часть колебаний, скорее всего, связана с шумом живого замера (сеть, нагрузка сервера в момент теста), а не с самой оптимизацией. Там, где LCP остаётся высоким, WebP всё равно пошёл на пользу — но для стабильно хороших показателей нужен комплекс мер, а не только WebP: шрифты, скрипты, отложенная загрузка, отказ от слайдеров на первом экране. CLS на карточке дома «Булгакова 43» на desktop остаётся высоким и требует отдельной работы — это не связано с WebP-оптимизацией.
Фотографии домов, участков и карточек проектов переведены в WebP без потери качества.
Загруженные тяжёлые исходные фото (2+ МБ) теперь автоматически оптимизируются и кропаются под нужный размер.
Одинаковый набор страниц и три последовательных замера PageSpeed Insights «до» и «после».
Проверены не только главная, но и каталог, карточки проектов, продажи домов и фотоотчёты.
Проведём аудит скорости и веса страниц, покажем прогноз эффекта и подберём безопасную схему WebP-оптимизации для вашего проекта.
Обсудить свой сайт
+7 (900) 015-57-77
info@bobers.ru
