Дизайн — статьи о сайтах
Покупатель продуктов обычно торопится: открывает сайт с телефона, ищет молоко, хлеб и воду, добавляет в корзину и уходит. Если категория грузится долго, он может закрыть вкладку и вернуться к привычному магазину. Для владельца важно понимать, из чего складывается задержка и какие правки дают наибольший эффект при разумных затратах.
С чего начать: найти, что именно тормозит
Не меняйте ничего, пока не посмотрите на страницу со стороны. Откройте категорию в браузере, включите инструменты разработчика и на вкладке Network замедлите соединение до уровня мобильного. Обновите страницу и отсортируйте файлы по размеру и времени загрузки. Дополнительно можно проверить страницу в Google PageSpeed Insights или WebPageTest. Сохраните результаты для главной, категории, карточки товара и корзины: после правок их можно будет сравнить.
Условный пример: страница категории «Молоко и сыры»
Представим типичную картину. В категории 48 карточек. Фото загружены из учётной системы в исходном размере, около 2000 пикселей по длинной стороне, а на странице показываются в блоках шириной 200 пикселей. В шапке подключено больше десятка отдельных файлов CSS и JS. Вверху стоят чат с оператором, два счётчика посещаемости и виджет обратного звонка. Цена и наличие каждой карточки догружаются отдельным запросом. Что здесь можно сделать:
- создавать на сервере уменьшенные копии фото под реальные блоки сетки;
- объединить и сжать стили и скрипты, а чат и аналитику подключать после загрузки основного содержимого;
- отдавать цены и остатки вместе с HTML или одним общим запросом на всю страницу;
- показывать первые 24 товара, остальные подгружать кнопкой «Показать ещё» или обычной пагинацией.
Как облегчить фотографии товаров
В продуктовом каталоге изображения обычно составляют основную часть веса страницы. Загружайте не оригинал с камеры, а копии нужных размеров: миниатюра для списка, средняя для карточки, крупная для увеличения. Для фотографий подходит JPEG с умеренным сжатием, PNG лучше оставить логотипам и значкам вроде «Акция» или «Новинка». Мелкие значки можно объединить в один спрайт.
Фото ниже первого экрана можно подгружать при прокрутке. Заранее задайте блоку размеры, иначе страница будет «прыгать», и покупатель нажмёт не на тот товар. Формат WebP допустим только как дополнение для браузеров, которые его поддерживают, с обычным JPEG про запас. Если фото приходят из 1С или другой системы, настройте уменьшение при импорте, а не вручную.
Скрипты, стили и шрифты
Скрипты в шапке блокируют отображение страницы: браузер ждёт их, прежде чем показать товары. Подключайте их в конце страницы или с атрибутами async и defer. Уберите плагины, которыми никто не пользуется: слайдер на главной часто тянет за собой библиотеку, нужную только ему. С веб-шрифтами тоже стоит быть аккуратнее: оставьте только нужные начертания и кириллический набор. Пока шрифт грузится, текст с ценой всё равно должен быть виден.
Что сделать на стороне сервера
Страницы категорий меняются реже, чем кажется, поэтому их удобно кэшировать на несколько минут. Персональные данные, такие как корзина, выбранный адрес доставки и цены для конкретного магазина, нужно отделить от общего кэша и загружать отдельно. Проверьте сжатие текстовых файлов (gzip) и заголовки кэширования для картинок, стилей и скриптов, чтобы повторные визиты шли быстрее. Если сайт работает по HTTPS и хостинг поддерживает HTTP/2, включите его: много мелких файлов будет грузиться эффективнее.
Отдельно посмотрите на фильтры по бренду, цене и составу. Если при каждом выборе база перебирает весь каталог, нужны индексы по этим полям. Попросите разработчика показать журнал самых долгих запросов.
Проверочный список перед запуском правок
- Замерены главная, категория, карточка и корзина на медленном мобильном соединении.
- Размеры фото соответствуют блокам на странице, оригиналы не отдаются в списках.
- Изображения ниже первого экрана подгружаются позже, место под них зарезервировано.
- CSS и JS объединены и сжаты, чат и аналитика не мешают показу каталога.
- Цены и остатки приходят без отдельного запроса на каждый товар.
- В категории не выводятся сотни товаров сразу.
- Включены сжатие и кэширование статики, а страницы категорий кэшируются.
- После правок проверены корзина, оформление заказа и фильтры: ускорение не должно их ломать.
Двигайтесь по порядку: сначала изображения и сторонние виджеты, затем скрипты, а к серверным настройкам переходите, когда страница уже стала легче. После каждого шага повторяйте замер, чтобы видеть, какая правка действительно дала результат.
