12 самых быстрых тем WooCommerce 2022 года

Ищете самые быстрые темы WooCommerce?

Для магазинов WooCommerce скорость имеет ключевое значение, поскольку время загрузки страницы напрямую влияет на коэффициент конверсии (который определяет ваш доход). Хотя ваша тема WooCommerce — не единственное, что влияет на время загрузки вашего магазина, она будет играть большую роль.

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

Чтобы помочь вам в этом, мы провели собственные практические тесты производительности с некоторыми из самых популярных вариантов, чтобы дать вам проверенный взгляд на самые быстрые темы WooCommerce.

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

Как мы тестировали самые быстрые темы WooCommerce

Вот полные детали нашей тестовой среды:

Тестовый сайт

Во-первых, наш тестовый сайт размещен на дешевом сервере DigitalOcean, который на самом деле предлагает довольно хорошую производительность, несмотря на свою цену. Он работает на стеке, полностью состоящем из Nginx (на платформе RunCloud).

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

1. WooCommerce
2. Стандартные фиктивные данные WooCommerce, которые импортируют ряд продуктов, включая изображения и все соответствующие сведения о продукте.

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

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

Чтобы убедиться, что мы собираем значимые данные об эффективности, мы протестировали одну и ту же страницу продукта с каждой темой (а не домашнюю страницу).

Страница с одним продуктом выглядит примерно так (пример темы — Storefront):

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

Для сбора самих тестовых данных мы использовали WebPageTest. Есть несколько причин, по которым нам нравится WebPageTest:

1. Он показывает множество показателей, включая время до первого байта (TTFB), Core Web Vitals (включая самую большую отрисовку контента), время загрузки, HTTP-запросы и размер страницы.
2. Мы можем настроить его для запуска девяти отдельных тестов и получения медианного значения, что устраняет вариабельность одного теста и дает нам более точные результаты.
3. Мы можем настроить его для запуска как настольных, так и мобильных тестов и выбрать различные скорости соединения.

Мы хотим, чтобы эти данные были как можно более полезными, поэтому мы настроили тесты так, чтобы они имитировали реальные сценарии, и провели два разных теста:

1. Настольный компьютер : тестирование с настольного устройства и использование регулируемого соединения FIOS — 20/5 Мбит/с, 4 мс RTT.
2. Мобильный телефон : тестирование на телефоне iPhone 7+ и с использованием дросселированного соединения «3G Fast» — 1,6 Мбит/с/768 Кбит/с, RTT 150 мс. WebPageTest позволяет нам использовать реальное устройство iPhone 7+, а не имитировать мобильный телефон, как некоторые другие инструменты.

Поскольку мы ограничиваем скорость соединения, вы увидите «более медленные» результаты, чем при использовании такого инструмента, как Pingdom (который использует сверхбыстрое нерегулируемое соединение). Тем не менее, эти скорости будут более точными, чем ваши реальные посетители, потому что большинство из них не будут использовать сверхбыстрые интернет-соединения.

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

• Мобильное соединение работает медленнее, потому что мы перешли на 3G. В реальном мире у ваших мобильных посетителей может быть меньше времени загрузки, если они используют 4G или подключают свой телефон к WIFI.
• Мобильное устройство не такое мощное, как настольное, а это означает, что обработка JavaScript займет больше времени. Помните — мы используем старый iPhone 7+, а не самую последнюю топовую модель.

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

• Время до первого байта (TTFB) — сколько времени требуется сайту, чтобы ответить первым байтом данных.
• Наибольшая содержательная краска (LCP) — время, необходимое для того, чтобы основной контент стал видимым. Он направлен на то, чтобы зафиксировать часть производительности, связанную с пользовательским опытом, а это то, что волнует большинство людей. Это также является частью новой инициативы Google Core Web Vitals, и Google будет использовать ее в качестве фактора ранжирования в своем обновлении Page Experience за май 2021 года.
• Время полной загрузки — WebPageTest определяет это как «точку после onLoad, когда сетевая активность остановилась на 2 секунды».
• HTTP-запросы — сколько HTTP-запросов делает сайт — чем меньше, тем лучше.
• Размер страницы — размер файла всей страницы — чем меньше, тем лучше.

Обратите внимание, что WebPageTest не предоставляет значения LCP для мобильных тестов, которые мы запускали.

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

В конце этого поста мы также соберем все данные вместе, так что продолжайте читать до конца, чтобы сделать выводы.

1. Сидней

Sydney — это наша собственная легкая многоцелевая тема, которая также имеет глубокую интеграцию с WooCommerce.

В Sydney 1.75 мы внесли ряд улучшений производительности, чтобы помочь ему занять свое место в этом списке самых быстрых тем WooCommerce.

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

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

Ключевая особенность

• Три демо-сайта WooCommerce (вместе с большим количеством демонстраций, не относящихся к WooCommerce)
• Настраиваемый стиль для цен на продукты, значков продаж, названий продуктов и т. д.
• Летающая мини-тележка
• Оформление заказа без отвлекающих факторов
• Поддержка заголовков видео
• Глубокая интеграция Elementor, включая пользовательские блоки Elementor
• Нет зависимостей jQuery
• Встроенная разметка схемы для улучшения SEO

Информация о производительности

• Результаты рабочего стола
• Мобильные результаты

Цены

У Сиднея есть бесплатная версия, но вам понадобится премиум-версия, чтобы получить доступ ко всем функциям WooCommerce и демо-сайтам. Это стоит 69 долларов за использование на неограниченном количестве сайтов.

2. Каденс

Kadence — это новая тема WordPress, которая быстро набирает популярность. Это гибкая многоцелевая тема, которая также предлагает глубокую интеграцию с WooCommerce.

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

Ключевая особенность

• Подробные параметры настройки в настройщике WordPress
• Конструктор верхнего и нижнего колонтитула с помощью перетаскивания
• Автоматически открывать боковую корзину, когда пользователь добавляет товар в корзину
• Аякс добавить в корзину
• Легко добавляйте микрокопии и значки доверия в ключевых местах
• Два импортируемых демо-сайта для магазинов WooCommerce

Информация о производительности

• Результаты рабочего стола
• Мобильные результаты

Цены

Основная тема Kadence доступна бесплатно на WordPress.org. Бесплатная тема включает в себя базовую совместимость с WooCommerce, но вам понадобится версия Pro, если вы серьезно относитесь к своему магазину.

Версия Pro дает вам доступ ко всем надстройкам, включая надстройку WooCommerce, за 79 долларов США за один год поддержки и обновлений. Или вы можете купить Kadence Suite за 219 долларов, который включает в себя другие плагины WooCommerce от разработчика.

3. Ботига

Botiga — это наша новая бесплатная тема WooCommerce, которую мы создали с нуля для оптимизации производительности.

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

По умолчанию он весит всего 82,8 КБ и предназначен для того, чтобы оставаться легким, поскольку все демонстрационные сайты созданы с помощью собственного редактора блоков WordPress вместо более тяжелых конструкторов страниц.

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

Ключевая особенность

• 100% посвящен WooCommerce
• Оптимизирован для повышения производительности благодаря ванильному JavaScript, встроенной минимизации и многому другому.
• Готовые демонстрационные сайты, созданные с помощью облегченного редактора блоков WordPress (Gutenberg).
• Расширенные возможности настройки WooCommerce, включая несколько макетов корзины, фильтры продуктов, значки продаж и многое другое.
• Гибкие варианты дизайна в настройщике WordPress в режиме реального времени

Информация о производительности

• Результаты рабочего стола
• Мобильные результаты

Цены

У Botiga есть бесплатная версия, которая отлично подходит для простых магазинов WooCommerce. Кроме того, есть версия Pro, которая добавляет полезные новые функции, такие как образцы продуктов, дополнительные стили заголовков, гибкие позиции боковой панели, списки пожеланий, липкую корзину и многое другое.

Версия Pro стоит 69 долларов за использование на неограниченном количестве сайтов. Вы можете просмотреть полное сравнение функций Botiga free и Pro на странице с ценами.

4. Нив

Neve — это легкая многоцелевая тема от ThemeIsle.

Бесплатная основная тема обеспечивает легкую основу и общую совместимость с WooCommerce, в то время как премиум-версия сочетает в себе набор функций, специфичных для WooCommerce, с модулем WooCommerce Builder.

Ключевая особенность

• Конструктор верхнего и нижнего колонтитула с помощью перетаскивания
• Подробные параметры WooCommerce в настройщике с надстройкой WooCommerce Builder
• Включить/отключить метаданные продукта, установив флажок
• Увеличение изображения продукта
• Страница оформления заказа без отвлекающих факторов, включая параметры для скрытия определенных полей, например поле купона, если вы не предлагаете купоны
• Быстрый просмотр продукта
• Функция списка пожеланий

Информация о производительности

• Результаты рабочего стола
• Мобильные результаты

Цены

Основная тема Neve доступна бесплатно на WordPress.org. Чтобы получить доступ к модулю WooCommerce Booster и другим премиальным функциям, версия Pro стоит 99 долларов (есть более дешевый план, но он не включает модуль WooCommerce Booster).

5. Астра

Astra — одна из самых популярных существующих тем, которая отличается тем, что является первой темой не по умолчанию, которая прошла миллион активных установок на WordPress.org.

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

Ключевая особенность

• Тонны импортируемых демонстрационных сайтов WooCommerce
• Множество настроек стиля и макета в настройщике WordPress.
• Боковая панель вне холста для фильтров продуктов и виджетов
• Быстрый просмотр продукта
• Бесконечная прокрутка продукта
• Выпадающая корзина
• Гибкие возможности галереи продуктов
• Оформление заказа без отвлекающих факторов
• Варианты сортировки каталога товаров, например, сортировка по популярности (продажам) или среднему рейтингу

Информация о производительности

• Результаты рабочего стола
• Мобильные результаты

Цены

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

Astra Pro стоит 59 долларов за использование на неограниченном количестве сайтов.

6. Лестить

Woostify — это тема WordPress, на 100% ориентированная на WooCommerce. Лично я думаю об этой теме как «Astra, если бы Astra была только для магазинов WooCommerce».

Поскольку это только для WooCommerce, разработчик может направить все свои усилия на создание демонстрационных сайтов WooCommerce и добавление функций WooCommerce.

Ключевая особенность

• Предварительно созданные демонстрационные сайты WooCommerce для разных ниш — демо-сайты используют Elementor для демо-контента, что позволяет легко настраивать
• Встроенная интеграция с популярными плагинами списков желаний (YITH Wishlists и TI Wishlist)
• Множество настроек Customizer для WooCommerce.
• Несколько макетов корзины
• Поддержка галереи видео продуктов
• Таймеры обратного отсчета продаж для повышения срочности
• Уведомления о продажах/просмотрах
• Выдвижная тележка

Информация о производительности

• Результаты рабочего стола
• Мобильные результаты

Цены

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

Чтобы разблокировать все демонстрационные сайты и добавить дополнительные функции, вы можете приобрести Woostify Pro по цене от 49 долларов США для использования на одном сайте.

7. Витрина

Storefront — это «официальная» бесплатная тема от WooCommerce, которую скачали более пяти миллионов раз.

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

Ключевая особенность

• Приходит непосредственно от команды WooCommerce
• Создан специально для WooCommerce
• Настройте свой магазин с помощью собственного настройщика WordPress.
• Множество дочерних тем Storefront, позволяющих изменить дизайн и адаптировать магазин к определенным нишам.

Информация о производительности

• Результаты рабочего стола
• Мобильные результаты

Цены

Основная тема Storefront бесплатна.

Затем команда WooCommerce предлагает ряд бесплатных и платных дочерних тем и расширений.

Во-первых, пакет Storefront Extensions добавляет ряд новых функций и параметров настройки в Storefront за 69 долларов.

Что касается дочерних тем Storefront, вы найдете как бесплатные, так и платные варианты. Премиальные дочерние темы стоят 39 долларов каждая.

8. Генерация прессы

GeneratePress — популярная легкая многоцелевая тема с хорошей репутацией благодаря производительности и чистоте кода.

Хотя вы можете использовать его для создания любого типа сайта WordPress, вы также получаете множество функций, специфичных для WooCommerce, особенно если вы обновитесь до GeneratePress Premium (платный плагин).

Ключевая особенность

• Чистый, легкий код
• Выделенное дополнение WooCommerce в премиум-версии — дает вам специальные параметры макета и стиля для WooCommerce.
• Значок корзины в меню — отображать товары или стоимость корзины
• Липкая панель корзины — отображать липкую панель уведомлений, когда покупатели добавляют товар в свои корзины и/или когда они прокручивают вниз
• Легко включить / отключить отображение метаданных продукта с помощью флажка
• Оформление заказа без отвлекающих факторов

Информация о производительности

• Результаты рабочего стола
• Мобильные результаты

Цены

Основная тема GeneratePress доступна бесплатно на WordPress.org. Бесплатная тема включает в себя базовую совместимость с WooCommerce, но вам понадобится надстройка премиум-плагина, чтобы разблокировать большинство функций и параметров настройки, специфичных для WooCommerce.

GeneratePress Premium стоит 59 долларов за один год поддержки и обновлений или 249 долларов за пожизненную поддержку и обновления.

9. Магазин орхидей

Как и Woostify, Orchid Store создан специально для WooCommerce — это не многоцелевая тема, как многие другие варианты.

Он предлагает демонстрационные сайты, которые немного «заняты», чем другие темы. Это не критика, просто то, что я заметил, просматривая демоверсию.

Ключевая особенность

• Создан специально для WooCommerce
• Три импортируемых демонстрационных сайта электронной коммерции
• Аякс добавить в корзину
• Встроенная поддержка списков желаний
• Переключатель валют (про)
• Виджет товарной сделки (про)

Информация о производительности

• Результаты рабочего стола
• Мобильные результаты

Цены

У Orchid Store есть бесплатная версия на WordPress.org, а также премиум-плагин, который добавляет дополнительные функции к основной теме и стоит 49 долларов за использование на одном сайте.

10. Магазиноптимизатор

В отличие от многих других тем в этом списке, которые являются многоцелевыми темами с подробной интеграцией WooCommerce, Shoptimizer — это тема WordPress, которая на 100% посвящена WooCommerce.

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

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

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

Ключевая особенность

• 100% посвящен WooCommerce
• Встроенная минимизация кода для повышения производительности
• Встроенные функции оптимизации конверсии, такие как значки доверия, микрокопии и т. д.
• Оформление заказа без отвлекающих факторов
• Закрепленные сведения о продукте на прокрутке
• FOMO для отдельных продуктов для повышения срочности, например, таймеры обратного отсчета продаж или «на складе осталось только X товаров».
• Функция «запросить обратный звонок», полезная для дорогостоящих продуктов.
• Поиск продуктов Ajax для мгновенных результатов поиска
• Использует Elementor для демо-контента для легкой настройки

Информация о производительности

• Результаты рабочего стола
• Мобильные результаты

Цены

Shoptimizer поставляется только в премиум-версии. Его прейскурантная цена составляет 99 долларов, но есть практически постоянная скидка за 39 долларов, поэтому вы сможете купить его за 39 долларов.

11. ОкеанВП

OceanWP — еще одна многоцелевая тема, известная своей гибкостью и возможностями настройки.

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

Ключевая особенность

• Множество импортируемых демо-сайтов для магазинов электронной коммерции
• Значок гибкой корзины
• Быстрый просмотр продукта
• Оформление заказа без отвлекающих факторов
• Многоэтапная проверка с индикатором выполнения
• Выдвижная тележка для настольных и мобильных устройств
• Фильтры продуктов вне холста
• Плавающая панель добавления в корзину при прокрутке

Информация о производительности

• Результаты рабочего стола
• Мобильные результаты

Цены

Базовая версия OceanWP доступна бесплатно на WordPress.org, но магазины WooCommerce захотят, чтобы премиум-версия разблокировала все функции и демонстрационные сайты.

Премиум-версия стоит от 39 долларов за использование на одном сайте.

12. Диви

Divi — одна из самых популярных тем WordPress премиум-класса, во многом благодаря встроенному конструктору перетаскивания (Divi Builder).

Если вам нужна только скорость, Divi на шаг впереди других тем. Но если вам нужна скорость и гибкость, и вы все равно планируете использовать конструктор страниц, Divi на самом деле не так сильно отстает, как может показаться на первый взгляд.

Помните, что Divi уже включает в себя «вес» визуального конструктора с перетаскиванием, тогда как другие темы этого не делают. Так что, если вы, скажем, добавите Elementor или Brizy к другой из этих тем, они будут намного ближе к Divi, если вы добавите вес этих строителей. Конечно, если вы не планируете использовать визуальный конструктор, то Divi не имеет особого смысла.

Ключевая особенность

• Встроенный конструктор перетаскивания (Divi Builder)
• Divi Builder поддерживает как создание страниц, так и создание полной темы, включая разработку шаблонов вашего магазина WooCommerce с помощью конструктора перетаскивания.
• Выделенные модули WooCommerce в конструкторе страниц
• Большой сторонний рынок, включая надстройки, ориентированные на WooCommerce, от сторонних разработчиков.

Информация о производительности

• Результаты рабочего стола
• Мобильные результаты

Цены

Divi доступен только в рамках членства Elegant Themes, которое дает вам доступ ко всем продуктам Elegant Themes и возможность использовать их на неограниченном количестве личных и клиентских сайтов по единой цене. Вы можете заплатить 89 долларов за годовое членство или 249 долларов за пожизненное членство.

Какая самая быстрая тема WooCommerce?

Мы показали вам много данных по отдельным темам. Теперь давайте соберем все вместе, чтобы вы могли сравнить эти темы.

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

• Мобильный : Ботига занял первое место по времени полной загрузки.
• Рабочий стол : Neve занял первое место по времени полной загрузки, а Woostify был первым по показателю Largest Contentful Paint.

(Помните, что WebPageTest не выдавал время LCP на мобильных устройствах.)

Конечно, разница между первым и вторым местом совсем небольшая (или даже между первым и седьмым местом). Поэтому, чтобы увидеть, как все темы сравниваются, я составил несколько диаграмм:

Мобильный (в порядке полной загрузки):

Рабочий стол (заказ LCP):

HTTP-запросы и размер страницы (упорядочены по HTTP-запросам):

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

Общие выводы

Это много данных! Если бы нам пришлось свести это к нескольким выводам, учитывая производительность как настольных компьютеров, так и мобильных устройств, то самыми эффективными оказались бы:

• Сидней – был вторым в мобильных результатах и ​​вторым в десктопных LCP.
• Neve — первая в десктопных результатах и ​​третья в мобильных.
• Botiga – первое место в мобильных результатах и ​​шестое в настольных LCP.
• Woostify - был первым в LCP для настольных компьютеров, но пятым по времени полной загрузки как для настольных компьютеров, так и для мобильных устройств.
• GeneratePress — имел наименьший размер страницы как на десктопе, так и на мобильных устройствах. Также был вторым по времени загрузки рабочего стола.

Как я уже упоминал, различия между темами не так уж велики . Например, Astra отставала от Neve всего на десятую долю секунды с точки зрения времени полной загрузки рабочего стола, поэтому мы не говорим о большой разнице между рейтингом №1 и №7.

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

У вас есть вопросы о самых быстрых темах WooCommerce или о том, как мы тестировали эти темы? Спросите нас в разделе комментариев!