WebP, lazyload, fetchpriority
— это кто вообще?

Коротко: WebP — формат картинок, который при том же визуальном качестве обычно весит заметно меньше привычных JPEG и PNG. Lazyload (отложенная загрузка) не даёт браузеру скачивать все фото каталога сразу — сначала грузится только то, что видно на экране, а остальное подгружается по мере прокрутки почти незаметно для посетителя. Вместе эти два приёма снижают стартовый вес страницы и заметно ускоряют открытие каталогов и карточек проектов.

Что такое WebP и почему он легче

WebP — современный формат изображений, который сжимает фото эффективнее, чем привычные JPEG и PNG, сохраняя близкое визуальное качество. На практике это означает, что фото из каталога проектов или фотоотчёта со стройки, переведённое в WebP и обрезанное под нужный размер вывода, весит в разы меньше исходника — без заметной потери качества на глаз.

Чем меньше суммарный вес картинок на странице, тем быстрее браузер успевает их скачать и показать посетителю — особенно на мобильном интернете, откуда приходит основная часть трафика на сайты застройщиков.

Если нет разницы — зачем грузить больше?

Визуально эти два изображения почти неотличимы — потяните ползунок, чтобы сравнить. Но весят они совсем по-разному: JPG — 2 365 КБ (2,31 МБ), WebP — 611 КБ (0,60 МБ). Экономия — 74,1%, то есть WebP-версия легче почти в 3,9 раза при той же картинке.

↔

JPG · 2 365 КБ WebP · 611 КБ

Как работает lazyload и почему это почти незаметно

Отложенная загрузка (lazy loading) — это когда браузер грузит сразу только те картинки, что видны в первом экране, а всё, что ниже — по мере того как посетитель прокручивает страницу. Для каталога из десятков карточек проектов это огромная экономия: вместо загрузки сотни фото сразу, стартовая загрузка страницы весит только вес первого экрана.

Дальнейшая подгрузка остальных фото происходит в фоне, пока человек читает или разглядывает уже показанные карточки, поэтому почти не ощущается — картинки успевают появиться раньше, чем до них долистают.

При чём тут fetchpriority

У атрибута fetchpriority простая задача: подсказать браузеру, какую картинку скачивать в первую очередь. На странице обычно есть одно главное изображение первого экрана — например, баннер или фото проекта в шапке карточки. Мы явно отмечаем его высоким приоритетом, чтобы браузер начал загружать именно его сразу, не дожидаясь очереди из остальных запросов на странице. Это ускоряет момент, когда посетитель видит главный контент — то самое первое впечатление о загрузке сайта.

Что это даёт на практике

Каталоги с большим числом карточек проектов и фотоотчёты со строек — самые тяжёлые страницы на сайте строительной компании. После перевода фото в WebP и включения lazyload стартовый вес такой страницы падает в разы: браузеру больше не нужно скачивать сотни мегабайт фото при первом открытии, только то, что реально видно. Каталог открывается быстрее, а на мобильном интернете разница особенно заметна.