«Ледаче завантаження» зображень в WordPress - Блог chomovva

«Ледача завантаження» – це метод прискорення завантаження сторінки, який полягає у відмові від завантаження всього контенту. Найчастіше використовується для зображень, коли в них немає потреби. При використанні методу зображення не будуть завантажуватися, поки не знадобляться відвідувачеві. Зображення будуть відображатися при скроллі до певної частини сторінки або натисканні користувачем на елемент.

Це важливо оскільки швидкість завантаження – ключовий аспект оптимізації сайту, особливо для Google.

У контенті сучасних сайтів використовується багато зображень і уповільнення швидкості їх завантаження може стати проблемою. Навіть при правильній оптимізації зображення вимагають більше часу на завантаження ніж, наприклад, текст. Це в свою чергу негативно позначається на часі, який люди витрачають на очікування, щоб отримати доступ до контенту.

Ледаче завантаження не підтримується в базовій установці WordPress. Щоб додати такий функціонал доведеться скористатися плагіном або шукати тему, яка його вже підтримує. Нижче розглянуто простий варіант додавання “ледачого завантаження” зображень на сайт без використання стороннього плагіна. Цей код можна використовувати при створенні теми. Результат його роботи Ви бачите на моєму сайті.

Реалізація

У даному рішенні використовується js-бібліотека 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 і srcset на data-src і data-srcset, а також додається клас .lazy.

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


Такий спосіб обходу html коду при виведенні контенту використовується в WordPress для обробки шоткодів всередині html-тега. Він не повинен уповільнити сервер особливо якщо використовується сторінкове кешування.

Зображення завантажується тільки якщо користувач прокрутить сторінку до місця, де воно потрапляє в видиму частину вікна браузера. Якщо користувач ніколи не докрутив сторінку до цієї точки, то зображення не буде завантажено. Це економить трафік, що особливо актуально для користувачів мобільних пристроїв.

Цей метод я використав у наступних проектах:

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

голос
Рейтинг статті
Підписатися
Сповістити про
guest
0 Коментарі
Вбудовані Відгуки
Переглянути всі коментарі
0
Ми любимо ваші думки, будь ласка, прокоментуйте.x
()
x