Как ускорить сайт на WordPress и WooCommerce и сделать его быстрее чем у 99% ваших конкурентов

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

Если вы внимательно прочитаете эту статью и сделаете то что тут рекомендуется, то ваш сайт будет быстрее чем у 99% ваших конкурентов.

При этом не важном на чем конкуренты делают сайты. Это может быть Java, Laravel, Ruby, Python или даже Rust. Ваш сайт на WordPress будет быстрее.

Скорость сайта зависит от умения правильно настроить все составляющие и наличия компетенций в команде. А платформа не важна.

Скорость загрузки сайта — один из ключевых факторов, влияющих на пользовательский опыт, SEO и конверсии.

Для интернет-магазинов на WordPress и WooCommerce это особенно важно, так как медленная загрузка страниц может отпугнуть клиентов.

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

Почему скорость сайта так важна?

• SEO: Google учитывает скорость загрузки как один из факторов ранжирования. Быстрые сайты получают преимущество в поисковой выдаче.
• Пользовательский опыт: 40% пользователей покидают сайт, если он загружается дольше 3 секунд.
• Конверсии: Ускорение сайта на 1 секунду может увеличить конверсии до 7% (по данным исследований).

Шаг 1: Подготовка

Важно понять что скорость сайта делится на 2 ключевые составляющие

Важно понимать 2 очень разные составляющие которые влияют на ощущение скорости сайта

• нагрузка — серверные тайминги — TTFB — как быстро отвечает сервер при разных стресс нагрузках
• рендеринг — CWVs — как быстро рендерится страница после ответа сервера

Как правило приходится работать сразу по 2м направлениям чтобы добиться высокой скорости работы и хорошего UX для посетителей.

Оцените текущую скорость сайта

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

• Google PageSpeed Insights: Оценивает скорость рендеринга и дает общие рекомендации. Похожий отчет можно собрать через утилиту Lighthouse
• Плагин SiteKit для WP который позволяет отслеживать ключевые метрики в реальном времени для любой страницы

Запишите ключевые метрики:

• запишите метрики про стресс нагрузки: TTFB или Time to First Byte, Fully Loaded Time) и определите слабые места с точки зрения стресс тестов — это может быть количество ответов за 60 секунд, а также время отклика на каждом этапе нагрузки с 1 до 100%
• запишите метрики про рендеринг CWVs — LCP, INP, CLS etc

Шаг 2: Определите узкое горлышко и варианты решений

Если ваш сайт отвечает дольше чем 100-200 мс на базовых нагрузках

У вас проблемы с хостингом и кешированием.

Качественный хостинг — основа быстрого сайта. Но также важно правильно настраивать кеширование сайта.

Если ваш сайт отвечает быстрее чем 100мс, но при этом красные CWVs

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

Шаг 3: Варианты базовых решений

Далее нам нужно выбрать варианты решений и тут опишем основные.

Плагины кеширования — самое простое

Оно же самое бесполезное.

Но вот есть топ 3 варианта

• WP Super Cache: Базовый плагин и для 99% сайтов это ок
• WP Rocket: Прост в настройке, включает кэширование страниц, сжатие файлов и оптимизацию базы данных.
• W3 Total Cache: Бесплатный, но требует больше настроек.

Настройте кэширование страниц, браузера и объектов для максимальной эффективности.

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

Минимизируйте CSS, JavaScript и HTML

Лишний код замедляет сайт.

Решения:

• Сжатие файлов: Плагины вроде Autoptimize объединяют и минимизируют CSS и JS.
• Удаление неиспользуемого CSS: Используйте Asset CleanUp для отключения ненужных стилей.
• Отложенная загрузка JavaScript: Настройте отложенное выполнение скриптов через WP Rocket или Autoptimize.

Оптимизируйте базу данных

База данных WordPress со временем разрастается, что замедляет сайт. Как исправить:

• Очистка базы данных: Используйте WP-Optimize или WP-Sweep для удаления старых ревизий, спама и временных данных.
• Индексация таблиц: Убедитесь, что таблицы базы данных оптимизированы (может потребоваться помощь разработчика).

Обновите WordPress, темы и плагины

Устаревшие версии могут содержать неэффективный код. Регулярно:

• Обновляйте WordPress до последней версии.
• Используйте легкие темы, такие как Astra или GeneratePress.
• Отключите или удалите неиспользуемые плагины, чтобы снизить нагрузку.

Специфические настройки для WooCommerce

WooCommerce добавляет дополнительную нагрузку из-за динамического контента. Оптимизируйте:

• Отключите ненужные функции: Например, отключите виджеты корзины на страницах, где они не нужны (через код или плагины).
• Кэширование AJAX-запросов: Используйте плагины, такие как WP Rocket, для кэширования корзины и фильтров.
• Оптимизация страниц товаров: Убедитесь, что страницы товаров содержат минимум скриптов и оптимизированные изображения.

Шаг 4. Расширенные варианты решений

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

Спекулятивная загрузка

Также она называется — предполагаемая загрузка. Это новое решение которое было внедрено в WordPress 6.8.

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

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

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

Пример моей настройки:

<?php

namespace App;

SpeculativeLoading::init();

/**
 * Instruction for Speculative Loading https://wpcraft.ru/blog/speculative-loading/
 */
class SpeculativeLoading
{
    public static function init()
    {
        add_filter('wp_speculation_rules_href_exclude_paths', [__CLASS__, 'exclude']);

        add_filter('wp_speculation_rules_configuration', function ($config) {
            $config = [
                'mode' => 'prefetch',
                'eagerness' => 'eager',
            ];

            return $config;
        });

    }

    public static function exclude($href_exclude_paths)
    {
        $href_exclude_paths[] = '/cart/*';
        $href_exclude_paths[] = '/checkout/*';
        $href_exclude_paths[] = '/my/*';
        $href_exclude_paths[] = '/wp-admin/*';
        $href_exclude_paths[] = '/wp-login.php';

        return $href_exclude_paths;
    }
}

Edge Cache или кеш страниц Fast CGI

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

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

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

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

SSR & CSR

Также важно понимать и разделять разные типы рендеринга — что мы рендерим на клиенте? а что на сервере?

Это модная тема в мире JAMStack про ReactJS & VueJS. Но в мире WP она известна вот уже 20 лет ) Просто до сих пор мало кто это понимает.

Но если это понять и применять — то скорость сайта также может быть выше чем у ваших конкурентов.

Тут бывает 2 разных сценария:

• рендер 99% публичных страниц на сервере и на клиенте 1% приватного контента
• рендер 100% страниц на сервере без приватных данных и весь приватный контент на клиенте

Обе стратегии возможны, но цена разработки разная.

Разделяем приватные и публичные страницы

Когда мы поняли что такое Edge Cache и настроили его, а также разделили SSR & CSR, то далее нам нужно разделить страницы с учетом кеш заголовка Cache-Control.

Для публичных страниц надо указать ключ public и смелое число дней кеширования.

Для приватных страниц должен быть ключ private

<?php

namespace App\DisableAuthUserForSomePages;

add_action('init', function () {

    if (is_admin()) {
        return;
    }

    add_action('wp', __NAMESPACE__.'\\unset_user', 111);

});

function unset_user()
{
    global $wp;

    if (! is_user_logged_in()) {
        return;
    }

    if (isset($wp->query_vars['rest_route'])) {
        return;
    }

    if (if_url_starts_with(['my', 'checkout', 'cart', 'test', 'lms'])) {
        return;
    }

    wp_set_current_user(0);

    header('Cache-Control: public, max-age='.(33 * DAY_IN_SECONDS));

}

function if_url_starts_with($words)
{
    global $wp;

    foreach ($words as $word) {
        if (strpos($wp->request, $word) === 0) {
            return true;
        }
    }

    return false;
}

Таким образом 99% страниц сайта будут работать с учетом Edge Cache и отдаваться очень быстро. Без нагрузки на сервисы БД и PHP.

А там где нужны приватные данные — страницы будут генерироваться каждый раз или через CSR + REST PHP.

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

Шаг 5. Декомпозиция на сервисы через Strangler паттерн

Пройдя шаг 4, вы заметите что сайт в целом стал очень быстрым в 90% сценариев.

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

Самый простой пример — это поиск. Особенно фасетный поиск, или автокомплит если у вас большой ассортимент позиций в каталоге.

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

Варианты тут обычно такие:

• Алголия как облачное решение
• self hosted решения типа Мантикоры, Эластика или Тайпсенса

Реализовав поиск как отдельный сервис — можно добиться высокой скорости автокомплита или работы фасетного поиска в каталоге. При этом у вас может быть 1 млн или 10 млн товаров. Тут все зависит от выбора платформы для сервиса и прямоты рук.

Другие узкие горлышки решаются примерно также. Но все зависит от контекста.

Мониторинг и тестирование

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

Заключение

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

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

Если честно — это правило играет для любых сайтов даже с учетом самых модных платформ типа NextJS или NuxtJS. Просто не все это понимают )

Если все сделать правильно то сайт будет работать одинаково быстро на любой платформе — будь то WordPress, Laravel, NextJS или RemixJS.