Дизайн — статьи о сайтах
Для оптового продавца страница каталога — рабочий инструмент: закупщик открывает её по нескольку раз в день, сверяет цены, остатки и фасовку, собирает заказ. Если список из сотен позиций грузится долго, человек не просто ждёт: он откладывает заказ или звонит менеджеру. Разберём, что обычно тормозит такие сайты и как это исправлять по шагам.
С чего начать: измерить, где именно теряется время
Сначала замеры, потом правки. Возьмите самые востребованные страницы: категорию, карточку товара, корзину, форму быстрого заказа. Проверьте их в Lighthouse или в отчёте о Core Web Vitals в Search Console, если он доступен для вашего сайта. Смотрите на три показателя: за сколько появляется главный блок страницы (LCP), как быстро страница реагирует на нажатия (INP) и дёргается ли вёрстка во время загрузки (CLS).
Проверяйте на среднем смартфоне и мобильном интернете: с телефона заходят и со склада, и из торгового зала. Отдельно узнайте время ответа сервера на странице каталога. Если оно велико, сжатие картинок проблему не решит.
Фотографии товаров: как не загружать лишние мегабайты
В оптовом каталоге много однотипных снимков: мешки, коробки, ящики. Типичная ошибка — загрузить исходник с камеры и показывать его в миниатюре. Браузер скачивает тяжёлый файл ради картинки в 120 пикселей. Что сделать:
- создавать несколько размеров каждого снимка и отдавать подходящий через srcset;
- использовать WebP или AVIF с запасным JPEG;
- указывать ширину и высоту изображения, чтобы страница не сдвигалась;
- включить отложенную загрузку для всего, что ниже первого экрана, но не для самого первого изображения;
- в длинных списках показывать маленькую миниатюру, а крупное фото оставить для карточки.
Цены и остатки: что кэшировать, а что подгружать отдельно
В опте цена зависит от клиента: персональный прайс, скидка по договору, цена за упаковку и за килограмм. Из-за этого разработчики часто отключают кэш для всей страницы, и каждый заход строит каталог заново. Лучше разделить данные на две части. Общая часть (название, фото, фасовка, описание) кэшируется на сервере или в CDN. Персональные цены и остатки подгружаются отдельным запросом после отрисовки списка.
Запрос должен возвращать данные сразу для всех видимых позиций, а не по одному запросу на товар. Остатки из учётной системы можно кэшировать на короткое время; допустимый интервал определяет бизнес, исходя из того, насколько приемлема неточность. Предусмотрите и запасной сценарий: если учётная система отвечает медленно, страница показывает каталог, а в ячейке цены — индикатор загрузки, и не ждёт ответа целиком.
Условный пример: категория «Крупы и бобовые» на 400 позиций
Допустим, вся категория выведена одной таблицей: фото, название, артикул, фасовка, цена, остаток, поле количества. Все 400 строк лежат в HTML, фото берутся из оригиналов, а цена для каждой строки считается отдельным обращением к серверу. Что можно изменить:
- выводить по 50 строк с обычной пагинацией, у каждой страницы свой адрес;
- в строке использовать миниатюру с отложенной загрузкой;
- запрашивать цены и остатки одним обращением на 50 видимых строк;
- заранее задать высоту строки, чтобы таблица не прыгала при появлении цен;
- сделать так, чтобы поле количества и кнопка «В корзину» работали сразу, не дожидаясь тяжёлых скриптов: от этого зависит INP.
Эффект от каждого шага проверяйте замером до и после, а не предполагайте.
Фильтры, поиск и быстрый заказ по артикулам
Фильтры по производителю, сроку годности, фасовке и условиям хранения часто становятся причиной медленных запросов к базе. Проверьте, что по полям фильтров есть индексы, а счётчики рядом со значениями не пересчитываются при каждом открытии страницы. Подсказки поиска по названию и артикулу отправляйте с небольшой паузой после ввода и ограничьте выдачу десятью результатами.
Загрузку заказа из Excel лучше обрабатывать в фоне и показывать ход выполнения, чтобы страница не казалась зависшей. Отдельно просмотрите сторонние скрипты: чат, обратный звонок, аналитику, карты. Лишние уберите, остальные подключайте отложенно. Шрифтов оставьте два-три начертания.
Проверочный список перед запуском правок
- Есть замеры главных страниц на смартфоне до изменений.
- Время ответа сервера на категории отдельно проверено и понятно.
- Фото отдаются в нескольких размерах и современных форматах.
- Первый экран не использует отложенную загрузку для главного изображения.
- Каталог разбит на страницы, а не выводит сотни строк разом.
- Цены и остатки приходят одним запросом на всю видимую часть списка.
- Общая часть страницы кэшируется, персональная нет.
- Индексы для фильтров и поиска проверены.
- Сторонние скрипты пересмотрены, лишние отключены.
- После правок замеры повторены и сравнены с исходными.
