Почему ваш магазин на Shopify медленный: 10 исправлений по влиянию

Shopify сам по себе быстрый: серверы, CDN и оптимизация изображений уже настроены. Но многие магазины на нём всё равно медленные — и почти всегда причина не в платформе, а в том, что на неё добавили: приложения, скрипты, тяжёлые изображения и слайдеры.

Мы собрали 10 исправлений, которые дают наибольший эффект, и упорядочили их по влиянию — от самого важного до «приятного бонуса».

Сначала измерьте

Google оценивает скорость по трём метрикам Core Web Vitals, измеренным на реальных посетителях (75-й перцентиль, мобильные устройства):

Метрика	Что измеряет	«Хорошо»
LCP	Как быстро появляется главный контент	до 2,5 с
INP	Как быстро страница реагирует на действия	до 200 мс
CLS	«Прыгает» ли вёрстка при загрузке	до 0,1

Где смотреть:

1. Shopify: Online Store → Themes. Дашборд веб-производительности показывает реальные данные посетителей — LCP, INP и CLS по типам страниц и устройствам.
2. Google Search Console → Core Web Vitals — то, что видит Google.
3. PageSpeed Insights — для диагностики конкретной страницы.

На практике большинство магазинов на Shopify не проходят Core Web Vitals именно из-за LCP — поэтому первые пункты списка именно о нём.

10 исправлений по влиянию

#	Исправление	На что влияет	Сложность
1	Аудит приложений	LCP, INP	Низкая
2	Главное изображение	LCP	Низкая
3	Убрать слайдер и видео с первого экрана	LCP, CLS	Низкая
4	Отложить сторонние скрипты	INP, LCP	Средняя
5	Ленивая загрузка остальных изображений	LCP	Низкая
6	Шрифты	LCP, CLS	Низкая
7	Зарезервировать место под баннеры	CLS	Низкая
8	Лишний JS и CSS в теме	INP, LCP	Средняя
9	Страницы коллекций	LCP, INP	Средняя
10	Медленный Liquid	LCP	Высокая

1. Проведите аудит приложений

Каждое приложение может подгружать свои скрипты, стили и виджеты на каждой странице — даже там, где оно не нужно. Количество установленных приложений — один из самых сильных предсказателей медленного магазина.

1. Составьте список всех приложений и для каждого ответьте: приносит ли оно деньги или экономит время?
2. Удалите те, что не используются.
3. Проверьте, не остался ли код. Старые приложения часто вставляли код прямо в тему, и он остаётся после удаления. Ищите остатки в theme.liquid и папке snippets.
4. Отключите встраивания приложений (App embeds) в редакторе темы там, где они не нужны.

2. Оптимизируйте главное изображение

Главное изображение первого экрана чаще всего и есть элемент LCP. Три правила:

• Правильный размер. Не отдавайте изображение 4000 px на телефон — Shopify сам сгенерирует нужные размеры.
• Никогда не загружайте его лениво. loading="lazy" на первом экране откладывает именно тот элемент, который должен появиться первым.
• Высокий приоритет через fetchpriority="high".

{{ section.settings.image
  | image_url: width: 1600
  | image_tag:
    widths: '400, 800, 1200, 1600',
    sizes: '100vw',
    loading: 'eager',
    fetchpriority: 'high' }}

3. Уберите слайдер и автовидео с первого экрана

Слайдер на первом экране — это несколько больших изображений и JavaScript, который их переключает. Покупатели редко листают дальше первого слайда. Статичное изображение с чётким заголовком и кнопкой почти всегда быстрее — и часто лучше продаёт.

Если видео важно для бренда — покажите постер-изображение, а видео загружайте только после клика.

4. Отложите сторонние скрипты

Онлайн-чаты, виджеты отзывов, попапы, трекеры — каждый скрипт конкурирует за ресурсы телефона, и именно они чаще всего ухудшают INP.

• Загружайте чат по взаимодействию: показывайте кнопку, а сам виджет подгружайте после клика или через несколько секунд.
• Пиксели аналитики подключайте через раздел Customer events в Shopify, а не вставками в код темы.
• Виджет отзывов на карточке товара можно загружать, когда пользователь доскроллил до него.

5. Ленивая загрузка остальных изображений

Всё, что ниже первого экрана, — изображения товаров, баннеры, логотипы — должно загружаться лениво (loading="lazy"). Так браузер сначала грузит то, что покупатель видит сейчас.

6. Наведите порядок со шрифтами

• Не больше двух гарнитур и только нужные начертания.
• font-display: swap — текст сразу виден системным шрифтом, а фирменный подменяет его после загрузки.
• Системные шрифты для основного текста — самый быстрый вариант из возможных.

7. Зарезервируйте место под баннеры и виджеты

Строка объявлений, баннер cookies или виджет приложения, появляющийся с опозданием, сдвигает всю страницу вниз — это ухудшает CLS и раздражает покупателей.

• Указывайте width и height для всех изображений.
• Резервируйте место под элементы, которые появляются позже (минимальная высота блока).
• Показывайте попапы поверх страницы, а не вставляя их в поток.

8. Уберите лишний JavaScript и CSS в теме

Старые темы часто тянут jQuery, несколько библиотек анимаций и стили для секций, которых на сайте давно нет. Если тема устарела, переход на современную тему Online Store 2.0 может дать больше, чем десятки мелких правок.

9. Оптимизируйте страницы коллекций

• Разумное количество товаров на странице — лучше пагинация или «Показать ещё», чем 100 карточек сразу.
• Осторожно с «быстрым просмотром» и свотчами, которые подгружают данные для каждой карточки.
• Второе изображение при наведении загружайте только при необходимости.

10. Ускорьте медленный Liquid

Если сервер долго отдаёт страницу ещё до загрузки каких-либо изображений — проблема в коде темы: вложенные циклы, перебор всех товаров коллекции, дублирование логики. Найти медленные места помогает расширение Shopify Theme Inspector для Chrome. Это самый сложный пункт — и реже всего нужный.

Чек-лист

1. Измерили LCP, INP и CLS в дашборде Shopify и Search Console.
2. Удалили лишние приложения и их оставшийся код.
3. Оптимизировали главное изображение: размер, без lazy, высокий приоритет.
4. Заменили слайдер на статичный первый экран.
5. Отложили чаты, виджеты и трекеры.
6. Проверили шрифты, размеры изображений и место под баннеры.
7. Повторно измерили через 2–4 недели — полевые данные обновляются не сразу.