Как ускорить WooCommerce с помощью WP Rocket и Botiga

Не знаете, как ускорить WooCommerce и создать магазин с быстрой загрузкой?

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

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

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

Однако это не означает, что у вас нет возможности создать более быстрый магазин.

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

В этом уроке я собираюсь провести вас через оптимизацию скорости WooCommerce самым простым способом, который я знаю: с помощью плагина WP Rocket и нескольких других инструментов и настроек.

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

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

Звучит неплохо? Давайте вместе ускорим WooCommerce.

Две основные тактики оптимизации скорости WooCommerce до WP Rocket

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

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

По сути, WP Rocket все равно сделает ваш магазин быстрее . Но если ваш фонд слишком медленный для запуска, у вас все равно будет медленный магазин. Это будет просто немного… «менее медленно».

Итак, что является прочной основой для производительности WooCommerce?

Вам нужно прибить эти две детали:

1. Выберите более быструю тему WooCommerce

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

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

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

С самого начала Botiga создавалась для производительности. Он использует только ванильный JavaScript (без зависимостей jQuery), автоматически минимизирует свой код и весит меньше 44,3 КБ.

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

В то же время Botiga предлагает множество полезных функций электронной коммерции, в том числе следующие:

• Несколько стилей страницы оформления заказа и корзины
• Мгновенный поиск товаров, чтобы помочь покупателям быстро находить товары
• Рекомендации по стильным продуктам
• Образцы вариантов продукта
• Несколько макетов галереи продуктов
• Списки желаний
• Липкая панель добавления в корзину

У Botiga есть полнофункциональная бесплатная версия, а также версия Pro за 69 долларов, которая добавляет больше функций.

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

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

2. Используйте оптимизированный для производительности хостинг WooCommerce

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

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

Здесь снова у нас есть статья, в которой мы протестировали несколько хостинг-провайдеров, чтобы найти самый быстрый хостинг для WordPress. Если вы спешите, вот несколько хороших вариантов:

• Kinsta – прочитайте наш полный обзор Kinsta
• WP Engine — я особенно рекомендую выделенные планы хостинга для электронной коммерции, которые включают Elasticsearch (что значительно улучшит производительность поиска товаров в вашем магазине).
• Cloudways – прочитайте мой полный обзор Cloudways

Как ускорить WooCommerce с помощью WP Rocket

Теперь пришло время использовать WP Rocket, чтобы привязать бустеры и сделать загрузку WooCommerce еще быстрее.

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

Однако с WP Rocket мы все равно можем ускорить его загрузку. Существует множество отличных плагинов для оптимизации производительности WordPress, так почему же я рекомендую WP Rocket для WooCommerce?

Что ж, вы можете прочитать мой полный обзор WP Rocket, чтобы узнать, почему он мне нравится, но вот краткое изложение основных моментов:

1. Он имеет встроенную совместимость с WooCommerce . Если WP Rocket увидит, что вы используете WooCommerce, он автоматически настроит себя оптимальным образом, когда дело доходит до таких основ, как кэширование. Это огромное преимущество, так как неправильная настройка кэширования в магазине WooCommerce может привести к нарушению ключевых функций.
2. Это очень легко использовать . В дополнение к пункту выше, WP Rocket обычно имеет простой интерфейс, подробную документацию и премиальную поддержку.
3. Это делает ваш сайт намного быстрее . Я оставил лучшее напоследок. WP Rocket просто работает, и он отлично справляется с ускорением загрузки магазинов WooCommerce (и других сайтов WordPress). Он также имеет уникальные функции, такие как возможность удалять неиспользуемый CSS и откладывать выполнение JavaScript.

WP Rocket — это плагин премиум-класса, но 49 долларов — это небольшая цена за более быстрый магазин WooCommerce. Существует прямая связь между временем загрузки страницы и коэффициентом конверсии, поэтому ускорение вашего магазина может легко окупить ваши деньги в виде увеличения коэффициента конверсии.

Для начала обязательно купите копию WP Rocket. Затем, вот как настроить его для WooCommerce.

1. Установите плагин для активации основных оптимизаций.

Для начала зайдите в свой магазин WooCommerce (или сначала настройте его, если у вас его еще нет), установите и активируйте WP Rocket:

Как только вы активируете плагин WP Rocket, он автоматически активирует следующие функции для ускорения вашего магазина:

• Кэширование страниц — WP Rocket также автоматически исключает ключевой контент WooCommerce, чтобы избежать проблем, сохраняя при этом максимально возможное кэширование контента. Например, он исключит вашу корзину и страницы оформления заказа, среди других настроек совместимости.
• Кэширование браузера
• GZIP-сжатие
• Поддержка кросс-происхождения для веб-шрифтов
• Оптимизация файлов Google Fonts

В магазине WooCommerce WP Rocket также автоматически оптимизирует AJAX-запрос get_refreshed_fragments . Это то, что WooCommerce использует для динамического обновления содержимого корзины покупателя.

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

Вот как теперь загружается домашняя страница нашего магазина, не касаясь ни одной настройки в WP Rocket:

Вы можете видеть, что время до первого байта сократилось примерно на 450 мс (с 0,509 до 0,043 с), что приводит к аналогичному сокращению почти всех других показателей, включая наибольшую отрисовку содержимого (LCP). Время наибольшей отрисовки контента сократилось с ~ 1,1 секунды до ~ 0,7 секунды.

Это сокращение в основном является результатом кэширования страниц, удобного для WooCommerce, которое реализует WP Rocket, хотя другие настройки также помогают.

2. Настройте оптимизацию файлов

Хотя WP Rocket активирует множество полезных функций по умолчанию, есть и некоторые важные, которые вам нужно включить вручную.

Для начала перейдите на вкладку « Оптимизация файлов » в области настроек WP Rocket ( Настройки → WP Rocket ).

Здесь вы можете оптимизировать код CSS и JavaScript вашего магазина, что может существенно повлиять на производительность вашего магазина (особенно когда речь идет о Core Web Vitals и оценке производительности Lighthouse).

Вот настройки, которые я рекомендую:

CSS-файлы :

• Сократите файлы CSS . Тема Botiga уже минимизирует свой код по умолчанию, но это может быть полезно для минимизации кода используемых вами плагинов.
• Оптимизировать доставку CSS → Удалить неиспользуемый CSS . Это удалит ненужный CSS на постраничной основе, чтобы уменьшить размер файла каждой страницы.

Я не рекомендую объединять файлы CSS, так как это не очень полезно сейчас, когда большинство качественных хостов используют HTTP/2.

Файлы JavaScript :

• Минимизировать файлы JavaScript
• Загрузка JS отложена
• Задержка выполнения JavaScript

Как и в случае с CSS, я не рекомендую объединять файлы JavaScript.

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

Это отлично подходит для увеличения времени наибольшей отрисовки содержимого, но у вас может быть некоторый JavaScript, который вы хотите загрузить сразу, например сценарии отслеживания (например, Google Analytics или Диспетчер тегов Google) или некоторые плагины, которые вы можете использовать.

WP Rocket поддерживает подробную страницу всех потенциальных исключений, поэтому вам не нужно разбираться в сценариях, чтобы исключить себя. Вы можете просто скопировать их из этой справочной статьи WP Rocket и вставить в поле « Исключенные файлы JavaScript» .

Например, если вы хотите исключить Google Analytics, вы должны настроить его следующим образом:

После внесения этих настроек вы можете увидеть еще больше улучшений. Размер нашей домашней страницы был уменьшен примерно на 80 КБ, а время самой большой отрисовки содержимого сократилось еще больше с ~ 0,7 секунды до ~ 0,5 секунды.

3. Оптимизируйте свои медиа

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

На вкладке « Медиа » я рекомендую включить ленивую загрузку и отсутствующие размеры изображения. Первый поможет вам с производительностью, а второй может уменьшить проблемы с Cumulative Layout Shift (CLS) для дальнейшего повышения производительности Core Web Vitals:

4. Добавьте сеть доставки контента (для глобальных магазинов)

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

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

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

Но если вы ориентируетесь на покупателей по всему миру, например, в Великобритании и США, CDN — еще один отличный способ ускорить WooCommerce.

В разделе CDN WP Rocket предлагает вам два варианта добавления CDN в ваш магазин:

1. Вы можете использовать официальный сервис RocketCDN, который стоит всего 7,99 долларов в месяц за неограниченную пропускную способность. Он основан на глобальной сети StackPath. Это самый простой вариант, поскольку он предлагает автоматическую настройку.
2. Вы можете интегрироваться с любым сторонним CDN, заставив WP Rocket переписать ваши URL-адреса. Популярными вариантами являются StackPath, KeyCDN, Bunny CDN, CloudFront и другие.

Если вы не уверены в настройке собственного CDN, я рекомендую использовать сервис RocketCDN, так как он предлагает довольно выгодную цену, поскольку вы получаете неограниченную пропускную способность по фиксированной цене:

Устранение неполадок с WP Rocket в WooCommerce

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

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

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

Итак, как вы можете это исправить? Давайте рассмотрим несколько советов.

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

Если вы не уверены, вы можете обратиться к разработчику плагина, в котором у вас возникли проблемы. Некоторые плагины включают встроенные инструменты совместимости. Например, в плагине YITH WooCommerce Wishlist есть настройка для включения загрузки AJAX, которая решит любые проблемы с кешированием.

Команда WP Rocket также создала несколько плагинов/инструментов совместимости для популярных плагинов WooCommerce, которые могут вызывать проблемы:

• Плагин списка пожеланий YITH WooCommerce
• Родной виджет недавно просмотренных товаров WooCommerce
• Плагин YITH WooCommerce Недавно просмотренные товары

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

Вы можете попытаться найти информацию о файлах cookie в документации плагина или нанять разработчика, чтобы он это понял. Затем вы можете настроить правила исключения кэша файлов cookie в области « Дополнительные правила » WP Rocket:

Другие полезные плагины для оптимизации скорости WooCommerce помимо WP Rocket

WP Rocket может делать почти все, что вам нужно для оптимизации производительности WooCommerce. Но есть одно главное исключение:

Картинки!

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

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

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

• Imagify — этот плагин создан тем же разработчиком, что и WP Rocket.
• ShortPixel — это плагин, который я использую на своих сайтах.
• WP Compress — еще один качественный вариант; узнайте больше в нашем обзоре WP Compress

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

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

Вы можете исправить это с помощью поисковых решений вне сервера, таких как Elasticsearch (через плагин ElasticPress) или Jetpack Search (который также основан на Elasticsearch, но проще в реализации).

Ускорьте свой магазин WooCommerce уже сегодня

Если вы хотите, чтобы ваш магазин WooCommerce был успешным, важно, чтобы он загружался быстро.

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

1. Выберите быстро загружаемую тему WooCommerce, например бесплатную тему Botiga.
2. Используйте хостинг WordPress с оптимизированной производительностью, такой как Kinsta или WP Engine.
3. Установите основу вашего сайта электронной коммерции.

Оттуда WP Rocket может помочь вам реализовать ряд оптимизаций производительности WooCommerce, включая кэширование, совместимое с WooCommerce, оптимизацию CSS и JavaScript и многое другое.

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

У вас остались вопросы о том, как ускорить WooCommerce с помощью WP Rocket и Botiga? Дайте нам знать об этом в комментариях!