Современный редактор WordPress — Gutenberg — значительно изменил подход к созданию контента. Вместо классического поста с текстом и изображениями мы теперь работаем с блоками. Однако неправильное использование блоков может замедлять сайт, увеличивать объем HTML и CSS, а также создавать избыточные запросы. В этой статье разберём, как оптимизировать работу с Gutenberg блоками для ускорения WordPress, рассмотрим полезные плагины и примеры кода.
Почему Gutenberg блоки влияют на скорость сайта
Каждый блок Gutenberg — это отдельный элемент с собственным HTML, CSS и иногда JavaScript. Чем больше блоков и чем сложнее они устроены, тем больше кода генерируется на странице. Избыточный код, особенно если он загружается на всех страницах без надобности, увеличивает время загрузки и снижает производительность.
Например, некоторые блоки подключают свои стили и скрипты на всех страницах, даже если используются только в одной. Это приводит к лишним HTTP-запросам и увеличению размера страницы. Кроме того, блоки с динамическим содержимым могут создавать дополнительные запросы к серверу в момент загрузки.
Оптимизация Gutenberg блоков заключается в уменьшении количества загружаемых ресурсов, правильной загрузке стилей и скриптов, а также в использовании только необходимых блоков для конкретного сайта.
Как оптимизировать загрузку стилей и скриптов Gutenberg блоков в WordPress
По умолчанию WordPress загружает стили и скрипты всех зарегистрированных блоков на каждой странице. Чтобы избежать этого, можно внедрить условную загрузку ресурсов, подключая их только там, где они нужны.
Пример функции для оптимизации загрузки стилей и скриптов блоков (функции имеют префикс wpspeed для уникальности):
function wpspeed_dequeue_unused_block_assets() {
if ( ! is_singular() ) {
// Отключаем стили и скрипты блоков на страницах, где не используется контент
wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
wp_dequeue_script( 'wp-block-library' );
}
}
add_action( 'wp_enqueue_scripts', 'wpspeed_dequeue_unused_block_assets', 100 );Этот код отключает стандартные стили и скрипты Gutenberg на всех страницах, кроме одиночных записей. Можно расширить логику, чтобы подключать стили только для страниц с определёнными блоками, анализируя контент.
Автоматический анализ и загрузка стилей только при наличии блока
Чтобы автоматически подключать ресурсы только при наличии блоков, можно использовать функцию has_block(). Например:
function wpspeed_enqueue_block_styles_conditionally() {
if ( is_singular() && has_block( 'core/gallery' ) ) {
wp_enqueue_style( 'core-gallery-style' );
}
}
add_action( 'wp_enqueue_scripts', 'wpspeed_enqueue_block_styles_conditionally' );Таким образом, стили для галереи будут загружаться только на страницах с блоком галереи.
Плагины для управления Gutenberg блоками и их оптимизации
Существует несколько плагинов, которые помогают оптимизировать работу с Gutenberg блоками:
- Gutenberg Manager — позволяет отключать ненужные блоки для конкретных ролей пользователей и на страницах, что снижает количество загружаемых ресурсов и упрощает редактор.
- Block Lab — позволяет создавать легковесные кастомные блоки с минимальным количеством кода, что помогает избежать «перегрузки» сайта лишними скриптами.
- Asset CleanUp — помогает управлять загрузкой CSS и JS, в том числе и для Gutenberg блоков, отключая их там, где они не нужны.
Использование подобных плагинов позволяет не только ускорить сайт, но и сделать процесс редактирования удобнее для пользователей.
Создание кастомных Gutenberg блоков с оптимальной загрузкой ресурсов
Если вы разрабатываете собственные блоки, важно минимизировать количество подключаемых скриптов и стилей и загружать их только там, где блок используется.
Пример регистрации кастомного блока с условной загрузкой скриптов (с префиксом wpspeed):
function wpspeed_register_custom_block() {
wp_register_script(
'wpspeed-custom-block-script',
get_template_directory_uri() . '/js/wpspeed-custom-block.js',
array( 'wp-blocks', 'wp-element' ),
filemtime( get_template_directory() . '/js/wpspeed-custom-block.js' ),
true
);
wp_register_style(
'wpspeed-custom-block-style',
get_template_directory_uri() . '/css/wpspeed-custom-block.css',
array(),
filemtime( get_template_directory() . '/css/wpspeed-custom-block.css' )
);
register_block_type( 'wpspeed/custom-block', array(
'editor_script' => 'wpspeed-custom-block-script',
'style' => 'wpspeed-custom-block-style',
) );
}
add_action( 'init', 'wpspeed_register_custom_block' );Скрипты и стили будут подключены только на страницах, где используется блок wpspeed/custom-block. Это снижает нагрузку на сайт и ускоряет загрузку.
Оптимизация рендеринга блоков на фронтенде
Многие блоки генерируют сложный HTML, который можно упростить. Например, вместо вложенных контейнеров можно использовать минимальный набор обёрток и CSS.
С помощью фильтра render_block можно перехватывать вывод блоков и оптимизировать HTML. Пример упрощения HTML для блока галереи:
function wpspeed_optimize_gallery_html( $block_content, $block ) {
if ( $block['blockName'] === 'core/gallery' ) {
// Пример: удаляем лишние обёртки и классы
$block_content = preg_replace( '/<div class="wp-block-gallery[^>]*>/', '<div class="wpspeed-gallery">', $block_content );
}
return $block_content;
}
add_filter( 'render_block', 'wpspeed_optimize_gallery_html', 10, 2 );Подобные приёмы помогают уменьшить размер итогового HTML и повысить скорость загрузки.
Резюме — ключевые советы по оптимизации Gutenberg блоков
- Отключайте стили и скрипты блоков на страницах, где они не используются, используя
wp_dequeue_styleиwp_dequeue_script. - Используйте
has_block()для условной загрузки ресурсов. - Применяйте плагины для управления блоками и оптимизации ассетов (например, Gutenberg Manager, Asset CleanUp).
- При разработке кастомных блоков минимизируйте подключаемые ресурсы и регистрируйте их с правильной зависимостью и версионностью.
- Оптимизируйте HTML блоков через фильтр
render_block, чтобы уменьшить лишние обёртки и классы.
Для дополнительной оптимизации можно посмотреть плагины и темы на WPSHOP.ru, где есть решения для оптимизации и улучшения производительности WordPress.