Как реализовать lazy load на сайте WordPress – отложенная загрузка изображений и видео

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

Что такое Lazy Load и для чего эта технология нужна на сайтах?

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

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

Рекомендую внедрять технологию отложенного запуска на любом сайте. Особенно это важно, если:

Лучшие плагины с функцией Lazy Load для WordPress

Приведу список хороших актуальных WordPress-плагинов для реализации ленивой загрузки медиаконтента на сайтах.

a3 Lazy Load: простой метод улучшить производительность WordPress

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

LazyLoad Plugin: ленивая загрузка WordPress для iframe, картинок и видеороликов

LazyLoad Plugin — бесплатный плагин от разработчика WP Rocket, который не только добавляет отложенный запуск контента. В дополнение к этому он заменяет айфрейм YouTube на превью-картинку. Это еще больше ускоряет загрузку WordPress-страниц.

Для своей работы расширение добавляет скрипт, который весит менее 10KB, и не использует тяжелые библиотеки JS, например, jQuery.

OmniVideo: лучшее решение для применения Lazy Load к видеороликам

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

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

Видео-обзор OmniVideo

YouTube ВК.Видео RuTube Kinescope

Плагин OmniVideo бьет все рекорды по продажам, поскольку аналогов просто нет. Забирайте со скидкой, которая действует для читателей этого сайта.

Скидка на OmniVideo

Loading Page with Loading Screen: экран предварительной загрузки и Lazy Load WordPress

В бесплатной версии плагина Loading Page with Loading Screen доступен лишь базовый функционал — установка и настройка экрана предварительной загрузки на WordPress.

Настройки отложенной загрузки включают:

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

Lazy Load for Videos: кликабельные превью вместо роликов YouTube и Vimeo

Lazy Load for Videos — бесплатный плагин для движка WordPress. Работает только с роликами, загруженными через YouTube или Vimeo. Заменяет стандартный плеер миниатюркой предварительного просмотра.

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

Как добавить Lazy Load в WordPress программно

Включение небольшого скрипта в файл functions.php WordPress-темплейта добавит на ваш сайт ленивую загрузку для картинок и видео:

add_filter( 'save_post', 'add_lazy_load', 10, 3 );
function add_lazy_load( $post_id, $post, $update ) {
    if ( wp_is_post_revision( $post_id ) ) {
        return;
    }

    if ( ! class_exists( 'DOMDocument', false ) ) {
        return;
    }

    remove_action( 'save_post', 'add_lazy_load' );

    $post_status = get_post_status( $post_id );
    if ( $post_status != 'draft' ) {
        $document = new DOMDocument();
        $document->loadHTML( mb_convert_encoding( $post->post_content, 'HTML-ENTITIES', 'UTF-8' ) );

        $images = $document->getElementsByTagName( 'img' );
        foreach ( $images as $image ) {
            if ( !$image->getAttribute( 'loading' ) || $image->getAttribute( 'loading' ) != 'lazy' ) {
                $image->setAttribute( 'loading', 'lazy' );
            }
        }

        $iframes = $document->getElementsByTagName( 'iframe' );
        foreach ( $iframes as $iframe ) {
            if ( !$iframe->getAttribute( 'loading' ) || $iframe->getAttribute( 'loading' ) != 'lazy' ) {
                $iframe->setAttribute( 'loading', 'lazy' );
            }
        }

        $html = $document->saveHTML();
        wp_update_post( array(
            "ID"           => $post_id,
            "post_content" => html_entity_decode( $html ),
        ) );
    }

    add_action( 'save_post', 'add_lazy_load', 10, 3 );
}

После вставки этого кода при создании новых постов или страниц к картинкам и тегам iframe будет применяться функция Lazy Load.

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

OmniVideo со скидкой