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

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

Сначала измерьте: сервер медленный или страница тяжёлая

Откройте типовые страницы в Chrome (вкладка Network в инструментах разработчика) или в Firebug. Дополнительно можно запустить YSlow или Page Speed. Проверьте четыре страницы: главную, список товаров категории, карточку детали, результат поиска по артикулу. Смотрите на три вещи:

• через сколько приходит сам HTML-документ. Если ждать ответа несколько секунд, причина в коде, базе данных или хостинге;
• сколько файлов запрашивает страница и сколько они весят вместе. Если HTML пришёл быстро, а страница долго «дорисовывается», виноваты картинки и скрипты;
• что происходит при повторном открытии. Если кэш браузера не работает, все файлы скачиваются заново.

Условный пример: список «Тормозные колодки»

Представим страницу на 50 товаров. Для каждого товара загружается фото производителя 800×600 пикселей, а вёрстка лишь уменьшает его до 100×75. На каждый товар выполняется отдельный запрос к базе за ценой и остатком. Подключено около десятка отдельных CSS- и JS-файлов, а код счётчиков стоит в шапке и блокирует отрисовку.

Что здесь исправляется:

• для списка создаются отдельные миниатюры нужного размера, а большое фото грузится только в карточке;
• цены и остатки выбираются одним запросом по списку идентификаторов товаров вместо пятидесяти отдельных;
• стили и скрипты объединяются и минифицируются, а число запросов к серверу уменьшается;
• счётчики подключаются асинхронным кодом или переносятся в конец страницы.

Изображения: где обычно лежит основной вес

Фото запчастей часто приходят от поставщиков в исходном размере. Задайте правило при импорте: автоматически создавать миниатюру для списка, средний размер для карточки и крупный для увеличения по клику. Фотографии сохраняйте в JPEG с умеренным качеством, логотипы и схемы в PNG. Иконки марок автомобилей и значки «в наличии» соберите в один CSS-спрайт, тогда вместо десятков маленьких файлов браузер скачает один. В разметке указывайте ширину и высоту изображений, чтобы страница не прыгала при загрузке.

Подбор по автомобилю и поиск по артикулу

Таблица применимости «марка — модель — модификация — год — деталь» быстро становится огромной. Что стоит проверить:

• есть ли индексы по полям, по которым идёт фильтрация и соединение таблиц;
• как устроен поиск по артикулу. Хранить в отдельном поле артикул без пробелов, дефисов и в одном регистре и искать по нему точное или начальное совпадение, а не LIKE '%...%' по всей таблице;
• как строятся списки «марка → модель → год». Их лучше подгружать через AJAX небольшими порциями, а не выводить все модификации в HTML сразу;
• как обновляются цены и остатки. Данные из 1С или прайсов поставщиков загружайте по расписанию в свою базу. Запрос к чужому складу при открытии страницы замедляет её. Если такой запрос нужен, показывайте наличие после загрузки основной части.

Кэш и сжатие на сервере

Включите сжатие текстовых ответов (HTML, CSS, JS) и разрешите браузеру хранить статические файлы. Для Apache это делается, например, так, если нужные модули доступны на вашем хостинге:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>

При изменении CSS или JS меняйте имя файла или добавляйте номер версии, иначе посетители будут видеть старое оформление. Готовые страницы категорий можно кэшировать на короткое время. Списки марок и моделей меняются редко, их стоит хранить в кэше надолго. Цену и наличие учитывайте отдельно, чтобы не показывать устаревшие данные.

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

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

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

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