Дизайн — статьи о сайтах
Сайт поставщика оборудования открывают на телефоне в цеху, в командировке или в офисе с медленным каналом. Люди ищут конкретную позицию: насос, редуктор, частотный преобразователь. Если раздел каталога долго грузится, посетитель закрывает вкладку или уходит к другому поставщику, не дождавшись характеристик. Ниже разобрано, как найти причину задержки и что менять в первую очередь.
С чего начать: где именно теряется время
Откройте в браузере Chrome инструменты разработчика (F12), вкладку Network. Отключите кэш и включите ограничение скорости, например «Fast 3G». Проверьте три типа страниц: главную, раздел каталога и карточку товара. Запишите общий вес страницы, число запросов и время, через которое появляется первый контент. Для независимой проверки подойдёт сервис WebPageTest.
Важно различать две причины. Первая: сервер долго отвечает, потому что тяжёлые запросы к базе выполняются при каждом открытии и нет кэша. Вторая: ответ быстрый, но браузер скачивает слишком много файлов. Лечатся они по-разному, поэтому сначала нужен диагноз.
Фотографии оборудования: почему они весят больше всего
Условный пример: раздел «Центробежные насосы», 40 карточек на странице. Фото загружены из материалов производителя в исходном размере, около 3000 пикселей по ширине. В списке они показаны в размере 250 пикселей, но браузер всё равно скачивает 40 больших файлов. Страница при этом выглядит обычно, а грузится долго.
Что делать:
- Создавать несколько размеров одного снимка: маленький для списка, средний для карточки, крупный для просмотра по клику. Делать это лучше автоматически при загрузке фото в админке.
- Сжимать JPEG, подбирая качество на глаз: для снимков на белом фоне оно часто может быть ниже, чем кажется. Схемы и логотипы хранить в SVG или PNG.
- Указывать ширину и высоту изображений в разметке, чтобы текст не «прыгал» при загрузке.
- Фото ниже первого экрана подгружать при прокрутке. Формат WebP можно добавить для браузеров, которые его поддерживают, оставив JPEG запасным вариантом.
Каталог на сотни позиций: что не должно грузиться сразу
В списке нужны название, артикул, 3–5 ключевых параметров (например, мощность, давление, напряжение) и кнопка запроса цены. Полные таблицы характеристик нужны только в карточке. Выводите товары порциями по 24–48 штук, а не весь раздел сразу.
Если фильтры по параметрам работают медленно, попросите разработчика проверить запросы к базе: есть ли индексы по полям, по которым идёт отбор. Готовые страницы популярных разделов можно кэшировать на сервере. Подсказки в поиске по артикулу должны возвращать короткий ответ, например 10 вариантов, а не весь список совпадений.
PDF-каталоги, сертификаты и чертежи
Документы часто весят больше, чем сама страница. Не встраивайте просмотрщик PDF в карточку и не подгружайте файлы заранее. Достаточно ссылки с названием, форматом и размером, например «Паспорт изделия, PDF, 2,4 МБ» (пример оформления). Тогда человек понимает, что скачает, и не ждёт неожиданно большой файл.
Общий каталог на несколько сотен страниц лучше разбить по сериям оборудования и сжать. Чертежи и 3D-модели вынесите в отдельный блок «Документы» в карточке и загружайте только по запросу.
Лишние скрипты, шрифты и слайдеры
Каждый внешний виджет — это запросы к чужим серверам: онлайн-чат, обратный звонок, счётчики, кнопки соцсетей, интерактивная карта в подвале. Составьте список всего, что подключено, и для каждого пункта ответьте: кто смотрит эти данные и что изменится, если убрать. Карту можно заменить адресом и ссылкой или подгружать по клику.
Проверьте и оформление. Слайдер с пятью крупными баннерами на главной часто стоит дороже всего остального блока, и один баннер с понятным предложением работает не хуже. Шрифтов достаточно одного семейства в двух начертаниях, но с поддержкой кириллицы. На уровне сервера включите сжатие текстовых файлов (gzip), долгое кэширование картинок, стилей и скриптов в браузере, объедините и минифицируйте CSS и JS. Если хостинг поддерживает HTTP/2, включите его.
Проверочный список для разговора с разработчиком
- Есть ли замеры главной, раздела и карточки до изменений?
- Известен ли вес самой тяжёлой страницы каталога и из чего он состоит?
- Создаются ли уменьшенные копии фото, или в списке показываются оригиналы?
- Выводится ли в списке только краткий набор параметров, а товары разбиты на страницы?
- Загружаются ли PDF и чертежи только по клику?
- Для каждого стороннего скрипта есть владелец и причина, по которой он нужен?
- Включены ли сжатие и кэширование статических файлов?
- После каждого изменения замер повторяется, а результат сравнивается с исходным?
Меняйте по одному пункту и сразу перемеряйте результат. Так будет видно, что дало эффект, а что только усложнило сайт.
