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

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

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

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

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

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

• Загружать контент только когда он становится видимым для пользователя (например, при прокрутке).
• Снижать использование памяти и процессорного времени на клиенте.
• Улучшать показатели Core Web Vitals и SEO.

Реализовать lazy load можно несколькими способами, в том числе с использованием Intersection Observer API, который поддерживается во всех современных браузерах.

Создание базового Gutenberg блока с отложенной загрузкой

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

Регистрация блока в JavaScript

В файле index.js нашего плагина создадим блок и реализуем отложенную загрузку с помощью Intersection Observer:

import { registerBlockType } from '@wordpress/blocks';
import { useState, useEffect, useRef } from '@wordpress/element';

registerBlockType('wpblock/lazy-load-block', {
  title: 'Lazy Load Block',
  icon: 'timer',
  category: 'widgets',
  edit: () => {
    const [isVisible, setIsVisible] = useState(false);
    const blockRef = useRef(null);

    useEffect(() => {
      if (!blockRef.current) return;
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            setIsVisible(true);
            observer.disconnect();
          }
        });
      });
      observer.observe(blockRef.current);
      return () => observer.disconnect();
    }, []);

    return (
      <div ref={blockRef} style={{border: '1px solid #ddd', padding: '20px', minHeight: '150px'}}>
        <h3>Заголовок блока с отложенной загрузкой</h3>
        {isVisible ? <p>Этот контент загружен лениво, когда блок появился в области видимости.</p> : <p>Загрузка...</p>}
      </div>
    );
  },
  save: () => {
    // Отложенный контент рендерится на клиенте, в save возвращаем статичный HTML
    return <div><h3>Lazy Load Block</h3><p>Контент загружается динамически.</p></div>;
  }
});

В этом коде мы используем React-хуки WordPress для отслеживания появления блока в области видимости и запускаем загрузку контента только тогда.

Отложенная загрузка внешних скриптов и стилей в блоке

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

Рассмотрим пример динамической загрузки скрипта YouTube API только при появлении блока.

Пример динамической загрузки скрипта

function wpblockLoadScript(src, id) {
  return new Promise((resolve, reject) => {
    if (document.getElementById(id)) {
      resolve();
      return;
    }
    const script = document.createElement('script');
    script.id = id;
    script.src = src;
    script.onload = () => resolve();
    script.onerror = () => reject(new Error('Failed to load script ' + src));
    document.body.appendChild(script);
  });
}

Используем эту функцию в нашем блоке для загрузки внешнего скрипта:

useEffect(() => {
  if (!isVisible) return;
  wpblockLoadScript('https://www.youtube.com/iframe_api', 'youtube-api-script')
    .then(() => {
      // Инициализация плеера или другой логики
      console.log('YouTube API загружен');
    })
    .catch(console.error);
}, [isVisible]);

Серверная часть: оптимизация рендера и кеширования

Чтобы блок был максимально эффективным, рекомендуем использовать серверный рендеринг (dynamic block) для вывода базового HTML и кешировать результаты.

В PHP-файле плагина зарегистрируем блок с render_callback:

function wpblock_register_lazy_load_block() {
  register_block_type('wpblock/lazy-load-block', [
    'render_callback' => 'wpblock_render_lazy_load_block',
  ]);
}
add_action('init', 'wpblock_register_lazy_load_block');

function wpblock_render_lazy_load_block($attributes) {
  $html = '<div class="wpblock-lazy-load" style="min-height: 150px; border: 1px solid #ddd; padding: 20px;">'
    . '<h3>Lazy Load Block</h3>'
    . '<noscript><p>Для корректного отображения включите JavaScript.</p></noscript>'
    . '</div>';
  return $html;
}

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

Плагины для упрощения создания ленивых блоков

Если не хочется писать всё с нуля, можно использовать плагины, которые упрощают работу с динамическими блоками и lazy load, например:

• Lazy Blocks — конструктор кастомных блоков с поддержкой динамического контента.
• Clearfy Pro — оптимизация загрузки скриптов и стилей, в том числе для блоков Gutenberg.

Рекомендации по тестированию и отладке

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

Включите в Chrome DevTools панель Performance, чтобы видеть время загрузки и запуск скриптов. Также проверьте работу без JavaScript — блок должен корректно информировать пользователя.

Поддержка SEO и доступности

Отложенная загрузка не должна мешать индексации и доступности контента. Используйте семантические теги и добавляйте noscript блоки с базовой информацией для поисковиков и пользователей без JS.

Итоги

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

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

Подключайтесь к современным методам разработки Gutenberg блоков и делайте ваши проекты быстрее и удобнее для пользователей!