Сайт sever-topor.ru.
Вес снижен в 6 раз!

Как считаются доли webp и lazy. «До» — вес всех картинок и видео страницы по замеру старой версии; «после» — вес при первичной загрузке, без прокрутки. Экономия равна «до» минус «после» и делится на две доли, которые в сумме дают всю экономию. Доля lazy — вес в «до» тех картинок, которые теперь не грузятся при открытии страницы, а подгружаются только при прокрутке; на больших каталогах (проекты, статьи) это подавляющая часть. Доля webp — всё остальное: выигрыш от перевода в WebP и WebM тех картинок, что грузятся сразу, плюс ресурсы, которых в новой версии больше нет (на нескольких страницах, не только на главной). Картинки из ВКонтакте, переехавшие на наш сервер, считаются по тому же правилу, что и остальные: видимые сразу — в webp, подгружаемые при прокрутке — в lazy. Пример, каталог проектов на ПК: до 101,42 МБ, после 6,11 МБ; экономия 95,31 МБ состоит из lazy 89,36 МБ и webp 5,95 МБ.

Вес страниц и картинок: до и после

Зелёная полоса показывает экономию относительно веса «до» при открытии без скролла. Ниже она разбита на две доли: webp (в неё также включены WebM и переезд превью ВК) и lazy-load. Ширина каждой части пропорциональна МБ; отдельные проценты долей не приводим. В таблицах «после» означает вес без скролла.

Настольные устройства (ПК)

Мобильные устройства (390×844)

Наибольшая экономия на первом экране у каталога проектов и статей. Даже после полного скролла они остаются заметно легче исходных страниц. «Доля webp» обозначает всё, что сэкономлено не за счёт lazy-load, а не изолированный замер кодека.

Видео фона на главной

Исходное фоновое видео MP4 заменили WebM: браузер загрузил WebM, а MP4 в замере «после» не запрашивался. Это уменьшило переданный вес фонового видео с 11 177 064 до 4 697 993 байт (−6,18 МБ); постер WebP учтён отдельно в общем весе главной.

ВКонтакте на сайте

В «до» на странице отзывов было 24 запроса за превью ВК (0,56 МБ): они включены в исходный вес 6,08 МБ. После переноса картинок на sever-topor.ru запросов к VK нет; локальные WebP остаются в общем весе страницы и догружаются при прокрутке. Их отдельный сопоставимый вес для тех же 24 файлов не измерен.

Что сделано

• Перевели картинки и фоны в WebP. Тяжёлые JPG каталога, фотоотчётов и статей стали в разы легче, а фоновые изображения страниц не потеряли вид: каталог проектов при первом открытии на ПК — 101,42 → 6,11 МБ, статьи — 93,50 → 6,10 МБ.
• Подключили lazy-load. Изображения ниже первого экрана загружаются только когда до них доходит посетитель, поэтому длинные списки открываются быстро и не тратят мобильный трафик впустую. Даже после полной прокрутки каталог на ПК весит 14,85 МБ вместо 101,42 МБ.
• Сделали кропы под мобильный экран. Там, где это уместно, телефон получает картинку подходящего размера, а не большую десктопную: меньше трафика и быстрее первый экран.
• Расставили fetchpriority. Главные изображения первого экрана загружаются в первую очередь, а не стоят в очереди за второстепенными: пользователь раньше видит главное.
• Заменили фоновое видео главной на WebM. Видео стало легче на 6,18 МБ (10,66 → 4,48 МБ), и главная страница открывается заметно быстрее.
• Перенесли картинки из ВКонтакте на свой сервер. На странице отзывов убрали 24 запроса к внешнему сервису: превью отдаются с сайта в WebP с lazy-load и не зависят от доступности ВК.
• Включили кеширование всех страниц. Страницы и ресурсы отдаются из кеша, поэтому повторные открытия и переходы по сайту происходят быстрее.

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

• суммарный вес семи страниц при открытии снизился с 275,36 до 45,89 МБ на ПК и с 274,04 до 43,31 МБ на мобильном;
• каталог проектов стал легче на 94% на ПК, статьи на 93%;
• фоновое видео главной стало легче, а запросы за изображениями ВК исчезли;
• ниже первого экрана изображения догружаются только при просмотре.