Как создать блок Gutenberg с поддержкой отложенной загрузки в WordPress

Отложенная загрузка (lazy loading) — важная техника оптимизации, которая позволяет загружать контент или скрипты блока Gutenberg только тогда, когда они действительно нужны пользователю. Это существенно снижает время первоначальной загрузки страницы и улучшает пользовательский опыт. В этой статье разберём, как создать собственный динамический блок Gutenberg с поддержкой отложенной загрузки скриптов и стилей в WordPress.

Почему отложенная загрузка важна для Gutenberg блоков

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

Отложенная загрузка позволяет:

• Загрузить ресурсы блока только при прокрутке до него.
• Снизить нагрузку на сервер и клиент.
• Улучшить Core Web Vitals и показатели SEO.

Реализовать это можно через динамическое подключение скриптов на фронтенде и использование React Suspense или JavaScript события Intersection Observer.

Регистрация Gutenberg блока с отложенной загрузкой скриптов

Для начала создадим базовую структуру плагина и зарегистрируем блок с динамическим рендерингом на PHP:

function wpblock_register_lazy_block() {
    // Регистрируем скрипт блока, но не подключаем сразу
    wp_register_script(
        'wpblock-lazy-block-script',
        plugins_url('block.build.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(plugin_dir_path(__FILE__) . 'block.build.js'),
        true
    );

    // Регистрируем стили блока
    wp_register_style(
        'wpblock-lazy-block-style',
        plugins_url('style.css', __FILE__),
        array(),
        filemtime(plugin_dir_path(__FILE__) . 'style.css')
    );

    register_block_type('wpblock/lazy-block', array(
        'render_callback' => 'wpblock_render_lazy_block'
    ));
}
add_action('init', 'wpblock_register_lazy_block');

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

Рендеринг блока с плейсхолдером и подключением скрипта

В функции обратного вызова wpblock_render_lazy_block выводим HTML-разметку блока и вставляем скрипт, который будет отслеживать появление блока на экране:

function wpblock_render_lazy_block($attributes) {
    $html = '<div class="wpblock-lazy-block" id="wpblock-lazy-block">';
    $html .= '<noscript>Пожалуйста, включите JavaScript для отображения контента блока.</noscript>';
    $html .= '<div class="wpblock-placeholder">Загрузка контента...</div>';
    $html .= '</div>';

    // Подключаем скрипт для отложенной загрузки
    wp_enqueue_script('wpblock-lazy-block-script');
    wp_enqueue_style('wpblock-lazy-block-style');

    return $html;
}

Однако чтобы скрипт загружался только при необходимости, используем JavaScript с Intersection Observer. Для этого в файле block.build.js напишем:

JavaScript для отложенной загрузки контента блока

В block.build.js реализуем логику динамической загрузки контента только при появлении блока в viewport:

document.addEventListener('DOMContentLoaded', function() {
    var lazyBlock = document.getElementById('wpblock-lazy-block');
    if (!lazyBlock) return;

    var observer = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                // Загружаем динамический контент
                loadWpblockLazyContent(lazyBlock);
                observer.unobserve(lazyBlock);
            }
        });
    }, { rootMargin: '0px', threshold: 0.1 });

    observer.observe(lazyBlock);
});

function loadWpblockLazyContent(container) {
    // Пример динамической подгрузки — можно заменить на AJAX или React компонент
    container.innerHTML = '<div class="wpblock-loaded-content">Динамический контент загружен!</div>';
}

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

Расширение: загрузка данных через AJAX при отложенной загрузке

Для более сложных случаев можно подгружать данные с сервера через AJAX при появлении блока. Добавим пример на PHP и JavaScript.

PHP: Обработчик AJAX-запроса

add_action('wp_ajax_wpblock_lazy_load', 'wpblock_lazy_load_callback');
add_action('wp_ajax_nopriv_wpblock_lazy_load', 'wpblock_lazy_load_callback');

function wpblock_lazy_load_callback() {
    // Здесь можно получить данные из базы или API
    $data = array(
        'content' => '<p>Динамически загруженный контент через AJAX</p>'
    );
    wp_send_json_success($data);
}

JavaScript: вызов AJAX при появлении блока

function loadWpblockLazyContent(container) {
    fetch(ajaxurl + '?action=wpblock_lazy_load')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                container.innerHTML = data.data.content;
            } else {
                container.innerHTML = '<p>Ошибка загрузки контента</p>';
            }
        })
        .catch(() => {
            container.innerHTML = '<p>Ошибка сети</p>';
        });
}

Не забудьте локализовать скрипт, чтобы в JavaScript была доступна переменная ajaxurl:

wp_localize_script('wpblock-lazy-block-script', 'ajaxurl', admin_url('admin-ajax.php'));

Советы по оптимизации и безопасности

• Проверяйте права и nonce для AJAX-запросов, если данные чувствительные.
• Используйте wp_register_script и wp_enqueue_script корректно, чтобы не загружать скрипты лишний раз.
• Кэшируйте результаты AJAX, если данные редко меняются, для снижения нагрузки.
• Проверяйте совместимость вашего блока с плагинами кэширования и оптимизации, такими как Clearfy Pro (https://wpshop.ru/plugins/clearfy-pro/).

Заключение

Отложенная загрузка Gutenberg блоков — эффективный способ ускорить сайт и улучшить UX, особенно для динамического и тяжёлого контента. С помощью Intersection Observer и AJAX можно реализовать гибкую и производительную загрузку. Попробуйте внедрить этот подход в свои проекты, чтобы повысить качество и скорость ваших WordPress сайтов.