Медленные магазины WooCommerce могут стоить вам денег по-разному: от увеличения числа брошенных корзин до потери лояльности клиентов. По данным Unbounce, почти 70% потребителей говорят, что скорость страницы влияет на их желание покупать в интернет-магазине. Проблема здесь в том, что скорость зависит от множества факторов, и ее улучшение может потребовать много времени и усилий.
По данным Portent, коэффициент конверсии веб-сайта снижается в среднем на 4,42% за каждую секунду, которую страница загружается в течение первых 5 секунд, при этом страницы со временем загрузки от 0 до 2 секунд имеют самые высокие показатели конверсии в электронной коммерции.
Если скорость загрузки вашего сайта превышает 2-3 секунды, эта статья — то, что вам нужно. Здесь вы найдете несколько проверенных советов по измерению и улучшению производительности сайта электронной коммерции.
Почему важна скорость?
Скорость веб-сайта является критически важным элементом для успеха любого онлайн-проекта, включая магазины WooCommerce, по нескольким причинам:
Пользовательский опыт:
У интернет-пользователей обычно короткий период концентрации внимания. Медленное время загрузки может привести к тому, что посетители покинут ваш сайт еще до его полной загрузки. Быстрый веб-сайт, наоборот, облегчает навигацию, побуждая пользователей просматривать больше страниц и оставаться дольше.
SEO и ранжирование:
Скорость страницы — один из важнейших факторов ранжирования для Google. Метрики, такие как Largest Contentful Paint (LCP), First Input Delay (FID) и Cumulative Layout Shift (CLS), являются частью факторов ранжирования Google. У более быстрых веб-сайтов больше шансов занять более высокие позиции в поисковых системах. С ростом мобильного поиска скорость мобильной страницы также значительно влияет на SEO.
Экономическая эффективность:
Оптимизированные, более быстрые веб-сайты обычно потребляют меньше пропускной способности и могут привести к снижению затрат на хостинг. Более быстрые сайты также требуют меньше времени и усилий на обслуживание.
Мобильные пользователи:
С увеличением числа пользователей, получающих доступ к сайтам через мобильные устройства, где скорость соединения может быть ниже, оптимизированная скорость веб-сайта становится еще более важной. Медленная загрузка может быть еще более проблематичной на мобильных устройствах и приводить к более высоким показателям отказов.
Глобальный охват:
Пользователи из разных регионов с разной скоростью интернета могут иметь одинаковый опыт, если ваш сайт оптимизирован по скорости. Более быстрые веб-сайты полезны, если вы нацелены на глобальную аудиторию и используете сеть доставки контента (CDN) для предоставления локализованного контента.
Как оценить текущую скорость магазина?
Прежде чем начать процесс улучшения, вам необходимо определить, где вы находитесь сейчас, и выяснить текущую скорость магазина и какие проблемы могут замедлять ваш сайт. Вот некоторые методы и инструменты, которые вы можете использовать для оценки скорости вашего сайта WooCommerce:
Инструменты прямого тестирования
Эти инструменты напрямую проверяют производительность вашего веб-сайта, загружая его из разных мест по всему миру, симулируя различные устройства и скорости соединения:
- Google PageSpeed Insights: Предоставляет информацию о скорости как для мобильных, так и для настольных устройств. Также дает рекомендации по оптимизации WooCommerce.
- GTmetrix: Выполняет детальный анализ, включая диаграмму водопада, рекомендации и различные оценки.
- WebPageTest: Предоставляет подробную информацию, такую как индекс скорости, время до первого байта и многое другое.
Инструменты разработчика в браузере
Эти решения, встроенные в современные браузеры, позволяют разработчикам проверять, отлаживать и профилировать веб-сайты:
- Chrome DevTools: Используйте вкладки Network и Performance для анализа скорости сайта.
- Firefox Developer Tools: Эти инструменты позволяют разработчикам проверять, отлаживать и профилировать веб-страницы, помогая им понять поведение и структуру веб-сайтов.
Инструменты на стороне сервера
Эти инструменты могут помочь выявить проблемы на стороне сервера, которые могут быть не очевидны при тестировании на стороне клиента:
- New Relic: Обеспечивает глубокое погружение в производительность сервера, хорошо подходит для выявления узких мест на бэкенде.
- Анализ логов: Анализируйте логи сервера для выявления проблем.
Проверки на основе плагинов
Плагины могут предложить удобный и мощный способ мониторинга различных аспектов производительности вашего магазина WooCommerce непосредственно из вашей админ-панели WordPress. Вот некоторые популярные подходы на основе плагинов:
- Query Monitor: Плагин для WordPress для проверки, какие запросы замедляют ваш сайт.
- WP Debugging: Включает функции отладки WordPress для проверки на наличие проблем.
Мониторинг реальных пользователей
Мониторинг реальных пользователей (RUM) — это подход к мониторингу производительности, который фиксирует и анализирует каждую транзакцию пользователей веб-сайта или приложения. В отличие от методов синтетического мониторинга, которые симулируют поведение пользователя, RUM собирает данные о реальных взаимодействиях пользователей с вашим сайтом.
Обычно вы добавляете небольшой фрагмент кода JavaScript на свой веб-сайт, который собирает и отправляет данные о производительности на сервер для анализа. Так работает большинство инструментов RUM, хотя конкретные детали реализации могут варьироваться. Среди полезных инструментов для RUM — New Relic Browser, Boomerang, Akamai mPulse и другие.
14 способов повысить скорость магазина WooCommerce
Теперь, когда вы знаете текущую скорость загрузки и какие проблемы существуют, вы можете разработать стратегию оптимизации. Имейте в виду, что вам, вероятно, потребуется исправить несколько аспектов веб-сайта, чтобы достичь высокой скорости магазина WooCommerce. Кроме того, вам нужно будет периодически контролировать скорость, так как со временем она может замедлиться. Вот несколько советов о том, как вы можете повысить производительность вашего сайта:
Найдите надежный хостинг
В то время как неправильный выбор может привести к недовольным клиентам и потере бизнеса, идеальный веб-хостинг для WooCommerce может гарантировать безупречную производительность, быстрое время загрузки и постоянную доступность.
Каждый тип хостинга может предоставляться в рамках различных планов с разными ценовыми категориями. Поэтому, ища хостинг-провайдера в вашем ценовом диапазоне, учитывайте такие функции, как кэширование на стороне сервера, достаточная пропускная способность и ОЗУ для потребностей вашего сайта, высокопроизводительное хранилище SSD и обновленное программное обеспечение, такое как PHP и MySQL.
Если у вас есть план общего хостинга, это означает, что сотни веб-сайтов используют один и тот же сервер и его ресурсы. Выберите хост, который ограничивает количество веб-сайтов, разрешенных на каждом сервере, или подумайте об обновлении до VPS или выделенного плана.
Оптимизируйте настройки производительности
Сначала измените URL-адрес вашей страницы входа. URL-адрес входа обычно является стандартным и известен всем, включая хакеров, что делает веб-сайты уязвимыми для атак.
Вы можете избежать атак методом перебора от злоумышленников, изменив URL-адрес входа на что-то уникальное. Вы также можете использовать это для предотвращения проблем с ограничением скорости HTTP.
Если на вашем сайте электронной коммерции также есть блог, ограничьте количество записей, отображаемых в ленте вашего блога. Если вы ведете популярный блог, экономия производительности суммируется. Эти изменения можно внести в настройках чтения в панели управления WordPress.
Скриншот сделан на официальном сайте WordPress
Затем отключите пингбэки на вашем сайте. Обычно они создают спам. WordPress также предоставляет вам возможность разделять большие комментарии пользователей на более мелкие части, если у вас много комментариев от пользователей к вашим статьям или страницам. Чтобы сократить время загрузки страницы вашего продукта, поддерживайте это значение между 10 и 20.
Пересмотрите использование плагинов и расширений
Существует множество плагинов для WooCommerce, которые обеспечивают безграничную универсальность. Однако это не означает, что вы должны устанавливать каждый из них.
Многочисленные плагины увеличивают количество файлов Javascript или CSS на вашем веб-сайте, что приводит к большему количеству HTTP-запросов к вашему серверу, замедляя работу вашего бизнеса. Кроме того, большее количество плагинов означает использование большего количества ресурсов сервера, что замедляет время загрузки.
Неважно, сколько плагинов вы используете; важен их качество. Выбирайте плагины, которые могут выполнять несколько задач, читайте отзывы, чтобы узнать о производительности, убедитесь, что они часто обновляются, и устанавливайте опции из надежных источников.
Выберите быструю тему для электронной коммерции
Довольно часто, выбирая тему для электронной коммерции, веб-дизайнеры отдают предпочтение эстетике, не учитывая, как быстро загружаются страницы. В результате внешний вид фронтенда часто имеет приоритет над скоростью загрузки страницы.
Чтобы оптимизировать время загрузки, выберите тему WooCommerce, которая является легкой и оптимизированной для производительности. Убедитесь, что тема адаптивна и имеет чистый код.
Также имейте в виду, что многие темы позволяют отключать элементы, которые вы не используете. Чтобы определить, быстро ли загружается тема, попробуйте использовать инструменты скорости для тестирования демо-страниц или просмотрите отзывы, оставленные пользователями.
Сжимайте изображения
Очень важно уменьшать размер изображений перед их загрузкой на ваш сайт, так как использование больших изображений значительно замедлит скорость загрузки страниц. Чтобы масштабировать изображения до нужного размера для вашего сайта, используйте программное обеспечение, такое как Photoshop, GIMP или Figma.
Размер файлов ваших фотографий можно уменьшить без потери качества путем сжатия. Выберите подходящий формат; если у вашего изображения нет прозрачного фона, изображения JPEG, которые меньше по размеру, обычно лучше всего подходят для загрузки. Учитывайте размер: загрузка изображения размером 2000 пикселей не поместится в место шириной всего 500 пикселей. Сжимайте изображение после его обработки: компрессоры изображений уменьшают размер файла, удаляя все лишние данные и метаданные.
Внедрите отложенную загрузку
Функция, известная как отложенная загрузка, предотвращает загрузку изображений до тех пор, пока посетитель сайта не прокрутит страницу до места их появления. В результате вашим клиентам не придется ждать, пока загрузится медиа, чтобы увидеть ваш контент. Если на вашем сайте много изображений, эта стратегия может значительно сократить время загрузки магазина.
Вы можете установить отложенную загрузку в своем магазине WooCommerce, используя плагины WordPress. Плагины сокращают время, необходимое для первоначального открытия вашего сайта.
Доставляйте статические ресурсы через CDN
Сеть доставки контента (CDN) — это сеть серверов, стратегически расположенных по всему миру. Эти серверные площадки называются точками присутствия (PoP). Основная задача CDN — кэширование и доставка статических ресурсов, таких как изображения, JavaScript, CSS и т. д.
Даже если ваш сайт размещен на очень быстром сервере, его местоположение все равно будет иметь значение. Задержка в сети и время до первого байта (TTFB) уменьшаются благодаря CDN, что сокращает расстояние между каждым пользователем и ресурсами сайта.
Он автоматически выбирает ближайшую точку присутствия CDN для предоставления кэшированных ресурсов в зависимости от источника запроса. Многие CDN предлагают дополнительные возможности для повышения производительности помимо кэширования, такие как улучшенное сжатие изображений на лету, поддержка HTTP/3, предотвращение хотлинкинга и повышенная безопасность.
Устраните неиспользуемые скрипты и таблицы стилей
Большинство плагинов и тем WordPress загружают скрипты и таблицы стилей на каждой странице вашего сайта. Даже когда они не нужны на странице, они все равно загружают эти элементы.
Удаляя эти ненужные элементы с веб-сайтов, вы можете уменьшить раздувание страниц и ускорить загрузку страниц WooCommerce, что может сэкономить вам время на настройку новых сайтов и назначение персонала. WooCommerce уязвим к этой проблеме, как и его расширения.
Посмотрите на диаграмму водопада в результатах теста скорости вашего сайта, чтобы определить, что нужно удалить.
Чтобы избавиться от ненужных скриптов и стилей, используйте wp_dequeue_script и wp_dequeue_style. Asset CleanUp: Page Speed Booster — один из плагинов, который позволяет легко достичь той же цели.
Скриншот сделан на официальном сайте WordPress
Обратитесь к кэшированию
Кэширование — это временное хранение ресурсов из одного запроса, чтобы будущие запросы могли быть обработаны быстро. Кэш может храниться как на сервере, так и на устройстве пользователя.
Когда пользователь делает запрос на веб-сайт, DNS-сервер получает веб-страницу с хостинг-сервера, а приложение на веб-сервере запускает скрипты, ищет в базе данных и создает веб-страницу, которая затем отображается пользователю браузером. Сервер испытывает огромную нагрузку, когда тысячи посетителей делают несколько запросов одновременно, что приводит к медленной загрузке страницы.
В этой ситуации на помощь приходит кэширование. Оно уменьшает усилия, необходимые для создания просмотра страницы, снижая зависимость WordPress от PHP и базы данных. WordPress работает почти так же быстро, как статические веб-страницы, если не точно так же.
Кэширование на стороне сервера и кэширование в браузере — две основные категории веб-кэширования, каждая из которых имеет множество подкатегорий.
Ограничьте ревизии
WooCommerce предоставляет стандартную проверку ревизий на страницах продуктов, которая позволяет вам вернуться и посмотреть изменения, внесенные на страницах. Хотя изменения могут показаться полезными, они иногда могут вызывать проблемы с производительностью WooCommerce.
Например, предположим, вы создаете страницу и редактируете ее несколько раз, добавляя или удаляя по одному элементу каждый раз. У вас столько же дубликатов вашей исходной страницы, сколько вы внесли изменений, даже если изменение незначительно. Производительность WooCommerce может в конечном итоге пострадать от этого и постепенно ухудшаться.
Вам необходимо внести определенные изменения в файл wp-config.php в корневом каталоге сайта, чтобы ограничить/отключить ревизии.
Очистите базу данных
Каждый раз, когда пользователь заходит на ваш сайт, он запрашивает его содержимое, которое в основном статично. Однако, когда он размещает заказ, он делает динамический запрос.
Если база данных вашего магазина не оптимизирована, обработка этих запросов может занять слишком много времени. Медленное время ответа сервера в конечном итоге приводит к медленной работе сайта. В результате вы должны устранить ненужный мусор, чтобы очистить и оптимизировать базу данных.
Существует несколько подходов к оптимизации базы данных:
- Избавьтесь от старых ревизий. Страницы, статьи и товары вашего магазина WooCommerce будут загружены устаревшими изменениями, если он существует уже давно. Пора их почистить. Самый простой способ — использовать плагины, такие как WP-Sweep или WP Rocket.
- Удалите истекающие транзиенты. Неисправный временный кэш иногда создает более миллиона бесполезных записей без видимого конца. Со временем сеансы клиентов могут накапливаться, добавляя тысячи дополнительных записей в таблицы вашей базы данных. Раздутая база данных может в таких обстоятельствах обрушить ваш сайт. Все истекшие транзиенты можно легко удалить с помощью бесплатного плагина Delete Expired Transients.
Скриншот сделан на официальном сайте WordPress
- Очистите таблицы вашей базы данных. Все, что необходимо для работы вашего бизнеса в сфере электронной коммерции, хранится в вашей базе данных WooCommerce. Ваша база данных становится неэффективной и в конечном итоге хранит много неважных данных, когда данные добавляются и перемещаются по таблицам. Очистка таблиц вашей базы данных жизненно важна для удаления этой лишней информации.
- Отключите функции, которые не являются критически важными, но нагружают базу данных. Темы и плагины для WooCommerce имеют много умных функций, которые сначала кажутся отличными, но в конечном итоге разрушают базу данных. Одним из примеров являются плагины для сжатия изображений, которые сжимают изображения на том же сервере, на котором размещен сайт. Также следует избегать плагинов, которые добавляют на ваш сайт счетчики, такие как просмотры, комментарии и т. д.
Выполните мобильную оптимизацию
По данным Oberlo, 60% покупателей говорят, что возможность совершать покупки с мобильного устройства является важным критерием при выборе бренда. Следовательно, мобильная оптимизация абсолютно необходима.
Использование адаптивной темы — самый простой подход к адаптации вашего сайта WordPress для мобильных устройств. Держите страницы вашего магазина как можно более простыми, потому что мобильные пользователи не любят бесконечную прокрутку. Не перегружайте их информацией.
Если в вашем бизнесе много товаров, упростите мобильным клиентам их поиск, предоставив живые фильтры товаров. Рассмотрите возможность установки плагина WooCommerce Product Search.
Используйте инструмент Lighthouse от Chrome или инструмент Mobile-Friendly Test от Google, чтобы проверить, соответствует ли ваш сайт необходимым рекомендациям по мобильной юзабилити.
Минимизируйте перенаправления
Сервер записывает каждый клик по ссылке на страницу вашего магазина как перенаправление. По сути, сервер должен направить пользователей на нужную страницу. Хотя это занимает всего несколько секунд, клиенты могут воспринимать это как долгое время, что напрямую влияет на показатель отказов вашего магазина.
Если на вашем сайте много перенаправлений, вы расходуете ресурсы сервера и увеличиваете время, необходимое для достижения конечной страницы. В результате сокращение перенаправлений приведет к заметному увеличению времени загрузки страницы, поскольку это проверенный подход к оптимизации WooCommerce.
Обновите вашу версию PHP и увеличьте лимит памяти
Каждое обновление PHP быстрее предыдущих версий. Ваш хост определяет используемую вами версию PHP, и вы часто можете изменить ее в панели управления хостингом. Однако конкретная процедура может варьироваться в зависимости от вашего провайдера. В качестве альтернативы вы можете просто попросить службу поддержки сделать это за вас. Перед обновлением версии PHP создайте полную резервную копию сайта, а затем протестируйте все, чтобы убедиться, что все работает правильно.
Ваша хостинговая компания выделила определенный объем памяти для вашего сайта. Однако вы можете превысить этот лимит в зависимости от вашего конкретного сайта. Вы всегда можете связаться с вашей хостинговой компанией, если ваша панель управления хостингом не позволяет вам изменить лимит. PHP по умолчанию получает от WordPress 32 МБ памяти. Он автоматически попытается увеличить этот лимит до 40 МБ или 64 МБ, если столкнется с какими-либо проблемами. Этот лимит часто будет недостаточен для сайта WooCommerce. Рекомендуется увеличить этот лимит до 256 МБ.
Заключение
С помощью приведенных выше методов вы можете значительно улучшить скорость вашего магазина WooCommerce, охватывая весь спектр от базовых настроек до продвинутых решений на стороне сервера. Эти методы предназначены для улучшения скорости вашего сайта и должны стать частью постоянной стратегии не только по улучшению, но и по поддержанию производительности сайта.
В конечном счете, оптимизация скорости — это не разовая задача, а постоянное обязательство. Регулярный мониторинг скорости вашего сайта с использованием различных инструментов и методов, обсуждаемых в статье, может предоставить ценную информацию о том, насколько хорошо работают ваши усилия по оптимизации WooCommerce.
