Чому ваш магазин на 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 тижні — польові дані оновлюються не одразу.