Как реализовать Lazy Load на сайте WordPress: отложенная загрузка изображений и видео

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

Lazy Loading — что это и для чего нужно на WordPress?

Lazy Loading, Lazy Load, «ленивая загрузка» или «отложенная загрузка» — все это разные названия одной технологии. Она подразумевает подгрузку контента (картинки, видео и фреймы) по мере необходимости для пользователя, когда он оказывается в области видимости.

Сам метод работы достаточно простой. При заходе на страницу тот контент, который имеет поддержку Lazy Load, загружается динамически в момент докрутки до него.

В каких случаях важно внедрять Lazy Load для изображений и видео

В первую очередь данная технология эффективна на крупных проектах с большим количеством страниц и динамическим контентом (блоги, интернет-магазины, портфолио). Когда сайт имеет много медиафайлов, их отложенная загрузка существенно повышает скорость начального открытия страницы.

Отложенную инициализацию необязательно включать для всех картинок и видео на сайте. Более того, такое действие считается ошибкой.

Лучшие плагины для отложенной загрузки WordPress в 2024 году

Реализовать Lazy Load на WordPress проще всего при помощи плагинов. Рассмотрю несколько бесплатных и премиум-решений, которые способны справиться с этой задачей.

WP Rocket — для комплексной оптимизации

Премиальный плагин WP Rocket позволяет оптимизировать скорость сайта по многим параметрам. Он работает, как с фронтендом, так и с бэкендом: берет на себя задачу оптимизации базы данных, скриптов и контента. В том числе, в нем есть функция Lazy Loading.

В WP Rocket предусмотрели Lazy Load для изображений, видео и iframe. Активировать опцию в настройках расширения можно в один клик. Там же указываются исключения по названиям файлов или стилям.

Оптимизация видео (отображение обложки до включения ролика без предварительной скачки данных iframe) в данном плагине затрагивает только YouTube и Vimeo. Другие плееры не поддерживаются.

Autoptimize — бесплатный и гибкий

Один из самых известных плагинов для ускорения работы сайта — Autoptimize. Имеет свыше 1 миллиона установок и дает мощные опции даже в бесплатной версии.

Lazy Load здесь активируется отдельной галочкой в настройках, но исключительно для изображений. Имеется опция перевода картинок на WebP, что позволяет еще повысить скорость ресурса. Также присутствует строка для ввода исключений (названия изображений или css-стилей).

a3 Lazy Load — для детальной настройки ленивой загрузки

Если опция отложенной загрузки нужна отдельно без использования масштабного WP-плагина оптимизации, то подойдет a3 Lazy Load. Это расширение полностью концентрируется именно на задержке поступления данных медиаконтента, который не попадает в поле зрения пользователя при открытии сайта.

С помощью a3 Lazy Load удастся отложить загрузку изображений, видео, iframe. В том числе, работает с Google Maps и иконками в блоках популярных плагинов, таких как WooCoommerce.

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

OmniVideo — лучший плагин для отложенной загрузки видео

Несмотря на тот факт, что многие из представленных в подборке плагинов для Lazy Load умеют работать с видео, для своих проектов я выбираю OmniVideo. Только он способен одинаково эффективно работать, как с иностранными видеохостингами (YouTube, Vimeo), так и с российскими (RuTube, Дзен, ВК Видео и другие).

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

1. При помощи OmniVideo вебмастер формирует единый блок с роликами, задает ему стиль и обложку.
2. На странице пользователь видит постер, по нажатию на него запускается ролик с выбранной по умолчанию площадки. Там же можно переключиться на предпочитаемый сервис воспроизведения видео.
3. Сама обложка видеоролика получает встроенный Lazy Load, а блок — разметку VideoObject.

Пример блока на OmniVideo с обзором возможностей плагина

YouTube ВК.Видео RuTube Kinescope

Разработчики OmniVideo дополнительно позаботились о сайтах, где уже встроено много видео с YouTube. Достаточно активировать один переключатель в настройках плагина, и автоматически все iframe-компоненты Ютуба будут заменены на блок плагина со всеми его преимуществами. Это позволяет существенно ускорить старые страницы сайта без необходимости ручного редактирования.

Для русскоязычных сайтов альтернативы OmniVideo с точки зрения оптимизации блоков с роликами просто нет. Учитывая замедление YouTube, приходится добавлять на сайт ролики с других видеохостингов. Данное расширение позволяет это сделать красиво, “обернув” в современный дизайн, плюс — еще и оптимизирует их.

Лицензия OmniVideo со скидкой

Lazy Load for Videos – для видео на иностранных площадках

Если вы работаете исключительно на зарубежную аудиторию и планируете выкладывать ролики только с YouTube и Vimeo, то оптимизировать их загрузку поможет Lazy Load for Videos.

Из интересных особенностей расширения:

• Кастомизируемый плеер (можно скрывать элементы управления, выбирать стили кнопки воспроизведения, менять цвет строки прогресса).
• Предусмотрена возможность добавить рекламу в начало или конец любого ролика.
• Есть выбор отображаемого размера обложки.

Lazy Load for Videos полностью бесплатный. Но он не переведен на русский язык.

Loading Page with Loading Screen — для отображения процесса загрузки

Завершить подборку плагинов для Lazy Load хочу расширением Loading Page with Loading Screen. Оно функционально предназначено для отображения процесса загрузки страницы посетителям.

Обычно когда пользователь заходит на сайт, он может оценить степень закачки страницы по вкладке. Например, браузер Google Chrome при продолжающемся скачивании ресурсов сигнализирует об этом  вращающимся индикатором состояния вокруг фавикона. Данный плагин позволяет вывести анимацию, информирующую о загрузке, поверх контента сайта.

В Loading Page with Loading Screen есть множество эффектов анимации, опции для вывода рекламы в процессе, различные способы отображения процента скачанных данных и другие настройки. Присутствуют и функции для активации Lazy Load, но только в платной версии.

Как добавить в WordPress ленивую загрузку вручную

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

function add_lazy_loading_to_images($content) {
    $content = preg_replace_callback(
        '/<img([^>]+)>/i',
        function ($matches) {
            if (strpos($matches[1], 'loading=') === false) {
                return '';
            }
            return '<img' . $matches[1] . '>';
        },
        $content
    );
    return $content;
}
add_filter('the_content', 'add_lazy_loading_to_images');

function lazy_load_iframe($content) {
    $content = preg_replace_callback(
        '/<iframe([^>]+src="([^"]+)"[^>]*)><\/iframe>/i',
        function ($matches) {
            $iframe_src = $matches[2];
            $video_id = extract_youtube_id($iframe_src);

            if ($video_id) {
                return '<div class="lazy-iframe" data-src="https://www.youtube.com/embed/' . $video_id . '">
                            <img src="https://img.youtube.com/vi/' . $video_id . '/hqdefault.jpg" alt="Видео превью">
                            <button class="play-button">►</button>
                        </div>';
            }

            return $matches[0];
        },
        $content
    );
    return $content;
}
add_filter('the_content', 'lazy_load_iframe');

function extract_youtube_id($url) {
    $pattern = '/(?:youtube\.com\/(?:.*v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/';
    preg_match($pattern, $url, $matches);
    return isset($matches[1]) ? $matches[1] : false;
}

Код определяет ID ролика, после чего создает на месте встроенного видеоролика обложку с кнопкой “Play”.

document.addEventListener('DOMContentLoaded', function () {
    const lazyIframes = document.querySelectorAll('.lazy-iframe');

    lazyIframes.forEach((lazyIframe) => {
        lazyIframe.addEventListener('click', function () {
            const iframe = document.createElement('iframe');
            iframe.src = lazyIframe.getAttribute('data-src');
            iframe.setAttribute('frameborder', '0');
            iframe.setAttribute('allow', 'autoplay; encrypted-media');
            iframe.setAttribute('allowfullscreen', true);
            lazyIframe.innerHTML = ''; // Убираем превью
            lazyIframe.appendChild(iframe);
        });
    });
});

function enqueue_lazy_load_script() {
    wp_enqueue_script('lazy-load-script', get_template_directory_uri() . '/js/lazy-load.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_lazy_load_script');

function exclude_lazy_loading($content) {
    $content = preg_replace('/<img([^>]+class="[^"]*no-lazy[^"]*"[^>]*)>/i', '<img$1 loading="eager">', $content);
    return $content;
}
add_filter('the_content', 'exclude_lazy_loading');

.lazy-iframe {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    cursor: pointer;
}

.lazy-iframe img {
    width: 100%;
    height: auto;
    display: block;
}

.lazy-iframe .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 2rem;
    padding: 10px 15px;
    cursor: pointer;
}

Итоги

Lazy Load — полезная опция, которую стоит использовать. Обязательно реализуйте ее не только для изображений, но и для видео. Если вы уже применяете один из плагинов для оптимизации работы сайта, поищите в нем встроенную опцию отложенной загрузки для картинок или воспользуйтесь добавленной в движок Вордпресс по умолчанию.

Что касается видео, то безальтернативным и лучшим решением я считаю плагин OmniVideo. Он не только добавляет ленивую загрузку для роликов, но и совершенствует пользовательское взаимодействие с ними, что улучшает поведенческие факторы сайта и позитивно сказывается на позициях интернет-ресурса в поисковых системах.

Скидка на OmniVideo

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