Приветствую на страницах WebDevTips. Отложенная загрузка изображений — один из самых эффективных способов быстро ускорить загрузку вашего сайта и поднять количество балов в Google PageSpeed Insights. Сегодня покажу, как сделать это, и тем самым убрать ошибку «отложите загрузку скрытых изображений».
Отложенная загрузка изображений с помощью JavaScript
Этот способ максимально универсальный, так как подойдет как для сайтов на чистом HTML, CSS, так и для сайтов под управлением большинства CMS. Использовать мы будем библиотеку под названием LazySizes. Выбор пал именно на неё, так как сама по себе библиотека лёгкая (вес всего 7 кб). К тому же она SEO Friendly.
Для начала скачиваем саму библиотеку с Github’а разработчика. В скачанном архиве вы найдете файл lazysizes.min.js. Подключаем файл к вашей HTML страничке, не забывая сделать загрузку асинхронной.
<script src="lazysizes.min.js" async=""></script>После чего займемся нашими картинками. Библиотека работает таким образом, что изначально мы не указываем пути к нашим картинкам, оставляя атрибут src пустым, вместо него заполняя атрибут data-src. Во время скролла, библиотека подставляет значения из атрибута data-src в src, тем самым постепенно подгружая только необходимые картинки. Так же необходимо добавить класс «lazyload». На этом настройка будет закончена, а отложенная загрузка изображений будет работать.
К примеру, у нас есть несколько картинок на странице:
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">Для того, что бы отложить их загрузку, нужно всего переделать их в такой вид:
<img data-src="image1.jpg" class="lazyload" alt="">
<img data-src="image2.jpg" class="lazyload" alt="">
<img data-src="image3.jpg" class="lazyload" alt="">На этом все. Изображения уже будут загружаться постепенно.
LazyLoad в WordPress
Если ваш сайт работает под управлением системы WordPress, реализовать отложенную загрузку будет еще проще. Для этого необходимо скачать всего 1 плагин. Устанавливаем как обычный плагин, после чего активируем его во вкладке «плагины». После этих действий Lazy Load так же будет работать
Спасибо, что прочли. Если у вас остались любые вопросы — смело задавайте их в комментариях снизу. Так же советую ознакомиться с другими моими статьями:
1. Параллакс эффект для фона сайта на чистом CSS
2. Делаем видео фон на чистом HTML+CSS
