Повышение производительности вашего интернет-магазина

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

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

Веб-производительность направлена на оптимизацию пользовательского опыта. В настоящее время веб-производительность сосредоточена на трёх основных областях, которые также отражены в показателях Core Web Vitals:

Скорость загрузки, измеряемая показателем Largest Contentful Paint (LCP)
Стабильность макета, измеряемая показателем Cumulative Layout Shift (CLS)
Отзывчивость на взаимодействие с пользователем, измеряемая показателем Interaction to Next Paint (INP)

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

На этой странице

Оптимизация вашего интернет-магазина

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

Ваш интернет-магазин размещён на быстрых глобальных серверах и не имеет ограничений по пропускной способности. Вы можете проверить статус своего магазина Shopify на странице Shopify Status.
Ваш интернет-магазин использует сеть доставки контента (CDN) под управлением Cloudflare, которая обеспечивает быструю загрузку вашего интернет-магазина по всему миру. Вы можете проверить статус CDN на странице статуса Cloudflare.
Чтобы сократить время загрузки, изображения автоматически оптимизируются с помощью CDN для изображений. В сочетании с кодом вашей темы CDN для изображений может предоставлять изображения в оптимальном формате, а также изменять их размер и сжимать, чтобы уменьшить размер файлов.

Факторы, влияющие на веб-производительность

Для магазинов Shopify основными факторами, влияющими на веб-производительность, являются:

Тема вашего интернет-магазина
Установленные вами приложения
Любой дополнительный сторонний код, который вы вручную добавили в свой магазин, включая менеджеры тегов и содержащиеся в них теги

Это означает, что для повышения веб-производительности вам следует сосредоточиться на следующем:

Используйте актуальную, оптимизированную тему. Все темы семейства Horizon и темы Online Store 2.0 от Shopify бесплатны и оптимизированы для веб-производительности. Кроме того, многие другие сторонние темы также оптимизированы для веб-производительности. Вы можете ознакомиться с последними данными о производительности тем.
Если ваша тема предлагает переходы между страницами или другую анимацию, сравните веб-производительность до и после их активации. Анимация может замедлять загрузку страниц.
Не добавляйте слишком много разделов в шаблоны страниц в вашей теме. Большое количество разделов на страницах может снизить веб-производительность.
Если у вас есть коллекции с большим количеством товаров, рассмотрите возможность включения постраничной навигации, чтобы ограничить количество одновременно загружаемых товаров.
Оцените установленные приложения и сторонний код, чтобы убедиться, что их польза перевешивает любые потенциальные потери в производительности.
Проведите аудит вашего менеджера тегов, чтобы удалить все неиспользуемые или малоценные теги. Подробнее о рекомендациях по работе с тегами и менеджерами тегов.

Инструменты тестирования

Вы можете использовать следующие инструменты для анализа производительности вашего интернет-магазина:

Отчёты о веб-производительности: отчёты о веб-производительности Shopify используют Core Web Vitals для измерения того, как реальные пользователи взаимодействуют с вашим интернет-магазином.
PageSpeed Insights: вы можете создавать собственные отчёты с помощью PageSpeed Insights от Google, чтобы просматривать более подробные метрики для страниц вашего магазина.

Анализ рекомендаций по производительности от сторонних сервисов

Сторонние инструменты сканирования производительности могут предлагать изменения для повышения скорости вашего магазина. Однако многие из этих рекомендаций уже реализованы в Shopify или не применимы к магазинам Shopify.

Оптимизации, уже включённые в Shopify

Ваш магазин Shopify автоматически включает следующие оптимизации производительности:

Сеть доставки контента (CDN): Shopify бесплатно предоставляет CDN мирового класса, обеспечивая высокую производительность по всему миру. Все ресурсы доставляются с использованием HTTP/2, что снижает накладные расходы по сравнению со старыми протоколами.

Кэширование в браузере: Shopify устанавливает срок кэширования для кэшируемых ресурсов в браузере на один год — максимально возможный период. Это означает, что для повторных посетителей ваш магазин будет загружаться быстрее.

Сжатие Gzip: Shopify использует сжатие gzip для CSS, JavaScript, документов и страниц, чтобы уменьшить использование пропускной способности и сократить время загрузки. Также включён режим keep-alive для получения нескольких файлов.

Оптимизация изображений: Shopify автоматически сжимает изображения в формате JPG с помощью передовых алгоритмов, соблюдая баланс между сжатием и визуальной привлекательностью. Изображения часто предоставляются в формате WebP для лучшего сжатия и более быстрой загрузки.

Минификация файлов: Shopify автоматически минимизирует файлы CSS и JavaScript при их запросе вашей витриной, уменьшая размер файлов без ущерба для функциональности.

Когда сторонние рекомендации не применимы

Сторонние инструменты сканирования могут предлагать изменения, которые не актуальны для магазинов Shopify:

Конфигурации на уровне сервера: рекомендации по настройке сервера, HTTP-заголовкам или политикам кэширования уже оптимизированы инфраструктурой Shopify.
Внедрение CDN: предложения по добавлению CDN не имеют смысла, поскольку Shopify по умолчанию включает высокопроизводительную сеть CDN.
Настройки сжатия: рекомендации по включению сжатия уже реализованы на всей платформе Shopify.

Применение актуальных рекомендаций

Сосредоточьтесь на рекомендациях, которые относятся к контенту и функциям вашего магазина:

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

Поиск неисправностей при медленной загрузке страниц

Если ваш магазин загружается медленно, выполните следующие действия, чтобы выявить и устранить проблему:

Шаг 1. Подтвердите наличие проблемы

Проверьте скорость загрузки вашего магазина самостоятельно с разных устройств и при разных интернет-соединениях.
Попросите других протестировать ваш магазин, чтобы убедиться, что проблема не в вашем интернет-соединении.
Используйте инструменты для тестирования, например PageSpeed Insights, чтобы получить конкретные метрики производительности.

Шаг 2. Определите причину

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

Проверьте большие изображения: страницы с большим количеством изображений высокого качества могут загружаться медленно. Оптимизируйте изображения или уменьшите их количество. Узнайте больше о рекомендуемых размерах изображений.

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

Шаг 3. Примите меры

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

Оптимизируйте изображения: используйте подходящие форматы файлов (JPG для фотографий, PNG для графики с прозрачностью) и изменяйте размер изображений в соответствии с тем, как они отображаются на странице.

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

Поддержка по вопросам производительности интернет-магазина

Если вы используете бесплатную тему от Shopify, то Служба поддержки Shopify, возможно, сможет помочь вам с базовыми улучшениями производительности.

Если вы используете стороннюю тему и вам нужна помощь, вам необходимо связаться с разработчиком вашей темы, нанять эксперта Shopify по веб-производительности или партнера Shopify по вопросам производительности и скорости сайта. Узнайте больше о найме партнера Shopify.

Если проблема с производительностью вызвана приложением, вы можете связаться с разработчиком вашего приложения.

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

Техническая информация и ресурсы для поиска неисправностей

Если вы разработчик и хотите улучшить производительность витрины, темы или приложения Shopify, вы можете ознакомиться со следующими ресурсами по каждому показателю Core Web Vitals. Узнайте больше о лучших практиках повышения производительности для тем Shopify.

Скорость загрузки

Показатель Largest Contentful Paint (LCP) измеряет скорость загрузки на основе того, как быстро становится видимым самый большой элемент на экране. Время до первого байта (TTFB) и первая отрисовка контента (FCP) — это вспомогательные метрики, которые помогают лучше понять первопричину проблемы. Вы можете подробнее узнать об отладке распространенных причин медленной загрузки на витринах Shopify Liquid.

Визуальная стабильность

Показатель Cumulative Layout Shift (CLS) измеряет визуальную стабильность на основе того, насколько сильно контент смещается во время загрузки. Для глубокого погружения в отладку CLS прочтите статью «Как оптимизировать Cumulative Layout Shift (CLS) на сайтах Shopify».

Интерактивность

Показатель Interaction to Next Paint (INP) измеряет интерактивность на основе того, сколько времени требуется странице, чтобы отреагировать на большинство действий пользователя. Например, на такие действия, как нажатие на ссылку или кнопку.

Если у вас плохой показатель INP, скорее всего, в вашем магазине слишком много кода JavaScript из темы, приложения или сторонних библиотек/менеджера тегов. Поработайте над устранением наиболее проблемных из них. Узнайте больше в статье «3 способа найти код JavaScript, который больше всего замедляет загрузку страницы». Если проблемы с INP сохраняются, изучите дополнительные ресурсы на web.dev.