В этом случае, если вы желаете убыстрить загрузку вашего веб-сайта работающего на CMS WordPress, имеет смысл настроить в нем Lazy Loading для картинок (изображений). Т.е. их загрузку браузером только в этом случае, если они должны отображаться пользователю. Есть огромное количество плагинов, позволяющ?? это сделать в пару кликов, но для тех, кто не желает устанавливать излишние плагины из-за суждений безопасности (либо каких то еще) и написан этот пост.
Что подобное Lazy Load?
Lazy Load (Ленивая загрузка) — отложенная загрузка изображений, это прием, позволяющ?? отложить загрузку изображений на просматриваемой страничке до того момента, когда они вправду необходимы (т.е. видны пользователю). с помощью данному, при начальной загрузке странички веб-сайта — нет необходимости загружать изображения, присутствующ?? на этой страничке, что существенно сберегает трафик и ускоряет загрузку странички (при использовании мобильного веба, к примеру). Кроме того,, благодаря данному достигается экономия трафика на сервере (животрепещуще, если веб-сайт употребляет CDN), т.к. далеко не все пользователи читают запрошенную статью до конца и таким образом просматривают все доступные на ней изображения.
Как подключить Lazy Load в WordPress?
На момент написания этой статьи, на нашем сайте используется именно этот способ отложенной загрузки изображений.
Первым делом необходимо скачать сам скрипт Lazy Load, я воспользовался следующим:
https://github.com/eisbehr-/jquery.lazy
В файле вашей темы, необходимо подключить загрузку файла jquery.lazy.min.js, который можно скачать с github разработчика.
Как активировать Lazy Load в WordPress?
В предыдущем пункте мы загрузили необходимую библиотеку, теперь осталось ее активировать. Для ее нормальной работы, у каждого изображения на странице (тег img), должен быть указан параметр data-src, а стандартный src должен отсутствовать или быть пустым. Чтобы этого добиться, необходимо в файл functions.php вашей темы оформления, добавить следующие строки:
images_lazy_load_wordpress.txt
$pattern — данным регулярным выражением, мы ищем необходимые атрибуты в теге img чтобы сформировать свой новый тег img, вместо стандартного, который генерируется движком WordPress.
$replacement — тут мы формируем новый тег img, добавляем ко всем уже существующим классам дополнительный класс lazy, вместо src, мы используем data-src, а также переносим alt, width, height.
Т.е., если изначально тег img выглядел вот так:
img class="size-medium wp-image-8556 aligncenter" src="https://static.sysadmin.ru/wp-content/uploads/2019/03/ss-500x93.jpg" alt="test" width="500" height="93" srcset="https://static.sysadmin.ru/wp-content/uploads/2019/03/ss-500x93.jpg 500w, https://static.sysadmin.ru/wp-content/uploads/2019/03/ss.jpg 669w" sizes="(max-width: 500px) 100vw, 500px"То после обработки, он примет вот такой вид:
img class="size-medium wp-image-8556 aligncenter lazy" data-src="https://static.sysadmin.ru/wp-content/uploads/2019/03/ss-500x93.jpg" alt="test" width="500" height="93"После этого осталось активировать отложенную загрузку изображений, для этого необходимо в соответствующий файл вашей темы оформления (у нас это файл footer.php) внести такие строчки:
$('.lazy').lazy({ effect: "fadeIn", effectTime: 100, threshold: 0 });
Добавить комментарий