Lazy Load 2.0 для PHPBB3
Если вам доводилось сталкиваться с PageSpeed Insights – инструментом по анализу скорости загрузки сайта от компании Google, то вы могли наблюдать в нем сообщение вида «Отложите загрузку скрытых изображений». Что это и зачем Google рекомендует внедрить эту технологию на ваш сайт?
Все дело в том, что когда человек заходит на ваш сайт, первое, что он видит, это первый (ключевой) экран сайта – ту область от начала (самого верха) вашего сайта, что умещается на его мониторе. Что идет ниже – он пока не видит, и может не увидеть в принципе (по своему желанию или другим причинам).
К чему я все это рассказываю? Если на вашем сайте большое количество изображений, все они будут грузиться, независимо от того, видит их пользователь или нет, что, в свою очередь, добавляет лишние секунды к времени полной загрузки страниц вашего сайта.
Чтобы не заставлять человека ждать и максимально быстро предоставить ему информацию, в которой он нуждается, и существует чудесный плагин под названием «Lazy Load». Он позволяет подгружать изображения по мере прокрутки страницы, когда они начинают попадать в область видимости.
Первые версии плагина, автором которого, кстати говоря, является Мика Туупола, были реализованы с использованием jQuery. В этом же посте я расскажу вам о свежей версии плагина (Remastered, как называет ее сам автор) на чистом JavaScript.
Инструкция по установке Lazy Load 2.0 на сайт
Итак, все как обычно.
1. Скачайте архив в конце поста, разархивируйте и содержимое через FTP загрузите на ваш сайт к примеру в папку
2. Далее открываем -
Не забывайте корректно прописывать адрес до скрипта на вашем сайте.
3. Открываем файл
«img» здесь означает, что «лениво» загружаться будут все изображения.
4. Четвертый и он же, по сути, завершающий шаг это автоматическое изменение кода изображений для Lazy Load 2.0
Есть несложный способ, который позволяет автоматически изменить необходимый атрибут у изображений.
Для этого открываем файл
На этом всё. Не забываем чистить кеш.
Может кому то пригодится. Себе установил. Работает.
Если вам доводилось сталкиваться с 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");
На этом всё. Не забываем чистить кеш.
Может кому то пригодится. Себе установил. Работает.
Комментарии: 1
Похожие темы
-
Наткнулся вчера на интересный урок в codepen.io.
Страница -
Посмотрел. Вроде вставить на форум в шапку возможно. С матом но можно.
Вопрос. А как... -
Здравствуйте.
Подскажите пожалуйста подходящее расширение phpBB3 SEO Sitemap
для моей версии форума - 3.1.12 .