Оптимізація швидкості Shopify: тема, застосунки

Кожен магазин на Shopify працює на тих самих серверах і CDN, тож повільний магазин повільний через те, що він вантажить: тему, скрипти застосунків, зображення й відео. Оптимізація швидкості в Shopify означає прибрати й зменшити все це, а не змінити хостинг. У більшості магазинів найбільший виграш дають прибирання невикористаного коду застосунків, стиснення головного зображення й пізніше завантаження віджетів.

Цей гайд показує, як правильно виміряти швидкість, а потім проходить виправлення в тому порядку, в якому вони зазвичай окупаються. Він є частиною гайду про SEO для Shopify.

Вимірюй правильні сторінки

Тестуй сторінку товару й сторінку колекції, а не лише головну. Саме вони ранжуються, і саме на них потрапляють покупці.

Google PageSpeed Insights дає лабораторні оцінки одного завантаження, а якщо в магазину достатньо відвідувачів, то й реальні Core Web Vitals від користувачів Chrome за останні 28 днів. Google використовує саме дані реальних користувачів.
Звіт Core Web Vitals у Search Console групує URL за статусом, тож видно, чи всі сторінки товарів мають спільну проблему.
Звіт про вебпродуктивність Shopify в Analytics показує ті самі метрики реальних користувачів у часі, що зручно, щоб перевірити, чи допомогла зміна.

Зосередься на трьох Core Web Vitals: Largest Contentful Paint (як швидко з'являється головне зображення чи текст), Interaction to Next Paint (як швидко сторінка реагує на дотик) і Cumulative Layout Shift (наскільки елементи стрибають). Лабораторні оцінки скачуть від тесту до тесту; не женися за ідеальними 100.

1. Прибери код застосунків, якими не користуєшся

Застосунки найчастіша причина повільного магазину на Shopify. Кожен, що торкається вітрини, може додавати JavaScript і CSS на кожну сторінку.

Склади список своїх застосунків. Видали ті, якими більше не користуєшся.
Видалення не завжди прибирає код, який застосунок додав у тему. Пошукай назву застосунку у файлах теми (Online Store > Themes > Edit code) і прибери залишкові сніпети й теги скриптів.
Віддавай перевагу застосункам, що використовують розширення теми (app blocks, які додаються в редакторі теми). Вони чисто прибираються при видаленні й вантажаться лише там, де ти їх розмістив.
Для застосунків, які залишаєш, перевір, чи вантажаться вони на кожній сторінці. Таблиця розмірів потрібна лише на сторінках товарів.

2. Виправ найбільше зображення

На більшості сторінок товарів і колекцій найбільший елемент це фото товару чи головний банер. Зроби його швидким:

Завантажуй розумні файли. Перед завантаженням зменш фото приблизно до 2 000-2 500 пікселів завширшки й стисни. CDN Shopify автоматично віддає зменшені версії й сучасні формати на кшталт WebP, але величезний оригінал однаково коштує часу.
Не вмикай lazy loading для першого зображення. Зображення вгорі сторінки мають вантажитися одразу. Lazy loading для зображень нижче.
Використовуй адаптивні зображення. Актуальні теми використовують фільтри Shopify image_url і image_tag, щоб віддавати потрібний розмір для кожного екрана. Старі теми можуть віддавати один великий розмір усім пристроям.
Уникай автоматичного відео в головному блоці. Якщо відео потрібне, спершу покажи постер, а відео завантаж потім.

3. Вантаж віджети пізніше

Відгуки, чат-бульбашки, спливні вікна, каруселі допродажів і стрічки соцмереж рідко мають вантажитися раніше за товар.

Вантаж чат і спливні вікна після того, як сторінка стала інтерактивною, або із затримкою.
Розмісти віджети відгуків нижче першого екрана, щоб вони не блокували головний контент. Текст відгуків тримай в HTML сторінки заради SEO.
Прибери сторонні пікселі відстеження, на які ти більше не дивишся. Кожен із них це ще один скрипт.

4. Використовуй актуальну тему

Теми для Online Store 2.0, зокрема безкоштовні теми Shopify на основі Dawn, побудовані навколо app blocks, адаптивних зображень і легшого JavaScript. Тема кількарічної давнини з важкими слайдерами й jQuery може бути повільною, хоч що ти прибереш.

Перш ніж міняти тему, протестуй демо-сторінку товару нової теми в PageSpeed Insights. Тема, повільна у власному демо, буде повільною і з твоїми товарами.

5. Зупини зсув макета

Контент, що стрибає під час завантаження, погіршує Cumulative Layout Shift і дратує покупців.

Задавай зображенням ширину й висоту (фільтр Shopify image_tag додає їх).
Резервуй місце для банерів і рядків оголошень, що з'являються після завантаження.
Вантаж власні шрифти з font-display: swap і обмеж кількість накреслень.

Що майже не допомагає

Застосунки-«прискорювачі». Більшість із них додають на сторінку власний скрипт. Прибирати код краще, ніж додавати.
Зміна хостингу чи CDN. У Shopify це неможливо, і не потрібно.
Мініфікація кількох кілобайтів CSS. Вона рідко зрушує метрики реальних користувачів порівняно з видаленням застосунку чи виправленням головного зображення.

Як тримати магазин швидким

Швидкість падає, коли додаєш застосунки й секції. Перевіряй сторінку товару після кожного нового застосунку і щомісяця дивись звіт Core Web Vitals. Аудит сайту, наприклад від zaDojo, позначає повільні сторінки й завеликі зображення по всьому магазину, тож не доводиться тестувати сторінки по одній.

Часті питання

Чи впливає швидкість Shopify на SEO? Так, трохи. Core Web Vitals є сигналом ранжування, але контент і релевантність важать більше. Для продажів швидкість важливіша: покупці йдуть із повільних сторінок товарів.

Яка оцінка швидкості Shopify добра? Цілься в статус «Good» для Core Web Vitals за даними реальних користувачів (Largest Contentful Paint до 2,5 секунди, Interaction to Next Paint до 200 мілісекунд, Cumulative Layout Shift до 0,1). Лабораторна оцінка зі 100 це орієнтир, а не ціль.

Чому мій магазин на Shopify повільний на мобільних? Телефони мають повільніші процесори й з'єднання, тож важкий JavaScript від застосунків шкодить там набагато сильніше. Тестуй спершу на мобільних.