Lazy Load 2.0 для PHPBB3
Если вам доводилось сталкиваться с PageSpeed Insights – инструментом по анализу скорости загрузки сайта от компании Google, то вы могли наблюдать в нем сообщение вида «Отложите загрузку скрытых изображений». Что это и зачем Google рекомендует внедрить эту технологию на ваш сайт?

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

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

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

Первые версии плагина, автором которого, кстати говоря, является Мика Туупола, были реализованы с использованием jQuery. В этом же посте я расскажу вам о свежей версии плагина (Remastered, как называет ее сам автор) на чистом JavaScript.

Инструкция по установке Lazy Load 2.0 на сайт
Итак, все как обычно.

1. Скачайте архив в конце поста, разархивируйте и содержимое через FTP загрузите на ваш сайт к примеру в папку

ваш_сайт/js
2. Далее открываем -
ваш_сайт/styles/ваш_стиль/template/overall_header.html и перед</head> прописываем <script src="ваш_сайт/js/lazyload.js"></script>
Не забывайте корректно прописывать адрес до скрипта на вашем сайте.

3. Открываем файл ваш_сайт/styles/ваш_стиль/template/overall_footer.html и перед </body> прописываем -
<script>
let images = document.querySelectorAll("img");
lazyload(images);
</script>

«img» здесь означает, что «лениво» загружаться будут все изображения.
4. Четвертый и он же, по сути, завершающий шаг это автоматическое изменение кода изображений для Lazy Load 2.0
Есть несложный способ, который позволяет автоматически изменить необходимый атрибут у изображений.

Для этого открываем файл ваш_сайт/index.php и в верху, сразу после <?php вставляем код -
function lazyload_img($buffer) {
return preg_replace('#<img([^>]*) src="([^"/]*/?[^".]*\.[^"]*)"([^>]*)>#', '<img$1 data-src="$2"$3>', $buffer);
}
ob_start("lazyload_img");

На этом всё. Не забываем чистить кеш.
Может кому то пригодится. Себе установил. Работает.
lazyload_pandoge_com.zip
1.79 КБ 360 скачиваний
Комментарии: 1

romaamor 15 сен 2023, 14:33 Сообщение

А как сделать отложенную загрузку аватаров ? А то это решение, что я выложил выше, на аватары не распространятся.
  • 0

Похожие темы