8 самых быстрых WooCommerce шаблонов

Ищете быструю тему WooCommerce для WordPress? Я составил список из 8 темплейтов, которые вы можете использовать для своего следующего проекта онлайн-торговли.

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

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

В этой статье вы найдете 8 тем WooCommerce, которые можете использовать для своего проекта. Также я поделюсь некоторыми советами по оптимизации сайта ВуКомерс и расскажу, как сделать интернет-магазин быстрее.

8 самых быстрых тем WordPress по данным тестов

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

Storefront

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

Результаты производительности:

• Оценка производительности для мобильных устройств: 85/100.
• Первый контентный рисунок: 2,1s.
• Самый большой контентный рисунок: 1,7s.
• Совокупный сдвиг макета: 2,8s.
• Индекс скорости: 1.3s.
• Время до интерактивности: 1,3s.
• Общее время блокировки: 0ms.
• Общее время загрузки: 2,1s.
• Общий размер страницы: 990КБ.
• HTTP-запросы: 18.

Botiga

Botiga — это бесплатная, легкая тема WooCommerce от aThemes. Все демо-содержимое создано с помощью встроенного редактора блоков WordPress, что придает темплейту минималистичный внешний вид.

Результаты производительности:

• Оценка производительности для мобильных устройств: 83/100.
• Первый контентный рисунок: 1,5s.
• Самый большой контентный рисунок: 1,9s.
• Совокупный сдвиг макета: 0s.
• Индекс скорости: 1.3s.
• Время до интерактивности: 1,1s.
• Общее время блокировки: 0ms.
• Общее время загрузки: 2,4s.
• Общий размер страницы: 425КБ.
• HTTP-запросы: 12.

Astra

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

Результаты производительности:

• Оценка производительности для мобильных устройств: 83/100.
• Первый контентный рисунок: 2,2s.
• Самый большой контентный рисунок: 1,7s.
• Совокупный сдвиг макета: 2,1s.
• Индекс скорости: 1.1s.
• Время до интерактивного режима: 1,3s.
• Общее время блокировки: 0ms.
• Общее время загрузки: 2,5s.
• Общий размер страницы: 990КБ.
• HTTP-запросы: 16.

Flatsome

Flatsome — тема WooCommerce номер 1 по продажам на Themeforest. Она многоцелевая и адаптивная. Темплейт поставляется с конструктором UX и некоторыми интересными функциями для вашего интернет-магазина, такими как живой поиск, добавление в список желаний, опции «пузыря» распродаж, изменение количества товаров в строке или режим каталога, если не хотите отображать цены.

Результаты производительности:

• Оценка производительности для мобильных устройств: 81/100.
• Первый контентный рисунок: 2,5s.
• Самый большой контентный рисунок: 1,7s.
• Совокупный сдвиг макета: 1,6s.
• Индекс скорости: 1.3s.
• Время до интерактивности: 2,5s.
• Общее время блокировки: 0ms.
• Общее время загрузки: 2,7s.
• Общий размер страницы: 997КБ.
• HTTP-запросы: 18.

Avada (Fusion Woo Builder)

Это тема №1 по продажам на Envato на протяжении многих лет, в библиотеке которой тысячи легко кастомизируемых шаблонов. Avada поставляется с конструктором Fusion Builder, позволяющим создавать сайт от хедера до футера.

Результаты производительности:

• Оценка производительности для мобильных устройств: 78/100.
• Первый контентный рисунок: 2,9s.
• Самый большой контентный рисунок: 1,8s.
• Совокупный сдвиг макета: 1,6s.
• Индекс скорости: 1.3s.
• Время до интерактивности: 2,6s.
• Общее время блокировки: 0ms.
• Общее время загрузки: 2,8s.
• Общий размер страницы: 998КБ.
• HTTP-запросы: 17.

Divi (Divi WooCommerce Builder)

Divi — мощная тема для WooCommerce благодаря визуальному конструктору. Elegant Themes была одной из первых компаний, которая привнесла WYSIWYG в WordPress. Суть заключается в том, что вы можете построить все визуально, используя фреймворк Диви без написания кода. Конструктор и модули ВуКомерс позволяют быстро создавать кастомные страницы товаров и магазинов.

Результаты производительности:

• Оценка производительности для мобильных устройств: 75/100.
• Первый контентный рисунок: 4,1s.
• Самый большой контентный рисунок: 1,5s.
• Совокупный сдвиг макета: 2,8s.
• Индекс скорости: 2.4s.
• Время до интерактивного режима: 1,2s.
• Общее время блокировки: 0,1ms.
• Общее время загрузки: 3.1s.
• Общий размер страницы: 1,2МБ.
• HTTP-запросы: 19.

BeTheme (BeBuilder)

BeTheme — это многоцелевой конструктор и самая продаваемая тема WP. Она имеет 650 готовых к работе сайтов с современным дизайном. Он также совместим с WooCommerce, и они даже запустили конструктор запросов для создания циклов и динамических веб-проектов. Вы можете разработать сайт ВуКомерс, который хотите, а также универсальные магазины и макеты одного продукта, которые конвертируются. Есть возможность использовать готовый к работе шаблон или создать собственный.

Результаты производительности:

• Оценка производительности для мобильных устройств: 72/100.
• Первый контентный рисунок: 4,1s.
• Самый большой контентный рисунок: 3,9s.
• Совокупный сдвиг макета: 2,8s.
• Индекс скорости: 1.9s.
• Время до интерактивного режима: 1,7s.
• Общее время блокировки: 0,5ms.
• Общее время загрузки: 3.6s.
• Общий размер страницы: 1,3МБ.
• HTTP-запросы: 21.

The7

Это тема номер 1 по продажам, которая предлагает множество кастомизаций для WooCommerce. В The7 есть 60 готовых к работе макетных сайтов с эксклюзивными шаблонами, которые помогут легко запустить интернет-магазин. Вы можете создать привлекательные варианты для витрины, страниц и списков товаров, оплаты, корзины с помощью продвинутого конструктора ВуКомерс.

Результаты производительности:

• Оценка производительности для мобильных устройств: 70/100.
• Первый контентный рисунок: 4,4s.
• Самый большой контентный рисунок: 4,3s.
• Совокупный сдвиг макета: 2,9s.
• Индекс скорости: 1.2s.
• Время до интерактивного режима: 1,5s.
• Общее время блокировки: 0ms.
• Общее время загрузки: 4.1s.
• Общий размер страницы: 1,5МБ.
• HTTP-запросы: 25.

Сводная таблица результатов производительности

Ниже я привел сводную таблицу результатов производительности для каждой темы WooCommerce. Для их ранжирования использовался глобальный показатель Lighthouse «Оценка скорости страницы для мобильных устройств».

	Оценка скорости страницы для мобильных устройств	Общее время загрузки	Самый большой контентный рисунок	Первый контентный рисунок
Storefront	85/100	2.1 сек.	1.7 сек.	2.1 сек.
Botiga	83/100	2.4 сек.	1.9 сек.	1.5 сек.
Astra	83/100	2.5 сек.	1.7 сек.	2.2 сек.
Flatsome	81/100	2.7 сек.	1.7 сек.	2.5 сек.
Авада	78/100	2.8 сек.	1.8 сек.	2.9 сек.
Divi	75/100	3.1 сек.	1.5 сек.	4.1 сек.
BeTheme	72/100	3.6 сек.	3.9 сек.	4.1 сек.
The7	70/100	4.1 сек.	4.3 сек.	4.4 сек.

Основные выводы

• Ни одна из тем не находится в красной зоне на мобильных устройствах, все они между оранжевым и зеленым цветом в отношении глобальной производительности.
• Storefront, Botiga и Astra, похоже, входят в тройку самых быстрых тем WordPress.
• The7 кажется самой медленной, что вполне логично с учетом всех доступных дополнительных кастомизаций. Тем не менее, производительность остается приемлемой, и в последнем разделе я покажу, как перевести все KPI в зеленый цвет!

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

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

• PageSpeed Insights.
• GTmetrix.

Оба инструмента работают под управлением Lighthouse. Они анализируют производительность и пользовательский опыт вашего сайта. Вот 10 KPI, которые я использовал в своих тестах — измеренные на мобильных устройствах.

Из PageSpeed Insights:

• Оценка производительности для мобильных устройств.
• Первый контентный рисунок.
• Самый большой контентный рисунок.
• Совокупный сдвиг макета.
• Индекс скорости.
• Время до интерактивности.
• Общее время блокировки.

Из GTmetrix:

• Общее время загрузки.
• HTTP-запросы.
• Общий размер страницы.

Затем я выбрал 7 тем, которые определяют себя как WooCommerce-оптимизированные, потому что они поставляются с дополнениями или специфическими кастомизациями, связанными с интернет-магазинами: страница товара или процесс оформления заказа, расширенные галереи, раздел личного кабинета и т.д.

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

Я создал реалистичный ВуКомерс-сайт для каждой темы. Во всех случаях на главной странице есть баннер с кнопкой, 1 призыв к действию, 4 иконки с текстами, 3 отзыва покупателей, 1 объявление и 12 товаров. Разумеется, я использовал одну и ту же картинку и продукты для каждой проверки, просто менял темы между этапами тестирования.

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

Повысьте производительность с помощью WP Rocket

WP Rocket — один из лучших плагинов кэширования для оптимизации любой темы WooCommerce, включая те, что представлены в моем списке. После его активации производительность вашего интернет-магазина и оценка Core Web Vitals значительно улучшатся.

Чтобы понять, как WP Rocket влияет на скорость, давайте посмотрим, как он действует в теме The7, которая была одной из самых полных, которые я тестировал, с точки зрения функций и кастомизаций.

Ниже приведены проблемы производительности, отмеченные Lighthouse и перечисленные на вкладке «Возможности»:

Lighthouse предлагает использовать кэширование, включить сжатие текста, уменьшить количество неиспользуемых CSS/JS и отложить изображения за пределами экрана (оптимизация картинки с ленивой загрузкой).

После применения WP Rocket на тестовом сайте я заметил, что мои проблемы были перенесены в раздел «Пройденный аудит»:

Но это еще не все. Благодаря WP Rocket улучшились все мои KPI производительности, включая мобильный показатель в PageSpeed Insights. Оценка составила 99/100.

WP Rocket также увеличил показатели Core Web Vitals (все зеленые) и уменьшил общее время загрузки (с 4,1s до 1,9s). Он также сделал меньше размер страницы и количество HTTP-запросов, как вы можете видеть в таблице ниже.

KPIs производительности	The7 Score (без WP Rocket)	The7 Score (с WP Rocket)
Показатель PageSpeed для мобильных устройств	70/100	99/100
Первый контентный рисунок	4.4s	1.7s
Самый большой контентный рисунок*	4.3s	1.7s
Совокупный сдвиг макета*	2.9s	0s
Индекс скорости	1,2	2s
Время до интерактивного режима	1.5s	1s
Общее время блокировки	0 мс	0 мс
Общее время загрузки	4.1s	1.9s
Общий размер страницы	1.5 МБ	680 КБ
HTTP-запросы	25	8

* — Основные показатели веб-информации.

Чтобы устранить все предупреждения PageSpeed Insights и повысить производительность, я использовал следующие функции WP Rocket.

Сжатие текста и кэширование — обе функции включаются автоматически сразу после активации плагина. Вам не нужно ничего делать.

Также можете задать собственные параметры на вкладке «Расширенный кэш» в дашборде WordPress.

Оптимизация CSS-кода — на вкладке «Оптимизация файлов» я выбрал кнопку «Оптимизировать доставку CSS» (используя удобную опцию «Удалить неиспользуемый CSS» ). Я также минифицировали и объединил код, чтобы браузер быстрее загружал и обрабатывал эти документы.

Оптимизация JavaScript-кода — на вкладке «Оптимизация файлов» также есть несколько опций для JS WordPress-сайта. В моем случае я минифицировал документы, загрузили JavaScript с отсрочкой и отложил выполнение.

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

Какие темы WooCommerce лучше всего подходят для вас?

Хотя я не могу посоветовать конкретную тему, поскольку это в значительной степени зависит от вашего дизайна и технических характеристик, но вот несколько советов:

• Для простого интернет-магазина с внешним видом и функциями WooCommerce по умолчанию, без каких-либо дополнительных возможностей, выбирайте Storefront.
• Если нужна бесплатная тема с аккуратным и минималистичным дизайном и расширенными опциями ВуКомерс, то стоит выбрать Botiga.
• Если вы фрилансер и ищете темплейт с большим количеством демо-версий, которые можно показать своим клиентам для разных отраслей, то Divi, BeTheme и the7 могут быть лучшими вариантами.
• Для преданного пользователя Elementor идеально подойдут Astra и The7.
• Если хотите использовать конструктор страниц WPBakery, обратите внимание на The7.
• Для загрузки тысячи товаров лучше выбрать легкую тему Astra или OceanWP. Они оснащены расширенными функциями WooCommerce, так что вы сможете создать собственный интернет-магазин за считанные минуты.
• Если нужно разрабатывать свои макеты отдельных товаров и страниц, а также добавлять на сайт динамические данные, то выбирайте тему, которая хорошо работает с любыми другими конструкторами ВуКомерс.
• Обратите внимание на Avada, если желаете получить темплейт от Themeforest.
• Если выбираете между двумя темами, проверьте их демо-версии и не забудьте посмотреть их на нескольких устройствах. Многие продажи происходят именно на мобильных гаджетах.

И, наконец, последняя рекомендация — выбирайте безопасный темплейт с последними обновлениями, быстрой поддержкой, точной документацией по работе и подробными руководствами.

Заключение

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