Включили «ленивые картинки на всём сайте». На карточке магазина вместо модели — серый прямоугольник. В студии на первом экране услуги — дыра вместо фото зала. Файл при этом уже уменьшен, канал городской. Человек не ждёт, пока скрипт решит, что снимок «попал в зону видимости». Он закрывает вкладку: товара нет, студии нет.
Студийный кадр 4500 пикселей из папки загрузки — другая история: файл огромный, его долго везут. Здесь файла как будто нет. LCP (когда появилось главное фото) красный, потому что главного фото для браузера нет: в разметке заглушка, адрес в data-атрибуте, наблюдатель не сработал. Сжимают JPEG ещё раз. Пятно остаётся.
Проблема
Страх тяжёлой галереи: десять кадров ниже экрана правда не нужны сразу. Жажда балла: отчёт любит меньше запросов в первую секунду. Стыд оставить «как верстали»: модуль уже куплен. Модуль не отличает первый кадр от восьмого. На Битриксе детальное фото карточки, первый слайд, баннер услуги и превью в сетке попадают под одно правило. Композит (сохранённый каркас витрины) рисует скелет быстро. Живая зона подставляет картинку без src — скелет так и остаётся пустым.
TTFB (сервер начал отвечать) короткий. INP (кнопка отозвалась) может быть живым: «купить» и «записаться» нажимаются вслепую. Человек не нажимает вслепую. Ему нужно увидеть вещь или зал.
Причина
В тег главного снимка ставят loading=lazy или убирают src в пользу data-src. Слайдер считает, что первый кадр вне экрана: точка отсчёта — контейнер с нулевой высотой до стилей. Наблютель пересечения не срабатывает, пока не шевельнёшь страницу. В студии фон первого блока — картинка в стилях, её «оптимизатор» тоже откладывает, и герой остаётся цветом заливки.
- Главное фото карточки и первый кадр услуги — без отложенной загрузки, адрес в обычном src.
- Галерея ниже экрана может ждать жеста. Первый кадр — нет.
- Заглушка 1 пиксель в отчёте становится «главным фото»: браузер честно ждёт её.
- Мобильный слайдер часто второй набор правил. Смотрят боевой телефон, не только десктоп.
Список раздела не должен тащить детальные кадры. Но превью первой плитки, которое держит первый экран раздела из рекламы, тоже не прячут за наблюдателем. Иначе реклама ведёт в сетку без картинок.
Решение
- Гостем открыть карточку хита и страницу услуги. Если главное фото пустое, пока не шевельнёшь экран — виновата отложенная загрузка, не размер файла.
- В шаблоне карточки и первого блока услуги убрать lazy и data-src с первого снимка. Вернуть обычный адрес.
- Слайдер: первый кадр в разметке сразу, следующие — после жеста или ниже сгиба.
- В журнале сети первый запрос картинки — сам файл модели или зала, не прозрачная заглушка.
- Повторить на телефоне без прокрутки. Снимок виден до любого свайпа. Цель заказа и заявки не должна для этого ждать галерею.
Проверка
Не подключают сеть доставки, пока свой HTML прячет src. Не меняют тариф. Не ставят второй «оптимизатор картинок» поверх модуля: он снова повесит lazy на герой. Записывают два адреса и правило: первый кадр всегда в обычной разметке. Останавливаются, когда карточка и услуга показывают снимок без жеста. Остальные кадры галереи можно по-прежнему откладывать — это не повод вернуть запрет на первое фото.
Чек-лист
- Гостем открыть карточку хита и страницу услуги. Если главное фото пустое, пока не шевельнёшь экран — виновата отложенная загрузка, не раз…
- В шаблоне карточки и первого блока услуги убрать lazy и data-src с первого снимка. Вернуть обычный адрес.
- Слайдер: первый кадр в разметке сразу, следующие — после жеста или ниже сгиба.
- В журнале сети первый запрос картинки — сам файл модели или зала, не прозрачная заглушка.
- Повторить на телефоне без прокрутки. Снимок виден до любого свайпа. Цель заказа и заявки не должна для этого ждать галерею.
Назад в раздел
