Ускорение 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) название приложения и уберите оставшиеся сниппеты и теги script.
Выбирайте приложения, которые используют расширения темы (блоки приложений, которые добавляются в редакторе темы). Они чисто удаляются вместе с приложением и загружаются только там, где вы их поставили.
Для оставшихся приложений проверьте, грузятся ли они на всех страницах. Таблица размеров нужна только на страницах товаров.

2. Исправьте самое крупное изображение

На большинстве страниц товаров и коллекций самый крупный элемент это фото товара или баннер. Сделайте его быстрым:

Загружайте разумные файлы. Уменьшайте фото примерно до 2000-2500 пикселей в ширину и сжимайте их перед загрузкой. CDN Shopify автоматически отдаёт уменьшенные версии и современные форматы вроде WebP, но огромный оригинал всё равно стоит времени.
Не включайте ленивую загрузку для первого изображения. Изображения вверху страницы должны загружаться сразу. Ленивая загрузка нужна для изображений ниже.
Используйте адаптивные изображения. Актуальные темы используют фильтры Shopify image_url и image_tag, чтобы отдавать нужный размер под каждый экран. Старые темы могут отдавать один большой размер всем устройствам.
Избегайте автозапуска видео в первом экране. Если видео нужно, сначала покажите обложку, а видео загрузите потом.

3. Загружайте виджеты позже

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

Загружайте чат и всплывающие окна после того, как страница стала интерактивной, или с задержкой.
Ставьте виджеты отзывов ниже первого экрана, чтобы они не блокировали основной контент. Текст отзывов для SEO держите в HTML страницы.
Удалите сторонние пиксели отслеживания, в которые вы больше не смотрите. Каждый из них это ещё один скрипт.

4. Используйте актуальную тему

Темы для Online Store 2.0, включая бесплатные темы Shopify на основе Dawn, построены вокруг блоков приложений, адаптивных изображений и более лёгкого 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 считается хорошей? Стремитесь к статусу «Хорошо» для Core Web Vitals по данным реальных пользователей (Largest Contentful Paint до 2,5 секунды, Interaction to Next Paint до 200 миллисекунд, Cumulative Layout Shift до 0,1). Лабораторная оценка из 100 это ориентир, а не цель.

Почему мой магазин на Shopify медленный на мобильных? У телефонов медленнее процессоры и соединение, поэтому тяжёлый JavaScript от приложений вредит там гораздо сильнее. Проверяйте сначала на мобильных.