На городском 4G карточка: четыре секунды пустоты, потом впрыгивает фото 4500 пикселей из папки загрузки. Восемь мегабайт на таком канале — четыре–семь секунд одной картинки. В отчётах это время до большого фото товара называют LCP (время, за которое человек видит главное на экране). Движок страницы уже отдал текст. Покупатель кнопку «в корзину» ещё не видит и думает, что карточки нет.
С офисного гигабита отчёт зелёный. Человек в маршрутке видит белое. Спор «смените хостинг» здесь мимо: текст приехал, зависло фото. Новый сервер ту же восемьмегабайтную простыню привезёт чуть иначе и с тем же уходом с карточки.
Проблема
В карточке товара задают размер под живой контейнер — обычно 600–800 по ширине, не оригинал со студии. Список раздела везёт маленькое превью, не детальный кадр на тридцать позиций. Галерея не стартует десятью оригиналами: первый кадр сразу, остальные после того, как человек уже видит товар. Если диск с уменьшенными копиями забит, первый гость страницы ждёт запись и уходит.
- В журнале сети большое фото — уменьшенная копия, не оригинал из папки загрузки.
- У фото на первом экране заданы ширина и высота, иначе кнопка прыгнет, когда картинка приедет.
- Ленивая подгрузка на главном фото запрещена: его ждут специально.
- Слайдер на главной: первый кадр сразу. Восемь мегабайт «на красоту» — те самые 4–7 секунд.
Причина
Решение
На разделе первым часто становится превью сетки, на карточке — большое фото модели. Путают и режут не тот размер: список тянет студийный кадр, карточка растягивает крошечное превью и мылит. Баннер в шапке из стилей — тоже первое большое пятно: его тоже уменьшают, не оставляют студийные 4000 пикселей.
После смены фото в товаре старый файл не должен приезжать из памяти телефона как будто он новый. Пятьдесят карточек подряд на копии не должны удвоить папку уменьшенных копий: если удваивают, ширину взяли из случайного окна браузера, каждый пиксель — новый файл на диске. Покупатель за эти секунды успевает решить, что «фото не грузится, товара нет» и вернуться в выдачу — уже к соседу.
Сжать JPEG руками ещё раз вместо размера в карточке. Поставить сеть доставки, пока свой сервер отдаёт восемь мегабайт. Почистить папку копий и не поменять шаблон: за неделю файлы вернутся, а утренние гости снова оплатят запись на диск. Обвинить PHP, если текст карточки уже на экране, а фото нет.
Восемь мегабайт на главной и студийный кадр на карточке приходят разными письмами: «сайт тяжёлый» и «фото не открывается». Лечат одним размером под контейнер и запретом ленивой загрузки на первом кадре. Пока первый кадр едет оригиналом, человек из маршрутки не дождётся ни витрины, ни кнопки. Сеть доставки после уменьшения — да. До — быстрее развезёт ту же простыню.
- На разделе первым часто становится превью сетки, на карточке — большое фото модели.
- Путают и режут не тот размер: список тянет студийный кадр, карточка растягивает крошечное превью и мылит.
- Баннер в шапке из стилей — тоже первое большое пятно: его тоже уменьшают, не оставляют студийные 4000 пикселей.
- После смены фото в товаре старый файл не должен приезжать из памяти телефона как будто он новый.
Проверка
Городской 4G, гость. Большое фото — сотни килобайт, не мегабайты. Повторный заход берёт готовый файл, без минутной паузы. После прохода популярных карточек на диске не ноль. Видео с автозапуском на первом экране снимают: оно бьёт ожидание сильнее «неидеального движка». Сеть доставки подключают, когда свой сервер уже отдаёт уменьшенное фото. Иначе вы быстрее развезёте ту же простыню.
Чек-лист
- На разделе первым часто становится превью сетки, на карточке — большое фото модели.
- Путают и режут не тот размер: список тянет студийный кадр, карточка растягивает крошечное превью и мылит.
- Баннер в шапке из стилей — тоже первое большое пятно: его тоже уменьшают, не оставляют студийные 4000 пикселей.
- После смены фото в товаре старый файл не должен приезжать из памяти телефона как будто он новый.
Назад в раздел
