Как сэкономить LCP на куках: пишем микроплагин для WordPress

Типичный плагин согласия на cookies под WordPress — это монстр, который весит под сотню килобайт, требует jQuery и портит Core Web Vitals. Владельцы сайтов ставят такие решения ради одной строчки текста, а потом годами удивляются просадкам LCP. Рассказываем, как мы решили эту проблему с помощью Vanilla JS и написали микроплагин весом всего 5 КБ.

Почему готовые плагины убивают скорость страниц

Казалось бы, что сложного в выводе плашки с кнопкой «ОК»? Но если открыть вкладку Network в консоли разработчика на типичном сайте с WordPress, картина пугает. Популярные плагины согласия загружают тяжелые библиотеки скриптов, сторонние шрифты или иконки.

Главная беда кроется во взаимодействии с кэшированием. Чтобы плашка не «мигала» при переходе между кэшированными страницами, разработчики часто используют динамические AJAX-запросы. Каждый такой запрос — это полноценный запуск ядра WordPress на сервере, который нагружает хостинг и затягивает загрузку на сотни миллисекунд.

Другие плагины просто отключают кэширование страниц для пользователей без согласия. Для SEO это катастрофа. Если поисковый бот или обычный посетитель зайдет на такую страницу, сервер будет генерировать ее с нуля.

Архитектура на диете

Мы решили сделать инструмент, который решит задачу соответствия закону 152-ФЗ, но не украдет ни одной миллисекунды у PageSpeed. Мы выделили три принципа для разработки.

• Нуль зависимостей. Никакого jQuery, внешних шрифтов или CSS-фреймворков. Только чистый Vanilla JS и стили на чистом CSS.
• Клиентская логика. Никаких AJAX-запросов и проверок на стороне сервера. Вся логика проверки куки и скрытия баннера работает исключительно в браузере.
• Нативный WordPress. Никаких собственных таблиц в базе данных или громоздких страниц настроек. Плагин берет ссылку на страницу политики конфиденциальности прямо из стандартной опции движка.

Разбираем код

Наш плагин получил название «Крошка моя» (NoCrumbs Cookie Notice). Посмотрим на ключевые фрагменты его кода, чтобы понять, за счет чего достигается экономия ресурсов.

В серверной части мы отказались от сложных панелей управления. Ссылка на документ приватности запрашивается одной строкой из стандартных настроек приватности WordPress.

// Получаем ID страницы "Политика конфиденциальности"
$privacy_page_id = get_option( 'wp_page_for_privacy_policy' );
$privacy_link    = '';

if ( ! empty( $privacy_page_id ) ) {
    $privacy_url = get_permalink( $privacy_page_id );
    if ( $privacy_url ) {
        $privacy_link = sprintf(
            ' <a href="%s" class="nc-privacy-link">%s</a>',
            esc_url( $privacy_url ),
            esc_html__( 'Политика конфиденциальности', 'nocrumbs-cookie-notice' )
        );
    }
}

Фронтенд-скрипт написан на чистом Vanilla JS и обернут в самовызывающуюся функцию. Мы проверяем куки согласия с помощью эффективной и короткой конструкции.

function hasCookie(name, value) {
    return document.cookie.split('; ').some(function(c) {
        return c === name + '=' + value;
    });
}

Если куки nc_accepted найдена, скрипт мгновенно удаляет невидимый баннер из DOM-дерева еще до того, как браузер потратит ресурсы на отрисовку его стилей.

if (hasCookie('nc_accepted', '1')) {
    if (banner.parentNode) {
        banner.parentNode.removeChild(banner);
    }
    return;
}

Когда пользователь нажимает кнопку согласия, мы вешаем обработчик события transitionend. Это позволяет полностью вырезать элемент из DOM-дерева сразу после завершения анимации исчезновения. Такое решение экономит оперативную память мобильных устройств и гарантирует, что невидимые элементы не будут мешать экранным дикторам.

function removeBanner() {
    if (banner && banner.parentNode) {
        banner.parentNode.removeChild(banner);
    }
    banner.removeEventListener('transitionend', removeBanner);
}
banner.addEventListener('transitionend', removeBanner);

Результаты оптимизации

Мы протестировали плагин на типовом блоге с включенным плагином LiteSpeed Cache for WordPress (LSCWP). Результаты сравнения с популярным плагином из репозитория представлены ниже.

Что делать дальше

Мы опубликовали плагин в официальном каталоге WordPress под именем NoCrumbs Cookie Notice. Вы можете установить его прямо из панели управления вашим сайтом. Код полностью открыт (GPLv2) и лежит в репозитории на GitHub.

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

Если плагин сэкономил вам миллисекунды и помог сайту с PageSpeed — поддержите проект. Поставьте звезду на GitHub или оставьте отзыв в каталоге WordPress. Нам это очень поможет.