Что такое Lazy Load? Лучшие плагины для использования.
Опубликовано: 18.10.2017
Simple Lazy loading images using JavascriptЧитатели WPNICE периодически интересуются — как можно организовать постепенную или как её еще называют «ленивую» (Lazy Load) подгрузку изображений на сайте. Вашему вниманию сегодня отличная статья от Jon Penland, где он по полочкам рассказывает о том, что это такое, как работает и рекомендует лучшие плагины если в вашей теме такой функции нет по умолчанию. Приятного чтения, друзья.
Когда нам нужно поделиться медиа-файлами или сделать их частью дизайна сайта, то WordPress всегда готов нам в этом помочь. Однако, проблема заключается в том, что на загрузку всей этой тяжеловесной визуальной составляющей тратится довольно много времени. Ведь, на деле, чтоб просмотреть страницу, пользователь должен дождаться загрузки абсолютно всего контента (и даже того, что находится вне его поля зрения).
Lazy Loading design pattern
Здесь нам и пригодится так называемая «ленивая» загрузка (Lazy Load), которая представляет собой метод оптимизации страниц, заключающейся в загрузке только видимого пользователю контента. В то время, как контент, который находится ниже поля зрения загружается с задержкой.
💥 Angular Router Lazy Loading and Shared Modules - How to Lazy-Load a Module - Covers Final Release
Эта одни из тех вещей, которая нравится Гуглу и Яндексу, да и, вообще, очень полезная техника, если на страницах вашего сайта много вставленных видео и картинок с высоким разрешением.
Как работает Lazy Load (ленивая загрузка)?
Браузер создает DOM веб-страницы без скачивания изображений и предзагрузки видео. JavaScript используется, чтоб определить, какие картинки скачать, и какие видео предзагрузить, основываясь на том, какой контент сразу попадается на глаза пользователю, когда тот открывает страницу. Такие картинки и видео становиться приоритетными. В итоге, ненужный в данный момент контент не загружается сразу, что в свою очередь и приводит к росту производительности сайта.