17 мощных способов ускорить работу вашего магазина WooCommerce

17 мощных способов ускорить работу вашего магазина WooCommerce

Скорость — это деньги для сайта электронной коммерции. Чем быстрее загружается ваш сайт, тем лучше впечатления от покупок. Улучшение пользовательского опыта приводит к улучшению SEO, повышению рентабельности инвестиций и более счастливым клиентам. В конечном итоге это приводит к увеличению доходов и прибыли. Сегодня покупатели ожидают изображений и видео высокого разрешения, живого чата, отзывов пользователей, инвентаризации в реальном времени, персонализации и множества других динамичных инструментов. У онлайн-покупателей короткий период внимания. Следовательно, все функции, которые они ожидают для более быстрой и плавной покупки, замедляют работу вашего сайта электронной коммерции, если вы не используете их должным образом. WooCommerce — самая популярная в мире платформа электронной коммерции, которую можно свободно использовать и настраивать в соответствии с вашими требованиями.

 

Вашу рекламу скликивают конкуренты?

Подключите защиту по ссылке и экономьте ваш рекламный бюджет!

WooCommerce leads the ecommerce pack

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

WooCommerce plugin downloads and usage stats

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

Оглавление статьи:

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

Первое впечатление имеет значение, и скорость — это первое, что пользователь заметит на вашем сайте. Согласно исследованию Google, 53% мобильных пользователей покидают сайт, если его загрузка занимает более 3 секунд.

Average Website Speed Index in the US by Google

В другом глобальном исследовании 80% пользователей заявили, что медленно загружающийся сайт их расстраивает больше, чем временно неработающий. Это же исследование также показало, что 73% пользователей перейдут на сайт конкурента, если сайт загружается слишком медленно. Даже 100-миллисекундная задержка времени отклика страницы может нанести ущерб пользовательскому опыту и доходам в Интернете. По данным Akamai, 100-миллисекундная задержка влияет на конверсию на 7%, а 2-секундная задержка увеличивает количество отказов на 103%. Если ваш сайт ежедневно приносит доход в размере $1000, то 100-миллисекундная задержка загрузки страниц может стоить вам $25 550 потерянных продаж в год. Чем крупнее бизнес, тем больше падение. Например, компания Amazon прогнозирует потерю доходов в размере 1,6 миллиарда долларов в год, если время загрузки страниц замедлится всего на одну секунду.

Page load time versus bounce rate chart by Google

Из приведенных выше данных следует, что если ваш сайт загружается 6 секунд и более, вы теряете в два раза больше пользователей, чем если бы ваш сайт загружался менее чем за 3 секунды. Помимо удобства для пользователей, скорость вашего сайта также влияет на SEO. Скорость и производительность сайта играют важную роль в алгоритме ранжирования сайтов Google. Google перешел на мобильную индексацию более 50% страниц, отображаемых в результатах поиска. Несмотря на это, данные HTTPArchive.org свидетельствуют о том, что среднее время загрузки мобильных сайтов на WordPress за последний год ухудшилось.

WordPress sites performance stats from HTTPArchive.org

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

Измерение скорости работы магазина WooCommerce

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

Pingdom Tools example speed test report

Я рекомендую вам начать работу с одним из этих инструментов тестирования скорости веб-сайта: WebPagetest, Pingdom, Google PageSpeed Insights или GTMetrix. Вы также можете использовать бесплатный плагин WordPress Query Monitor, чтобы точно определить темы, плагины и функции, которые работают плохо. Он поможет вам отладить неэффективные запросы к базе данных, раздутые функции, ошибки PHP, вызовы HTTP API и т.д. Ни один инструмент тестирования скорости не является идеальным, но выберите один и придерживайтесь его. Позже вы сможете перейти к другим вариантам.

A tweet by Gary Illyes, Webmaster Trends Analyst, Google

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

Как ускорить WooCommerce

Отчет о тестировании скорости даст вам план действий по оптимизации вашего медленного сайта WooCommerce. Воодушевлены? Давайте приступим!

Оптимизируйте настройки WooCommerce для повышения производительности

Давайте начнем с основ, оптимизировав настройки плагина WooCommerce. Во-первых, измените URL страницы входа. По умолчанию URL-адрес входа каждого сайта WordPress — domain.com/wp-admin/. Хотя его легко запомнить, он создает серьезную проблему: о нем знают все, включая ботов и хакеров. Изменение URL-адреса входа в систему на уникальный защитит вас от атак грубой силы со стороны недоброжелателей. Это также поможет вам бороться с ограничивающими скорость HTTP-ошибками типа 429 Too Many Requests. Бесплатные плагины, такие как WPS Hide Login и Rename wp-login.php, упрощают эту задачу. Если на вашем сайте электронной коммерции есть блог, вы можете ограничить количество сообщений в ленте блога. По умолчанию WordPress устанавливает это ограничение на 10 сообщений, но вы можете установить более низкий предел. Хотя это может показаться мелочью, экономия на производительности увеличивается, если вы ведете блог с высокой посещаемостью (вот как привлечь трафик на свой сайт). Вы можете найти эту опцию в разделе WordPress Dashboard → Settings → Reading.

WordPress settings to limit the number of post revisions

Затем отключите обратные ссылки на вашем сайте. Они обычно генерируют бесполезный спам. Чем меньше запросов генерирует ваш сайт, тем лучше.

Optimizing the WordPress discussion settings

Если у вас много комментариев пользователей на ваших постах или страницах, то WordPress также предоставляет возможность разбить их на более мелкие фрагменты. Аналогичная настройка действует и для разбивки отзывов на страницах товаров. Для оптимизации времени загрузки страницы товара держите это число между 10 и 20. Вы можете отключить отзывы о товарах в разделе WooCommerce → Настройки, если вам не нравится их наличие в вашем магазине. Это поможет ускорить работу сайта, так как исключит загрузку нескольких скриптов и виджетов.

Disabling product reviews in WooCommerce settings

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

Приобретите быструю тему WooCommerce

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

Featured themes on WordPress.org

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

Using filters to search smartly for themes on wp.org

WP Rocket протестировал несколько популярных тем WooCommerce на скорость и пришел к следующим результатам.

WooCommerce themes size and requests report by WP Rocket

Astra, OceanWP и GeneratePress также являются фаворитами Kinsta, как было предложено в статье об ускорении WordPress. Это сверхбыстрые, легкие темы WordPress. В этом руководстве вы найдете еще 10+ очень быстрых тем. В паре с конструктором страниц, таким как Elementor или Beaver Builder, они могут помочь вам создать практически любой сайт.

Opt for a fast WooCommerce theme (Image source: WP Rocket)

Storefront — это бесплатная тема, предлагаемая WooCommerce, в то время как Shoptimizer, Divi и WoondrShop — это темы премиум-класса. Поскольку эти темы созданы для сайта электронной коммерции, нет необходимости устанавливать сторонние плагины, чтобы получить все нужные вам функции. Если вы ограничены в бюджете, вполне можно начать с бесплатной темы, а затем перейти на премиум-решение. Я рекомендую отказаться от конструкторов страниц, чтобы уменьшить раздутость. Вместо этого выбирайте тему, поддерживающую блочный редактор WordPress Gutenberg. Чтобы определиться с темой, я советую вам перечислить все функции, которые нужны вашему интернет-магазину. Затем выберите тему, которая охватывает большинство ваших требований к функциям. Это поможет вам сократить зависимость от раздутых многоцелевых тем и сторонних плагинов. Это подводит нас к следующему предложению.

Полегче с плагинами и расширениями WooCommerce

WordPress имеет 54 000+ бесплатных плагинов в своем репозитории. В свободном доступе находится еще больше плагинов премиум-класса. Таким образом, легко увлечься и установить десятки из них.

A screenshot of plugins available on wp.org

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

WooCommerce Extensions Store page

Вопреки распространенному мнению, количество установленных плагинов не всегда приводит к проблемам с производительностью. Но это верно только в том случае, если плагины созданы с использованием лучших практик кодирования. Проверка каждого плагина, который вы устанавливаете, на качество становится хлопотным делом, когда их слишком много. И это при условии, что у вас есть навыки и опыт для их тщательной проверки. Некоторые плагины даже создают конфликты с другими плагинами. Когда на вашем сайте установлены десятки плагинов, вероятность возникновения конфликта плагинов возрастает в геометрической прогрессии. Следовательно, будьте умны в выборе типа плагинов и расширений WooCommerce, которые вы устанавливаете.

Увеличьте лимит памяти WordPress

По умолчанию WordPress выделяет 32 МБ памяти для PHP. Если у него возникнут проблемы, он автоматически попытается увеличить этот лимит до 40 МБ (для одного сайта) или 64 МБ (для нескольких сайтов). В большинстве случаев этого лимита памяти будет недостаточно для сайта WooCommerce. Вы даже можете получить сообщение об ошибке на вашей приборной панели, например: «Разрешенный объем памяти xxxxxx байт исчерпан». Рекомендуется увеличить этот лимит до 256 МБ. Всегда делайте резервную копию любого файла перед его редактированием. В случае если что-то пойдет не так, вы сможете заменить отредактированный файл на оригинальный.

Сжатие изображений и оптимизация доставки

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

The median WordPress page weight in 2020 as per HTTPArchive.org

Хотя видео является более тяжелым ресурсом, чем изображения, в большинстве случаев они загружаются по требованию. Следовательно, они не так сильно влияют на воспринимаемую скорость загрузки страницы, как изображения. Согласно отчету HTTP Archive’s State of the Images, вы можете сэкономить 545 КБ на странице, если будете лениво загружать скрытые и неэкранные изображения. Установив уровень сжатия JPEG на 85 или ниже, можно дополнительно сэкономить 40,3 КБ на страницу. Эта метрика взята прямо из Lighthouse, инструмента Google для тестирования скорости мобильных веб-сайтов. Следуйте этим 5 правилам, чтобы оптимизировать изображения для вашего магазина WooCommerce (и для Интернета в целом):

  • Выберите правильный формат для изображений (JPEG, PNG, SVG, WebP).
  • Эффективно сжимайте изображения с помощью подходящих инструментов.
  • Используйте отзывчивые изображения, чтобы оптимизировать доставку для различных устройств.
  • Ленивая загрузка вне экрана и скрытых изображений.
  • Передавайте доставку изображений в быстрые CDN.

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

Customizing WooCommerce's Product Images through the WordPress Customizer

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

  • Compressor.io
  • Squoosh.app
  • Shrinkme.app
  • Kraken.io
  • Imagify.io
  • TinyJPG | TinyPNG
Compressing images losslessly on Compressor.io

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

  • Shortpixel
  • Imagify 
  • reSmush.it
  • Optimole

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

Доставка статических ресурсов через CDN

Сеть доставки контента (CDN) — это группа серверов, стратегически расположенных по всему миру. Эти серверы известны как точки присутствия (PoP). Основной функцией CDN является кэширование и доставка статических ресурсов, таких как изображения, JavaScript, CSS и т. д. Более мощные CDN могут также размещать и доставлять динамическое содержимое, такое как аудио и видео. Даже если ваш сайт работает на самом быстром сервере на планете, он все равно ограничен своим географическим положением. WordPress CDN сокращает расстояние между отдельным пользователем и ресурсами сайта, уменьшая задержки в сети и время до первого байта (TTFB).

Kinsta CDN

В зависимости от того, откуда поступил запрос, он автоматически назначает ближайший CDN PoP для доставки кэшированных ресурсов. В результате веб-сайт работает быстрее, а пользователь получает более качественный опыт. Например, если ваш магазин WooCommerce размещен на сервере в США, а пользователь из Индии пытается открыть ваш сайт, CDN будет обслуживать ресурсы сайта с ближайшего PoP. В данном случае это будет Бенгалуру (Индия).

An infographic showing how CDNs help with serving static content faster

Как правило, чем больше количество PoP и чем шире их глобальное распространение, тем быстрее будет работать ваш сайт для пользователей. Компания Kinsta протестировала свою CDN, и результаты говорят сами за себя. Для пользователей, находящихся в географических точках, значительно удаленных от сервера хостинга, использование CDN сократило время загрузки сайта более чем на 50%. Помимо кэширования, многие CDN включают другие функции, повышающие производительность, такие как превосходное сжатие изображений «на лету», поддержка HTTP/2, защита горячих ссылок и дополнительная безопасность. Чтобы магазин WooCommerce работал быстрее, мы рекомендуем вам приобрести быструю CDN. Вот некоторые популярные CDN, которые вы можете проверить:

Удалите неиспользуемые скрипты и таблицы стилей

Большинство тем и плагинов WordPress загружают скрипты и таблицы стилей на все страницы вашего сайта. Они загружают эти ресурсы, даже если они не используются на странице. Например, Contact Form 7 загружает свои скрипты и таблицы стилей на каждой странице. Его формы могут использоваться только на странице контактов, но активы загружаются на всех страницах. Совершенно излишне! Удаление этих неиспользуемых активов со страниц поможет вам уменьшить раздутость и ускорить время загрузки страниц. WooCommerce и его расширения (например, Smart Coupons и Follow-Ups) подвержены этой проблеме. Например, нет необходимости загружать скрипты, связанные с платежными шлюзами, на главной странице вашего магазина или на странице магазина. Вы можете ограничить загрузку таких скриптов только на страницах оформления и подтверждения заказа. Аналогично, удалите скрипты и стили для слайдеров и каруселей со страницы оформления заказа. Если вы хотите знать, какие активы следует исключить, посмотрите на диаграмму водопада в отчете о тестировании скорости вашего сайта. Это даст вам представление о ненужных загружаемых активах.

An example of GTMetrix's Waterfall Chart

Вкладка «Сеть» в DevTools браузера Chrome также является хорошим местом для начала работы. Она даст вам полное представление о том, как и что загружается на веб-странице.

The Network tab under Google Chrome's DevTools

Удалите скрипты и стили, которые не нужны для функционирования страницы. Начните с оптимизации домашней страницы и целевых страниц, поскольку это первые точки входа для большинства ваших пользователей. Вы можете использовать функции wp_dequeue_script и wp_dequeue_style для удаления ненужных вам скриптов и стилей. Простой способ добиться того же — использовать плагин под названием Asset CleanUp: Page Speed Booster.

Clean up your WordPress assets with Asset CleanUp plugin

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

Unloading the Stripe payment gateway script from loading on a page with Asset CleanUp plugin

Профессиональная версия плагина позволяет устанавливать атрибуты async или defer для активов. Применение этой настройки удаляет JavaScript с критического пути рендеринга страницы. Это должно помочь улучшить воспринимаемое время загрузки страницы вашего сайта. Еще одним преимуществом удаления ненужных CSS и JS активов является то, что ваш сайт будет делать меньше HTTP-запросов. В качестве бесплатной альтернативы вы можете использовать комбинацию плагинов Autoptimize и Async JavaScript для получения тех же результатов. Если вы выберете плагин Autoptimize, вот наше полное пошаговое руководство по оптимальным настройкам.

HTTP/2 чрезвычайно важен

Если бы мы писали эту статью несколько лет назад, мы бы назвали этот раздел «Сокращение количества HTTP-запросов». Благодаря существенным улучшениям в том, как браузеры взаимодействуют с веб-сайтами (и наоборот), необходимость в этой оптимизации теперь отпала. HTTP 1.1 был первым крупным обновлением протокола HTTP, и его разработка была завершена в 1997 году. Это было еще до появления социальных сетей, потоковых сервисов, приложений для смартфонов и даже WordPress. С тех пор Интернет развивался экспоненциально. HTTP/2 усовершенствовал протокол HTTP 1.1 и появился в 2015 году, чтобы соответствовать растущим потребностям Интернета. Он принес с собой удивительные улучшения в скорости, эффективности и безопасности.

HTTP 1.1. versus HTTP/2 major benefits

Увеличение производительности при использовании HTTP/2 объясняется несколькими причинами:

  • Лучшее мультиплексирование и параллелизм в одном TCP-соединении.
  • Сжатие HPACK для заголовков с алгоритмом кодирования Хаффмана.
  • Расширение ALPN для более быстрого шифрования.
  • Проактивное подталкивание сервера вместо ожидания запросов.

Весь этот джаз сводится к одному важнейшему преимуществу: заставить сайты загружаться быстрее, даже если на них размещены различные типы ресурсов. Как правило, в магазинах WooCommerce размещается большое количество ресурсоемких активов, таких как изображения, таблицы стилей и скрипты. Такие сайты получат большую пользу от перехода на HTTP/2. Вы можете использовать инструмент тестирования HTTP/2 от KeyCDN, чтобы проверить, настроен ли ваш сайт на работу с HTTP/2. На данный момент все основные браузеры поддерживают HTTP/2. Нет причин, по которым вы не могли бы воспользоваться его огромными преимуществами в производительности. Если ваш хостинг-провайдер еще не поддерживает HTTP/2, начните искать нового. Kinsta поддерживает HTTP/2 и TLS 1.3 на всех своих серверах и CDN. Более того, HTTP/3 уже не за горами, и он сделает загрузку веб-сайтов еще быстрее.

Кэшируйте WooCommerce, чтобы ускорить его работу

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

An infographic of how web caching works
  • Пользователь делает запрос через браузер на веб-сайт. Например, он набирает в браузере адрес clickfraud.ru.
  • Затем браузер делает запрос на веб-страницу (HTML-документ) для отображения пользователю. DNS-сервер обрабатывает этот запрос, в результате чего становится известен IP-адрес хостинг-сервера.
  • Возврат веб-страницы обрабатывается приложением (например, WordPress, Joomla и т.д.), размещенным на веб-сервере. Для статических веб-сайтов приложение может даже не понадобиться.
  • Приложение запускает скрипты (например, PHP, JavaScript и т.д.) и (5) запрашивает базу данных (например, MySQL, MongoDB и т.д.) для создания веб-страницы. Затем он возвращает веб-страницу в браузер, который отображает ее и показывает пользователю.
  • Если все работает гладко, выполнение всех вышеперечисленных шагов должно занимать максимум несколько секунд.

Но это только один запрос от одного пользователя. А что если одновременно поступит несколько запросов от тысяч пользователей? Это создаст огромную нагрузку на сервер, что в конечном итоге приведет к замедлению работы сайта. Именно здесь на помощь приходит кэширование. Оно уменьшает объем работы, необходимой для создания просмотра страницы, тем самым снижая зависимость WordPress от PHP и базы данных. Благодаря кэшированию WordPress работает почти так же быстро, как статические сайты, если не так же. Существует 2 основных типа веб-кэширования, каждый из которых имеет свои особенности:

Кэширование на стороне сервера

  • Bytecode Cache (OPCache)
  • Object Cache
  • Page Cache
  • CDN Cache

Кэширование на стороне клиента

  • Кэш браузера
An example of improvement in WordPress load times after migrating to Kinsta

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

  • WP Rocket (премиум)
  • W3 Total Cache (бесплатно)
  • Cache Enabler (бесплатно)

Очистите базу данных WooCommerce

База данных — это организованная коллекция всех данных вашего сайта. В магазине WooCommerce она включает в себя:

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

Каждый раз, когда пользователь посещает ваш магазин, он запрашивает содержимое вашего сайта, которое в основном статично и практически не меняется. Но когда они оформляют заказ, они делают динамический запрос. Если вы не оптимизируете базу данных своего магазина, обработка этих запросов может занять слишком много времени. В конечном итоге, медленное время отклика сервера приводит к медленной работе сайта. Следовательно, вы должны очистить и оптимизировать базу данных, удалив ненужный хлам. Вот 6 способов ускорить и оптимизировать базу данных WooCommerce.

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

Deleting old post revisions with WP Rocket

Если вы умеете работать с WP-CLI, то вы также можете подключиться к своему серверу через SSH и выполнить несколько простых команд. Вот как вы можете это сделать.

Ограничьте количество хранимых ревизий. Вы можете избежать большого количества старых правок, ограничив количество правок для постов и страниц. Если вы склонны часто обновлять содержимое своего сайта, это поможет вам не допустить выхода ревизий из-под контроля. Простой способ установить ограничение — добавить приведенный ниже фрагмент кода в файл wp-config.php. Убедитесь, что он добавлен перед строкой, в которой определяется ABSPATH.

define('WP_POST_REVISIONS', 15);

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

Using the WP Revisions Control plugin to limit the number of post revisions

Полностью отключить изменения (если они не нужны). Вы можете полностью отключить ревизии на своем сайте. Все, что вам нужно сделать, это добавить следующий код в файл wp-config.php. Как и раньше, убедитесь, что вы добавили этот фрагмент выше строки, где определен ABSPATH.

define('WP_POST_REVISIONS', false);

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

Очистите просроченные переходные периоды. Переходные периоды — это кэшированные данные, хранящиеся с пользовательским именем и сроком действия. Обычно они хранятся в базе данных WordPress в таблице wp_options. Переходные периоды похожи на Опции, только у них есть дополнительное свойство — срок действия. Они полезны для хранения временных данных, например, ответов от удаленного API или больших запросов. WordPress Transients API определяет, как работать с переходными периодами и автоматически удалять истекшие переходные периоды. Однако не всегда все идет по плану. Иногда поврежденный кэш переходных периодов может создать почти миллион нежелательных записей, и конца этому не видно. Сессии клиентов могут накапливаться со временем, создавая тысячи ненужных строк в таблицах вашей базы данных. В таких случаях переполненная база данных может поставить ваш сайт на колени. Бесплатный плагин Delete Expired Transients — это простой способ избавиться от всех просроченных переходных периодов.

Delete Expired Transients plugin panel screen

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

The wp_options table in WordPress database under phpMyAdmin

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

Отключите некритичные функции, которые нагружают базу данных. Темы и плагины WooCommerce поставляются с множеством классных функций, которые кажутся отличными с самого начала, но в итоге разрушают базу данных. Одним из таких примеров является использование плагинов «Популярные товары» и «Похожие товары». Эти функции могут вызвать огромные запросы по всему сайту, особенно если у вас много товаров. Если вам нужны эти функции, попробуйте вставить их на свои страницы вручную. Такие плагины, как Advanced Custom Fields, могут оказать в этом огромную помощь.

Kinsta's

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

Social Warfare plugin is known to be taxing on your server

Кроме того, держитесь подальше от плагинов, которые добавляют счетчики на ваш сайт. Например, добавление количества просмотров/постов/комментариев рядом с именем пользователя. Длительная дискуссия с участием нескольких пользователей приведет к тому, что ваша база данных будет испытывать нагрузку при подсчете этих цифр. Этот совет справедлив и для использования социальных счетчиков. Минимизируйте использование автоматически генерируемых счетчиков, чтобы увеличить производительность базы данных. Как и уборка дома, тонкая настройка базы данных WordPress — это постоянный процесс. Помня об этом, Kinsta внедрила автоматизированную систему для борьбы с проблемами производительности базы данных. Основываясь на потребностях вашего сайта, автоматизированная система сканирует и настраивает вашу базу данных MySQL один раз в неделю, чтобы обеспечить пиковую производительность базы данных. Если система обнаруживает что-то необычное, что не может быть исправлено автоматически, она уведомляет команду сисадминов для принятия немедленных мер. Если ваш сайт размещен в другом месте, вот несколько плагинов для оптимизации баз данных, которые облегчат вам работу:

  • WP-Sweep
  • WP-Optimize
  • WP Clean Up Optimizer
  • Advanced Database Cleaner

Напоминание: перед редактированием базы данных или основных файлов WordPress всегда делайте резервную копию.

Оптимизируйте свой магазин для работы с мобильными устройствами

По состоянию на январь 2020 года в мире насчитывается более 4 миллиардов пользователей Интернета. Почти столько же пользователей мобильного интернета. Ожидается, что к 2024 году их число вырастет до 5+ миллиардов.

Total number of Internet users in the world

В 2019 году мобильные устройства обогнали настольные компьютеры по посещаемости веб-сайтов в мире, обеспечив 52,6% от общего числа просмотров страниц. В некоторых странах, таких как Индия и Нигерия, на мобильные телефоны приходится более 70% просмотров веб-страниц.

Kinsta's mobile versus desktop traffic in Google Analytics

По данным исследования, в котором приняли участие более 500 миллионов онлайн-покупателей из 37 стран, на смартфоны приходится 65% посещений сайтов и 46% заказов электронной коммерции.

A bar chart graph of conversion rate by devices

Удивительно, но коэффициент конверсии для мобильных телефонов составляет менее половины, чем для настольных компьютеров. Здесь есть феноменальные возможности для роста.

58% smartphone users are more likely to buy from mobile-optimized websites

Вы можете начать с того, чтобы сделать свой магазин WooCommerce удобным для мобильных устройств. Вы можете использовать инструмент Google Mobile Friendly Test, чтобы проверить, соответствует ли ваш сайт минимальным стандартам мобильного удобства.

Google's Mobile Friendly Test tool

Тест покажет вам снимок того, как ваш сайт выглядит на мобильном устройстве. Он также перечислит все проблемы с мобильным удобством, если таковые будут обнаружены. Самый простой способ сделать ваш сайт WordPress удобным для мобильных устройств — использовать отзывчивую тему. Все темы, упомянутые ранее в этом посте, являются отзывчивыми из коробки и отлично смотрятся на мобильных устройствах. Мобильным покупателям не нравится бесконечная прокрутка. Поэтому сделайте страницы вашего магазина как можно более компактными. Не перегружайте их слишком большим количеством контента. Если в вашем магазине представлено множество товаров, облегчите мобильным покупателям поиск по ним. Вы можете установить плагин WooCommerce Product Search, который поможет вашим клиентам быстро находить товары с помощью живых фильтров.

WooCommerce Product Search plugin screenshot

Наконец, упростите процедуру оформления заказа для ваших онлайн-покупателей. Чем меньше шагов для оформления заказа, тем лучше впечатления от покупки. Вот несколько расширений WooCommerce, которые могут помочь вам в этом:

  • WooCommerce Social Login — устраняет необходимость в трудоемком процессе создания учетной записи или входа в систему. Позвольте вашим пользователям войти в систему с помощью своих социальных аккаунтов, таких как Facebook, Twitter, Google и т.д.
  • Варианты и фотографии — Попрощайтесь с надоедливыми выпадающими меню для выбора вариантов товара. Вместо этого предоставьте пользователям кнопки для выбора всех вариантов товара, которые легко нажимаются.
  • Оформление заказа на одной странице — Не позволяйте своим клиентам так просто покинуть ваш сайт. Дайте им возможность приобрести то, что они хотят, мгновенно и без лишних шагов. Если вы считаете, что гостевая касса отлично подходит для вашего магазина, то вы можете рассмотреть возможность ее включения.
  • Редактор полей оформления заказа — добавляйте, удаляйте или изменяйте поля на странице оформления заказа. Например, если вы продаете только цифровые товары, вам не нужно собирать адреса доставки.
  • Bolt / Stripe / Amazon Pay / PayPal — Платежи — это бич мобильного шопинга. Вы можете выбрать из различных расширений платежных шлюзов WooCommerce, чтобы облегчить сбор платежей.
Bolt payment gateway extension for WooCommerce

В конечном итоге, мобильный шопинг — это не просто совершение покупки. Многие пользователи используют его в первую очередь для поиска информации о продукте и проверки/сравнения цен. Сделайте свой интернет-магазин удобным для пользователей мобильных устройств.

Отключите AJAX-запрос Get Refreshed Fragments

Когда пользователь вносит какие-либо изменения в свою корзину, WooCommerce использует AJAX-запрос Get Refreshed Fragments для динамического обновления содержимого корзины. Обновление страницы корзины без ее перезагрузки кажется отличным с точки зрения удобства для пользователя. Но в большинстве случаев это замедляет работу сайтов, в основном тех, которые размещены на общих серверах. Кроме того, многие сайты в итоге не используют эту функцию. Чтобы проверить, я протестировал современный магазин WooCommerce на Pingdom Tools, и вот результаты:

Load time chart for WooCommerce's Get Refreshed Fragments Ajax request

Несмотря на размер всего 1,1 КБ, запрос wc-ajax=get_refreshed_fragments выполняется за 0,76 секунды. Если загрузка вашего сайта занимает 3 секунды или меньше, то это более 25% времени загрузки страницы. Этот тестовый сайт размещен на облачном VPS, поэтому вы можете представить себе время загрузки на более дешевом хостинге. В этом посте WebNots более подробно рассматривается данная проблема. Вы можете использовать бесплатные плагины Disable Cart Fragments или Disable Cart Fragments by Optimocha, чтобы отключить этот обременительный запрос. Если вы отключите этот запрос, то рекомендуется включить опцию «Перенаправление на страницу корзины после успешного добавления» в панели настроек WooCommerce → Продукты.

WooCommerce Product settings panel to enable Redirect to Cart behavior

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

Оптимизация панели администратора WooCommerce. Скорость не является важным фактором только для фронтенда вашего магазина. Быстрый бэкэнд не менее важен для управления вашим магазином с легкостью и делать быстрые изменения, когда это необходимо. Эффективная работа на панели администратора WooCommerce — это ключ к продуктивности. Это также освободит ваше время, чтобы делать более важные вещи для успеха вашего магазина WooCommerce, такие как интернет-маркетинг. Ниже приведены несколько способов исправить медленную панель WooCommerce. Оптимизация фронтенда в первую очередь, оптимизация бэкенда во вторую очередь Проблема возникает только с панелью управления WordPress, а не со всем сайтом? Если это так, то сначала примените все перечисленные ранее оптимизации. Почему? Потому что в большинстве случаев, делая ваш магазин WooCommerce загружается быстрее на фронтенде будет оптимизировать бэкенд тоже. Мы можем объяснить это освобождением ресурсов на вашем сервере. Если даже после оптимизации фронтенда ваша панель администратора не работает, переходите к следующим предложениям.

Устраните раздутость и регулярно все обновляйте

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

Yoast SEO plugin Big Banner Animated Ad inside the WordPress dashboard

Отключите кэширование объектов и базы данных

Плагины кэширования — отличный способ ускорить работу сайта WordPress. Однако при неправильной настройке они могут привести к неожиданным результатам. К ним относится замедление работы бэкенда. Например, W3 Total Cache — один из самых популярных плагинов кэширования для WordPress. Он бесплатный, поддерживает множество опций кэширования, минифицирует JS и CSS, интегрируется с CDN и используется более чем 1 миллионом веб-сайтов.

WordPress W3 Total Cache General Settings Panel

W3 Total Cache имеет следующие опции кэширования:

  • Кэш страниц.
  • Кэш опкодов.
  • Кэш базы данных.
  • Кэш объектов.
  • Кэш браузера.
  • Кэш фрагментов.

Наличие большого количества вариантов сбивает с толку, особенно новичков, которые не понимают, что делает каждый тип кэширования. Кэширование объектов и баз данных ускоряет работу сайта за счет уменьшения количества запросов к базе данных, но это происходит за счет перегрузки памяти сервера. В идеале это не должно представлять проблемы, если ваш хостинг-сервер достаточно умный или мощный. Например, если ваш сайт WordPress размещен на хостинге Kinsta, вам не нужно беспокоиться о кэшировании, поскольку оно уже реализовано на уровне сервера. К сожалению, такое возможно не у каждого хостинг-провайдера. В этом случае вам придется прибегнуть к помощи стороннего плагина кэширования, например, W3 Total Cache. Его простые настройки позволяют легко включить все типы кэша одним щелчком мыши. В панели W3 Total Cache → Общие настройки отключите объектный кэш и/или кэш базы данных. Затем проверьте, улучшилась ли отзывчивость вашей панели администратора.

W3 Total Cache Disable Database and Object Cache

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

Удалите плагины с высоким потреблением ресурсов

Некоторые плагины WordPress отнимают много ресурсов у вашего веб-сервера. В итоге они используют большую часть процессора и оперативной памяти вашего сервера. Вы можете использовать бесплатный плагин Query Monitor для поиска проблемных плагинов. Он покажет вам все скрипты, стили и вызовы HTTP API, которые загружаются на вашем сайте, а также их размер и время загрузки. Обратите внимание на те, которые имеют наибольшее количество запросов и самое медленное время загрузки. На тестовом сайте, представленном ниже, плагин Classic Editor загружается медленнее всего на стороне администратора. Другие плагины, такие как Loginizer, All-in-One WP Migration и WP Bakery (бывший Visual Composer), также проявляют себя как потенциальный раздуватель.

Query Monitor plugin dashboard to find the slowest plugins

Я обнаружил, что плагины миграции и Classic Editor не нужны. Удаление этих двух плагинов значительно улучшило скорость работы администратора. Магазины WooCommerce с международной аудиторией используют плагины перевода, такие как WPML, для динамического обслуживания сайта на нескольких языках. Это отличный плагин с множеством функций, но он также может значительно замедлять работу бэкенда администратора. Вы можете получить некоторое преимущество в производительности, переключившись на плагин для экономного перевода, такой как Polylang. У него не так много функций, но он отлично подходит для большинства случаев использования. Плагины, которые имеют много постоянных процессов/сканирований, замедляют работу бэкенда WordPress. В качестве примера можно привести генераторы карт сайта, аналитические графики и диаграммы, конструкторы страниц и плагины для чата.

Используйте правильные настройки CDN для WordPress

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

  • Перейдите в раздел «Правила страницы» на панели управления Cloudflare.
  • Добавьте example.com/wp-admin/ в поле URL.
  • В полях настроек выберите опции Уровень кэша и Обход.
  • Вы также можете добавить дополнительные настройки, такие как Отключить производительность и Отключить безопасность (не рекомендуется). Эти параметры являются необязательными.
  • Затем нажмите кнопку Сохранить и развернуть.
Cloudflare Page Rules section for disabling cache on admin panel WordPress

Для того чтобы настройки вступили в силу, должно пройти около 3 минут. Если вы используете KeyCDN, то вы можете использовать их WordPress Cache Enabler Plugin, чтобы сделать то же самое. Для других CDN, пожалуйста, обратитесь в их службу поддержки, чтобы разобраться с этим.

Оптимизация API WordPress Heartbeat

WordPress Heartbeat API позволяет обновлять информацию практически в режиме реального времени, поддерживая регулярное соединение между вашим браузером и сервером. API посылает запросы на сервер каждые 15-60 секунд, а затем запускает события (или обратные вызовы) после получения данных. Это позволяет использовать некоторые удивительные функции, такие как автосохранение постов, блокировка постов и предупреждения об истечении срока авторизации. Однако, когда вы вошли в систему как администратор, отправка нескольких запросов на сервер каждую минуту может замедлить работу вашей административной панели. Бесплатный плагин WP Rocket Heartbeat Control позволяет управлять частотой этих API-запросов на приборной панели, фронтенде и в редакторе постов. Он даже дает вам возможность полностью отключить API.

WordPress Heartbeat Control plugin panel

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

Скорость WooCommerce начинается с качественного хостинга

Как и при эксплуатации автомобиля со спущенными шинами, независимо от того, сколько оптимизаций вы сделаете, ваш сайт не станет быстрее, если он размещен на паршивом сервере. Значительная часть производительности вашего сайта зависит от качества хостинга. Существуют различные типы хостинга для сайтов WordPress, которые делятся на две основные категории: Управляемый и Неуправляемый. Первый идеально подходит для большинства пользователей, так как хостинг-провайдер выполняет все работы по оптимизации сервера для WordPress. Второй вариант больше подходит для технически подкованных пользователей, которые могут самостоятельно настраивать и управлять сервером. Для сайта WooCommerce выбирайте управляемый хостинг WordPress. Имейте в виду, что управляемый хостинг, как правило, дороже, чем неуправляемый. Вы можете выбрать один из 4 основных типов управляемого хостинга WordPress. Каждый из них имеет свои плюсы и минусы, поэтому выбирайте тот, который соответствует вашему бюджету и целям. Я сравнил их в приведенной ниже инфографике по различным характеристикам.

An infographic of 4 main types of Managed WordPress hosting

Каждый тип хостинга может предлагаться в рамках нескольких тарифных планов по разным ценам. Поэтому, когда вы ищете хостинг в пределах вашего бюджета, обратите внимание на предлагаемые функции, чтобы решить, отвечает ли он вашим требованиям. Сайты WooCommerce невероятно динамичны по своей природе. Они генерируют много данных и запросов, которые невозможно кэшировать. Например, страница оформления заказа уникальна для каждого пользователя и не может обслуживаться из кэша. В результате сервер должен быть достаточно надежным, чтобы обеспечить бесперебойную работу вашего сайта, даже если его посещаемость невелика. Рекомендуемые функции, на которые следует обратить внимание при выборе хостинг-плана для WooCommerce, следующие:

  • Кэширование на уровне сервера с правилами кэширования, специфичными для WooCommerce.
  • От 2 до 4 рабочих PHP для обработки некэшированных запросов WooCommerce без задержек.
  • Ограничение памяти WordPress в 128 МБ или более (256 МБ по умолчанию на Kinsta).
  • Масштабируемая инфраструктура для обработки скачков трафика и нагрузки.
  • Автоматическое ежедневное резервное копирование (предпочтительно ежечасное) для обеспечения безопасности данных вашей электронной коммерции.
  • Полностью безопасная хостинговая платформа с такими функциями безопасности, как регулярное сканирование на наличие вредоносных программ, геолокация IP-адресов и блокировка неправомерных IP-адресов, бесплатные SSL, SFTP, SSH, HTTP/2 и TLS 1.3.
  • Программное обеспечение веб-сервера Nginx или LiteSpeed.
  • Поддержка удобных для разработчиков функций: PHP 8, контейнеры LXC, WP-CLI, Git, MariaDB, Staging окружения и т.д.
  • Высокое время безотказной работы благодаря центрам обработки данных, разбросанным по всему миру. Выбирайте тот, у которого серверы расположены близко к месту нахождения вашей целевой аудитории.
  • Интеграция с Cloudflare для повышения производительности и безопасности.
  • Надежная круглосуточная служба поддержки для быстрого решения любых вопросов.
  • Отличные отзывы пользователей и звездный послужной список.

Учитывая эти требования, вы можете смело отказаться от общего хостинга. Виртуальный выделенный сервер (VPS) похож на виртуальный хостинг, только у вас есть виртуальное пространство на общем сервере, предназначенное только для вас. Если у вас строгий бюджет, вы можете начать с тарифного плана VPS среднего уровня. Однако если ваш сайт будет привлекать больше трафика, то вскоре вам придется перейти на новый тарифный план. Остаются варианты облачного хостинга и выделенного сервера. Оба варианта отлично подходят для сайтов WooCommerce, если они отвечают вашим требованиям. Цены на планы выделенного сервера выше по сравнению с планами облачного хостинга, которые могут варьироваться от ~$50/месяц до тысяч долларов в месяц. Если вы тратите значительную сумму денег на маркетинг, вы оттолкнете всех своих потенциальных клиентов, если ваш сайт будет работать медленно, поэтому стоит выбрать самый быстрый хостинг WordPress. В конечном итоге, лучше потратить несколько дополнительных долларов каждый месяц на качественный хостинг, чем потом часами выдирать волосы и удивляться, почему ваш сайт все еще имеет высокий показатель отказов.

Итоги

Для сайта электронной коммерции время — это буквально деньги. Быстрый магазин WooCommerce повышает удобство работы пользователей, SEO, доходы и рентабельность инвестиций. Хотя вам не обязательно следовать всем советам по оптимизации скорости, перечисленным в этом посте, я рекомендую вам пройтись по всем из них. Это поможет вам выявить все узкие места на вашем сайте. Никто не любит ждать, пока сайт загрузится. Давайте ускорим WooCommerce!

Полное руководство по защите от скликивания вашей рекламы (72 стр.)
This is default text for notification bar

Конкуренты скликивают рекламу?

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