Как сократить время загрузки страниц на сайте магазина спортивных товаров

Страницы магазина спортивных товаров тяжелы по своей природе: крупные фото кроссовок и велосипедов, фильтры по размеру, бренду и цене, баннеры распродаж, виджеты отзывов. Чтобы ускорить сайт, не нужно переделывать всё. Сначала надо выяснить, что именно тормозит на ключевых страницах, и исправлять это по порядку.

С чего начать: какие страницы и показатели измерять

Не ограничивайтесь главной. Проверьте три типа страниц: категорию с включёнными фильтрами, карточку товара и корзину с оформлением заказа. Используйте PageSpeed Insights или Lighthouse в браузере Chrome, смотрите прежде всего мобильный результат. Обратите внимание на три показателя:

• LCP — когда появился самый крупный элемент экрана. В карточке товара это обычно главное фото;
• CLS — насколько элементы «прыгают» при загрузке. Например, кнопка «В корзину» уезжает вниз, когда догрузилась галерея;
• FID — задержка реакции на первое нажатие, например на выбор размера.

Результаты колеблются от замера к замеру, поэтому сделайте несколько и запишите их до правок. Иначе нельзя будет понять, помогло ли изменение.

Фотографии товаров: самый тяжёлый слой страницы

Условный пример. В карточке беговых кроссовок шесть фото, и все загружаются сразу в исходном размере из фотосессии, скажем, по три тысячи пикселей по длинной стороне. На телефоне пользователь видит картинку шириной около 400 пикселей, но браузер скачал файл в разы больше нужного. Что сделать:

• подготовить для каждого фото несколько размеров и подключить их через srcset и sizes, чтобы телефон брал маленький файл;
• использовать WebP с запасным JPEG для браузеров, которые его не поддерживают;
• первое фото грузить сразу, остальные кадры галереи и блок «С этим товаром покупают» отложить, например атрибутом loading со значением lazy;
• не откладывать главное фото: это ухудшит LCP;
• задать width и height, чтобы место под картинку резервировалось и вёрстка не смещалась.

В каталоге нужны отдельные уменьшенные превью. Если сайт отдаёт полноразмерное фото и сжимает его только стилями, пользователь всё равно скачивает большой файл.

Каталог и фильтры: меньше товаров за раз, быстрее ответ сервера

Категория «Беговые кроссовки» с сотней позиций и восемью фильтрами часто тормозит из-за объёма выдачи и тяжёлых запросов к базе. Выводите порцию товаров, например 24, а остальные отдавайте постраничной навигацией или кнопкой «Показать ещё». При выборе фильтра обновляйте только блок с товарами, а не перезагружайте всю страницу. Попросите разработчика проверить, есть ли в базе индексы по часто используемым признакам: размер, бренд, цена, наличие. Выдачу самых посещаемых категорий без фильтров можно кэшировать на стороне сервера.

Сторонние скрипты: чат, пиксели, виджеты отзывов

Каждый внешний скрипт добавляет запросы, а некоторые блокируют отрисовку страницы. В спортивных магазинах их обычно много: онлайн-чат, счётчики, ретаргетинг, подбор размера, отзывы, всплывающие подписки. Составьте список и для каждого ответьте, кто им пользуется и какое решение на нём основано. Уберите дубли счётчиков и забытые тестовые коды. Подключайте скрипты с async или defer. Чат можно запускать через несколько секунд после загрузки или по клику на иконку, а виджет отзывов — только когда пользователь доскроллил до него. Менеджер тегов упрощает управление кодами, но сами скрипты не становятся легче.

Сервер, кэш и сезонные пики спроса

Для не авторизованных посетителей страницы каталога и карточек можно отдавать из кэша. Корзину, цены в личном кабинете и наличие по размерам кэшировать нужно осторожно: человек не должен увидеть размер в наличии, которого уже нет. Статику (изображения, стили, скрипты) удобно раздавать через CDN, включить сжатие gzip или Brotli и протокол HTTP/2. Перед сезоном вроде начала велосезона или горнолыжного сезона проведите нагрузочную проверку: хватает ли хостингу ресурсов при росте числа посетителей. Обновление версии языка программирования или CMS сначала проверяйте на тестовой копии сайта.

Проверочный список перед внесением правок

• Записаны замеры мобильной версии категории, карточки и корзины.
• Главное фото в карточке отдаётся в размере, соответствующем экрану, и не загружается лениво.
• У всех изображений указаны размеры, кнопка покупки не смещается.
• В каталоге превью отдельные, товаров на странице ограниченное число.
• Сторонние скрипты инвентаризированы, лишние удалены, остальные не блокируют отрисовку.
• Кэш не мешает актуальности наличия и цен.
• Нагрузка проверена до начала сезона.

Вносите изменения по одному и после каждого повторяйте замер. Так вы увидите, какая правка действительно ускорила страницы, а какая только усложнила код.

Все статьи блога