На сайте «ИзбаТверь» оптимизировали изображения, видео и загрузку тяжёлых элементов. Сравнили восемь типов страниц на ПК и мобильном устройстве: отдельно при открытии без прокрутки и после полной прокрутки.
Замеры выполнены в Chrome на ПК 1920×1080 и мобильном viewport 480×844. Основное сравнение выполнено между исходным и финальным замером без скролла. Полная прокрутка используется отдельно для оценки ресурсов, появляющихся ниже первого экрана или после взаимодействия. Внешние изображения проверяются отдельно. Значения округлены до МиБ.
Страницы замеров:
Главная — https://www.izbatver.ru/
Каталог проектов — https://www.izbatver.ru/catalog/doma-iz-brusa/
Карточка проекта — https://www.izbatver.ru/catalog/doma-iz-brusa/bs-304
Каталог фотоотчётов — https://www.izbatver.ru/fotootchety
Карточка фотоотчёта — https://www.izbatver.ru/fotootchety/dom-iz-brusa-kamernoj-sushki-bs-327-g.-tver-ul.-cherkasskaya
Акции — https://www.izbatver.ru/akcii
Производство — https://www.izbatver.ru/proizvodstvo
Отзывы / видео — https://www.izbatver.ru/video
Как читать полосы WebP и lazy-load. Зелёная полоса показывает разницу между исходным и финальным весом при открытии без прокрутки. Дублирующая полоса имеет ровно ту же физическую длину, что и зелёная, и расшифровывает эту экономию. Бирюзовая часть — оптимизация передаваемых файлов (в первую очередь WebP / WebM), салатовая — объём, перенесённый на более поздний этап: lazy-load изображений и отложенная инициализация тяжёлых элементов. Для этой разбивки используем разницу между финальным no-scroll и full-scroll; это объяснение механики экономии, а не отдельный изолированный эксперимент для каждого ресурса.
| Страница | Вес до → после | Экономия | Во сколько раз легче |
|---|---|---|---|
| Главная | 32,64 → 5,92 МиБ | −81.9% | в 5 раз |
| Каталог проектов | 6,24 → 2,43 МиБ | −61.1% | в 2 раза |
| Карточка проекта | 5,80 → 2,68 МиБ | −53.8% | в 2 раза |
| Каталог фотоотчётов | 14,54 → 2,24 МиБ | −84.6% | в 6 раз |
| Карточка фотоотчёта | 5,55 → 2,92 МиБ | −47.4% | ≈1,9 раза |
| Акции | 5,23 → 2,13 МиБ | −59.2% | в 2 раза |
| Производство | 5,39 → 1,70 МиБ | −68.6% | в 3 раза |
| Отзывы / видео | 5,44 → 1,99 МиБ | −63.4% | в 2 раза |
Суммарно по восьми страницам при открытии без скролла: 80,83 → 22,01 МиБ, экономия 72.8%. После полной прокрутки финальная сумма — 42,36 МиБ.
| Страница | Вес до → после | Экономия | Во сколько раз легче |
|---|---|---|---|
| Главная | 32,24 → 5,58 МиБ | −82.7% | в 5 раз |
| Каталог проектов | 5,81 → 1,70 МиБ | −70.8% | в 3 раза |
| Карточка проекта | 5,25 → 2,18 МиБ | −58.5% | в 2 раза |
| Каталог фотоотчётов | 13,89 → 1,69 МиБ | −87.9% | в 8 раз |
| Карточка фотоотчёта | 5,16 → 2,83 МиБ | −45.2% | ≈1,8 раза |
| Акции | 4,84 → 1,59 МиБ | −67.2% | в 3 раза |
| Производство | 5,01 → 1,60 МиБ | −67.9% | в 3 раза |
| Отзывы / видео | 5,05 → 1,68 МиБ | −66.7% | в 3 раза |
Суммарно по восьми страницам при открытии без скролла: 77,25 → 18,84 МиБ, экономия 75.6%. После полной прокрутки финальная сумма — 41,00 МиБ.
Полная прокрутка показывает ресурсы, которые не загружаются при первом открытии. Поэтому значения этого сценария приводятся отдельно и не подменяются цифрами первого экрана.
На ПК восемь страниц после полной прокрутки весят 42,36 МиБ против 22,01 МиБ при первоначальном открытии; на мобильном — 41,00 против 18,84 МиБ. Это ожидаемо: по мере просмотра догружаются изображения нижних блоков, после первого взаимодействия подключается виджет обратной связи, а на каталоге фотоотчётов при приближении к карте — Яндекс.Карты. Даже после полного просмотра новый сайт передаёт суммарно меньше данных, чем старая версия требовала сразу при открытии без скролла: примерно на 47.6% на ПК и 46.9% на мобильном.
Тяжёлое фоновое видео заменили на WebM. Основной медиаресурс уменьшился с 21,19 до 2,74 МиБ — на 87.1%, примерно в 7.7 раза. Здесь сравнивается размер основного видеоответа, без повторного сложения служебных range-запросов браузера.
В финальной версии Яндекс.Карты и виджет обратной связи больше не участвуют в первоначальной загрузке. На главной карта загружается только после открытия соответствующего таба; на вторичной странице с картой — при приближении пользователя к ней во время прокрутки. Виджет обратной связи подключается после первого взаимодействия со страницей. Поэтому пользователь не скачивает эти тяжёлые ресурсы заранее, если они ему не понадобились. При full-scroll они закономерно появляются в замере — функциональность не удалена, а перенесена на момент необходимости.
Почему мы не приводим замеры Google PageSpeed: мы сознательно не включили в этот кейс баллы PageSpeed Insights. Причины простые. Даже если прогнать тест несколько раз подряд, PSI не даёт стабильной, повторяемой картины — цифры «плавают» от замера к замеру, и на таком шуме легко случайно нарисовать что угодно, хорошее или плохое. Дальше: картинки — лишь часть общей формулы Performance у Google, и в баллах эффект от WebP почти теряется, хотя для реального человека он огромный — страница весит в разы меньше и заметно быстрее открывается, особенно с телефона и на небыстром интернете. И наконец, на итоговый балл Performance влияет ещё много всего — шрифты, скрипты, сторонние виджеты, — и эти факторы способны полностью перекрыть эффект от оптимизации картинок или сделать его едва заметным на общем фоне. Поэтому мы говорим языком честных и воспроизводимых цифр — вес страницы и доля WebP, — а не подгоняем историю под красивый балл PageSpeed.
Основной эффект получился не за счёт одного приёма. Мы уменьшили вес самих файлов, перевели изображения в WebP и тяжёлое видео в WebM, добавили отложенную загрузку контента ниже первого экрана и перенесли тяжёлые внешние сервисы на момент, когда они действительно нужны пользователю. Яндекс.Карты больше не загружаются при обычном открытии страницы, виджет обратной связи подключается только после первого взаимодействия, а изображения нижних блоков — по мере прокрутки. Поэтому особенно сильно уменьшился именно первоначальный вес страниц: посетитель больше не скачивает заранее то, до чего он может вообще не дойти.
При этом функциональность сайта не урезалась. Если пользователь прокручивает страницу, открывает карту или начинает взаимодействовать с сайтом, нужные ресурсы догружаются автоматически. Оптимизация не просто уменьшила цифры в тестах — она перераспределила загрузку так, чтобы браузер сначала получал только то, что действительно необходимо для просмотра текущего экрана.
Поэтому показатели без прокрутки и после полной прокрутки специально приведены отдельно. Они показывают не только итоговый вес страниц, но и то, сколько данных сайт требует от посетителя сразу при открытии и сколько догружает только по мере реального просмотра.
Смотреть услугу
ускорения и оптимизации там есть всё:
цены, состав работ, сроки и примеры!
Либо просто напишите нам на info@bobers.ru или в онлайн-чат — или звоните +7(900) 015-5777
+7 (900) 015-57-77
info@bobers.ru
