Тема скорости загрузки стара как мир и актуальна для большинства проектов.
Но очень важно понимать, что работа над быстродействием — это не разовая акция, а постоянный процесс.
Проект развивается, обрастает новыми функциями и контентом, и в какой-то момент может ожидаемо «заскрипеть».
Наша задача — выявлять эти «узкие места» и устранять их так, чтобы пользователи не покидали сайт по этой причине.
Еще скорость загрузки напрямую влияет на конверсию и на результаты SEO-продвижения.
Вдобавок сейчас у большинства интернет-магазинов значительная часть трафика идёт с мобильных устройств, что накладывает дополнительные ограничения.
Давайте разбираться пошагово, где можно «докрутить» производительность и вдохнуть жизнь в ваш проект.
Когда пользователь открывает каталог товаров с фильтрами, тегами и прочими наворотами, в цепочке «пользователь → сервер → сайт → браузер» происходят некоторые процессы.
Сервер обрабатывает запрос, собирает данные из базы, подгружает шаблоны и дизайн, а затем уже отдаёт результат пользователю. Чем быстрее каждый из этих этапов, тем приятнее пользоваться сайтом.
Ниже мы пройдёмся по основным точкам оптимизации, которые совместно дают кумулятивный эффект ускорения.
Прежде чем бросаться что-то крутить, имеет смысл провести серию тестов, чтобы составить для себя план работ и не заниматься стрельбой по воробьям.
Берём Google PageSpeed Insights и смотрим на LCP (Largest Contentful Paint — отрисовка крупнейшего контентного элемента), FID (First Input Delay — задержка первого ввода) и CLS (Cumulative Layout Shift — кумулятивное смещение макета).
Также скроллим до списка «Диагностика», чтобы разобраться по пунктам, на что ругается сервис. Скорее всего, вы увидите сплошной красный список — и это нормально. Сделать весь этот список «зелёным» нереально, но инструмент поможет выявить ключевые проблемы.
Дополнительно посмотрите TTFB (Time To First Byte — время до первого бита). Этот показатель, как следует из названия, — время до получения первого бита браузером, и если он превышает 0.8 секунды, уже повод к оптимизации.
Посмотреть можно в Яндекс.Метрике: в отчётах есть «Мониторинг» → «Время до загрузки страницы». Изучайте столбик «Время до отрисовки», чтобы понять, какие страницы отвечают дольше всего (можно сортировать от большего к меньшему).
В целом этого инструментария хватит, чтобы выявить основные проблемы и составить чек-лист с планом оптимизации.
Теперь поехали по пунктам!
Первое и самое очевидное: нужно убедиться, что у вас достаточно ресурсов на стороне хостинга или сервера.
Мониторьте свободное место и нагрузку в панели хостинга. Нередко сталкиваемся с ситуацией, когда растущий интернет-магазин всё ещё работает на минимальном тарифе и упирается в технические ограничения.
Для больших каталогов (от 10 000 товаров) уже стоит смотреть в сторону VPS или облачных решений (Yandex Cloud, VK Cloud, Beget Cloud или Google но там цены космос).
Минимальные рекомендации - от 6 ГБ RAM, использовать SSD-диски и PHP 8.0+ (желательно).
Если у вас VPS или выделенный сервер:
1. Включите HTTP/2, так как он позволяет браузеру загружать несколько ресурсов параллельно.
2. Ускорить PHP-скрипты поможет , который кэширует скомпилированный PHP-код, а также не забываем увеличить memory_limit (например для 1С-Битрикс обычно советуют минимум 512 МБ).
3. Включение Gzip или Brotli даст выигрыш в скорости за счёт сжатия текстовых данных, что подробно описано в руководствах по настройке веб-серверов, например или в .
4. Выгрузка товаров на сервер (например из 1С) должна происходить только для позиций с изменениями. Если при каждом обновлении загружать весь каталог заново, вы получите кучу лишних запросов, которые замедляют все процессы. (встречаем проблему достаточно часто).
5. И наконец, если ваш магазин ориентирован на покупателей по всей стране, то используйте CDN (например, в Yandex, VK, Beget). Это позволит отдавать статичные данные с ближайших к пользователю серверов, что дополнительно ускорит сайт.
Одна из главных причин долгих загрузок — тяжёлые и неоптимизированные изображения.
Есть множество плагинов и сервисов (например TinyPNG), которые жмут картинки, но после такого автоматического сжатия может упасть качество, поэтому часто требуется тонкая ручная настройка параметров.
1. Желательно переводить изображения в современные форматы WebP или AVIF, которые при хорошем качестве «весят» ощутимо меньше ( полезная табличка по форматам от Mozzila).
2. Обязательно используйте ленивую загрузку (Lazy Load). Тогда картинки грузятся только когда пользователь докрутит страницу до нужного блока, и всё становится заметно быстрее. Подробнее об этом можно почитать
3. Не забывайте прописывать размеры изображений (width/height) в коде, чтобы браузеру не приходилось подстраивать верстку после загрузки картинок.
Чтобы ускорить подгрузку CSS, JS и HTML, применяют минификацию. Если сказать коротко, это удаление из кода пробелов, комментариев и всего прочего, что нужно лишь программисту, но не браузеру.
В идеале CSS-файлы объединяют в один или несколько логических бандлов (наборов), то же самое делают с JS. И, конечно, оставляйте оригинальные не минифицированные файлы где-нибудь на дев-сервере или в репозитории, чтобы можно было без проблем искать баги и вносить правки.
Кэширование способно в разы повысить скорость, но только если им грамотно управлять.
Нужно чётко понимать, какие элементы сайта должны кэшироваться, а какие должны собираться заново при каждом запросе.
Обычно кэшируют шапку, подвал, меню — всё, что максимально статично.
Для 1С-Битрикс есть так называемый композитный кэш. Официальный гайд лежит здесь.
Данный вид кэша помогает значительно ускорить загрузку, но имеет массу нюансов. Если под кэширование попадут динамические элементы (например, корзина или индивидуальные цены), это может привести к серьёзным проблемам.
Кроме того, при большом каталоге объём кэша способен достичь гигантских размеров. Заранее продумайте, хватит ли места на сервере — как правило, композитный кэш занимает почти столько же, сколько сам сайт (соотношение ~1:1).
База данных — ещё одна точка узкого горлышка. Чем больше товаров и фильтров, тем сложнее запросы.
Что обычно помогает? Добавление индексов для полей, по которым чаще всего идёт фильтрация (цена, категория и т.д.).
Со временем база засоряется дубликатами, старыми заказами, неиспользуемыми товарами, поэтому хорошо настроить cron-задачи на регулярную очистку. А при совсем больших нагрузках делают репликацию (основная база + копия для чтения).
Кейс из нашей практики: в компоненте 1С-Битрикс Catalog.section для каждого товара вызывается функция GetOptimalPrice, которая подбирает оптимальную цену с учётом персональных скидок, налогов, валюты и т.д. Это даёт кучу запросов к базе.
Решение: при изменении товара один раз получать итоговую цену и записывать её в дополнительное свойство и на витрину каталога выводить уже его.
У нас это снизило время загрузки каталога с 6 секунд до долей секунды. Как видите, оптимизация бывает «прячется» в самых неожиданных местах.
Оптимизация скорости проекта — это цепочка совместных мер, где важно и сервер настроить правильно, и изображения ужать, и скрипты минифицировать, и базу оптимизировать, и кэш грамотно использовать.
Но нет ничего приятнее, чем ощущение, когда страница с сотнями товаров загружается почти мгновенно, и пользователи не успевают даже моргнуть.
Надеюсь, эта статья придаст вам уверенности и поможет определить, в какую сторону копать, чтобы ваш интернет-магазин работал максимально резво.
Скоро мы свяжемся с Вами и все расскажем
