Как удалить CSS стили от Gutenberg блоков в WordPress для оптимизации загрузки

Автор: Владимир Фомин | Опубликовано: 19.03.2026

Современные темы и редактор Gutenberg в WordPress автоматически подключают стили для блоков, что зачастую приводит к увеличению размера CSS и замедлению загрузки страниц. Особенно это заметно, если вы используете кастомные стили или динамические скины, как те, что можно создавать с помощью WPSkin. В этой статье мы разберём, как эффективно удалить или отключить ненужные CSS стили от Gutenberg блоков, чтобы ускорить сайт и снизить нагрузку на браузер.

Почему важно удалять CSS стили Gutenberg блоков

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

Удаление лишних стилей поможет:

Сократить объём загружаемых файлов.
Ускорить отображение и взаимодействие с сайтом.
Повысить рейтинг Core Web Vitals и SEO.

Особенно это актуально, если вы интегрируете динамические скины или используете плагин Clearfy Pro, который помогает удалять неиспользуемые CSS и JS.

Как отключить встроенные стили Gutenberg блоков программно

Для начала рассмотрим, как отключить стили Gutenberg через functions.php вашей темы или в кастомном плагине. Это базовое решение, которое отключит все стили блоков.

function wpskins_disable_gutenberg_block_css() {
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
    wp_dequeue_style('wc-block-style'); // стили WooCommerce, если есть
}
add_action('wp_enqueue_scripts', 'wpskins_disable_gutenberg_block_css', 100);

Этот код отключит основные стили Gutenberg и WooCommerce блоков. Однако стоит понимать, что некоторые блоки могут потерять оформление, если вы полностью отключите стили.

Выборочное отключение CSS блоков

Если вы хотите оставить стили для некоторых блоков, например для core/button, а остальные отключить, можно использовать условную логику. Например, отключать стили только на определённых страницах или типах записей.

function wpskins_conditional_gutenberg_css() {
    if (!is_page('contact')) { // отключаем на всех страницах, кроме контактной
        wp_dequeue_style('wp-block-library');
    }
}
add_action('wp_enqueue_scripts', 'wpskins_conditional_gutenberg_css', 100);

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

Удаление CSS Gutenberg с помощью плагинов и инструментов оптимизации

Для новичков или тех, кто хочет получить больше контроля без кода, отлично подойдут плагины:

Clearfy Pro — позволяет удалить лишние стили и скрипты, включая CSS Gutenberg, а также оптимизировать загрузку плагинов.
Asset Cleanup — плагин для выборочного отключения CSS и JS на страницах.
Perfmatters — облегчённый плагин для оптимизации, с возможностью отключать Gutenberg CSS.

Использование Clearfy Pro из официального магазина WPSHOP особенно удобно, так как в нём уже реализованы инструменты для работы с CSS от блоков и другими ресурсами.

Как проверить, какие стили загружаются и как их оптимизировать

Для анализа загружаемых CSS используйте инструменты браузера:

В Chrome откройте DevTools — вкладка Network — фильтр CSS.
Вкладка Coverage (Покрытие) — показывает, какие CSS используются, а какие — нет.

Для более точного анализа можно воспользоваться плагинами вроде WP Asset CleanUp или Query Monitor.

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

Пример отключения критического CSS Gutenberg блоков на странице

function wpskins_remove_gutenberg_css_on_home() {
    if (is_front_page()) {
        wp_dequeue_style('wp-block-library');
        wp_dequeue_style('wp-block-library-theme');
    }
}
add_action('wp_enqueue_scripts', 'wpskins_remove_gutenberg_css_on_home', 100);

Это уменьшит размер загружаемых файлов на главной странице, улучшая скорость.

Рекомендации по созданию собственных стилей для Gutenberg блоков

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

Создайте файл CSS, например custom-block-styles.css, и подключите его:

function wpskins_enqueue_custom_block_styles() {
    wp_enqueue_style('wpskins-custom-blocks', get_stylesheet_directory_uri() . '/css/custom-block-styles.css', array(), '1.0');
}
add_action('wp_enqueue_scripts', 'wpskins_enqueue_custom_block_styles');

Внутри файла опишите стили для нужных блоков, например:

.wp-block-button a {
    background-color: #0073aa;
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
}

Так вы полностью контролируете внешний вид и не загружаете лишние стили.

Поддержка динамических скинов и стилей

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

function wpskins_enqueue_skin_styles() {
    $current_skin = get_option('wpskins_current_skin');
    if ($current_skin) {
        wp_enqueue_style('wpskins-skin-style', get_stylesheet_directory_uri() . "/skins/{$current_skin}.css", array(), '1.0');
    }
}
add_action('wp_enqueue_scripts', 'wpskins_enqueue_skin_styles');

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

Итоговые советы для оптимизации CSS Gutenberg блоков

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

Используйте эти методы, чтобы сделать ваш WordPress-сайт на wpskins.ru быстрее и удобнее для пользователей.