«Ленивая загрузка» изображений в WordPress - Блог chomovva

«Ленивая загрузка» – это метод ускорения загрузки страницы, который состоит в отказе от загрузки всего контента. Чаще используется для изображений, когда в них нет нужды. При «ленивой загрузке» изображения не будут загружаться, пока не понадобятся посетителю. Изображения будут отображаться при скролле до определённой части страницы или нажатии пользователем на элемент.

Это важно поскольку скорость загрузки – ключевой аспект оптимизации сайта, в особенности для Google.

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

Ленивая загрузка не поддерживается в базовой установке WordPress. Чтобы добавить такой функционал придётся воспользоваться плагином или искать тему, которая его уже поддерживает. Ниже рассмотрен простой вариант добавления “ленивой загрузки” изображений на сайт без использования стороннего плагина. Этот код можно использовать при создании темы. Результат его работы Вы видите на моём сайте.

Реализация

В этом способе используется библиотека Zepto Lazy. Событие загрузки изображения “вешается” с помощью класса .lazy, url изображения хранится в атрибуте data-src и data-srcset, а чтобы браузер не смог загрузить изображение нужно удалить url из атрибутов src и srcset.

Zepto Lazy библиотека не единственная, существуют и другие с подобным функционалом. Немного изменив представленный ниже код Вы сможете использовать другую библиотеку. Для работы Zepto Lazy нужен jQuery.

Скачать Zepto Lazy можно с официального сайта: http://jquery.eisbehr.de/lazy/.

Классы и атрибуты добавляются в php фильтром the_content.

Предварительно подключаем и инициализируем js-библиотеку во время хука wp_enqueue_scripts в файле function.php

function resume_scripts() {
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'lazyload', RESUME_URL . 'scripts/lazyload.min.js', array( 'jquery' ), '1.7.6', true );
	wp_add_inline_script( 'lazyload', 'jQuery( ".lazy" ).lazy();', 'after' );
}
add_action( 'wp_enqueue_scripts', 'resume_scripts' );

Затем добавляем хук the_content

function resume_add_content_lazyload_images( $content ) {
	$result = __return_empty_array();
	$elements = preg_split( get_html_split_regex(), $content, -1, PREG_SPLIT_DELIM_CAPTURE );;
	if ( is_array( $elements ) ) {
		foreach ( $elements as $element ) {
			if ( 'img' === substr( $element, 1, 3 ) ) {
				$attrs = wp_kses_hair( $element, array( 'http', 'https' ) );
				if ( ! array_key_exists( 'data-src', $attrs ) || ! array_key_exists( 'data-lazy', $attrs ) ) {
					$attrs[ 'class' ][ 'value' ] = ' lazy';
					$attrs[ 'data-src' ][ 'value' ] = $attrs[ 'src' ][ 'value' ];
					$attrs[ 'src' ][ 'value' ] = '#';
					if ( array_key_exists( 'srcset', $attrs ) ) {
						$attrs[ 'data-srcset' ][ 'value' ] = $attrs[ 'srcset' ][ 'value' ];
						$attrs[ 'srcset' ][ 'value' ] = '#';
					}
					$element = '<img';
					foreach ( $attrs as $attr => $value ) {
						$element .= sprintf( ' %1$s="%2$s"', $attr, $value[ 'value' ] );
					}
					$element .= ' />';
				}
			} elseif ( empty( trim( $element ) ) ) {
				continue;
			}
			$result[] = $element;
		}
	} else {
		$result[] = $content;
	}
	return implode( "", $result );
}
add_filter( 'the_content', 'resume_add_content_lazyload_images', 10, 1 );

Эта функция-фильтр разбирает переданный html текст на теги и комментарии. Назад возвращается массив значений: теги, аттрибуты и их текст.

Затем проходит по полученному массиву в поисках элементов IMG, если такой элемент найден – он проверяется можно ли и нужно добавлять для него “ленивую загрузку”. Если элемент соответствует условиям – у него заменяются атрибуты src и src-set на data-src и data-srcset, а также добавляется класс lazy.

Результатом работы функции является сформированный HTML код, который передаётся назад в WordPress и выводится с помощью функции the_content на странице сайта.


Такой способ обхода html кода при выводе контента используется в WordPress для обработки шоткодов внутри html-тега. Он не должен замедлить сервер особенно если используется страничное кеширование.

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

Этот метод я использовал в следующих проектах:

Git-репозиторий проекта: https://github.com/chomovva/lazyload-wordpress-content

vote
Article Rating
Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x