Lazy load або лінива завантаження зображень – що це, і як її зробити на сайті

Доброго часу доби, дорогі друзі!

У цій статті я розповім про ліниву завантаження зображень (lazy load), а також про те, як її можна реалізувати на сайті з WordPress. Крім цього, ми обговоримо значення ледачою завантаження для пошукової оптимізації.

Я розповім про те, чому цей функціонал повинен бути присутнім на вашому ресурсі і які плюси і мінуси він в собі несе. В рамках матеріалу ми будемо розглядати переважно WordPress, тому я розповім вам про плагіни та інших рішеннях, які можуть допомогти вам у створенні lazy load. Отже, починаймо!

Зміст

• Що таке лінива завантаження зображень
  • Види lazy load
• Як зробити lazy load на WordPress
  • За допомогою функціоналу в шаблонах
  • За допомогою плагінів
• Як зробити lazy load без плагінів
• Висновок

Що таке лінива завантаження зображень

Лінива завантаження зображень на увазі, що вони будуть завантажуватися тільки при необхідності. Припустимо, якщо на сайті є довга стаття, всередині якої є фотографії, вони не будуть завантажуватися всі відразу, як це буває зазвичай. Замість цього, всі картинки будуть подгружаться асинхронно – це значить незалежно від інших фрагментів ресурсу.

На ділі це виглядає так. Сайт відкривається, і якщо ця стаття, то спочатку з’являється текст, а вже після зображення, які знаходяться в полі зору користувача. Якщо користувач починає прокручувати сторінку вниз, ті картинки, які перебували далі, теж починають завантажуватися. Якщо ж він не робить цього, воліючи проглядати тільки верхню частину матеріалу, ті фото не будуть завантажуватися.

Завдяки цьому швидкість відкриття сторінок сайту збільшується. У стандартних ситуаціях браузер завантажує абсолютно всі картинки, які є на сторінці. Вони будуть важити досить багато, тому в деяких випадках від такого страждає швидкість відображення.

Якщо на такому сайті активувати lazy load, то швидкість відображення буде набагато вище. Спочатку буде завантажуватися тільки текстовий контент, а ось уже зображення почнуть завантажуватися в процесі вивчення користувачем сайту.

Подібне рішення дуже цінується пошуковими системами, тому що швидкість відображення – один з найважливіших критеріїв якості ресурсу. Якщо сайт вантажиться дуже повільно, то велика ймовірність, що користувачі будуть покидати його, так і не дочекавшись остаточного відображення контенту.

У випадку з зображеннями, особливо на тих проектах, де їх дуже багато, це теж актуально. Тільки уявіть, що на сторінці є кілька десятків фото у високій роздільній здатності. Кожне таке фото може важити кілька мегабайт, і людям з повільним інтернетом буде дуже складно їх все прогрузить.

А якщо вони не зможуть прогрузить графіком, то і сама сторінка сайту не буде відображатися коректно. В такому випадку користувач просто захоче покинути ресурс, тому що немає сенсу чекати, можливо, в пошуковій видачі є більш швидкі сайти, на яких немає таких проблем.

Лінива завантаження зображень дозволить відобразити текстовий контент, тому користувач не буде відразу залишати ресурс. Можливо, він зацікавиться і почне вивчати його. У процесі вивчення тексту довантажити і картинки, і ось уже перед користувачем буде повноцінна стаття. Він не покине ресурс, і пошукові системи не будуть вважати це відмовою. Саме тому lazy load – це функціонал, який рекомендується багатьма SEO-фахівцями для комерційних та інформаційних ресурсів.

Тобто це допомагає поліпшити поведінкові фактори і є одним з основних факторів пошукового ранжування. ПС зараз особливо сильно намагаються враховувати показники ПФ при формуванні результатів пошуку. Якщо ваш ресурс має погані показники, він летить на дно, якщо хороші, навпаки, підвищується в топі, поступово доходячи до самих верхніх позицій.

Види lazy load

У цього функціоналу є кілька різновидів. Кожна з них передбачає певну модель взаємодії користувача і сайту. Вище я розглянув найпопулярнішу – скролінг. Вона передбачає, що всі картинки будуть завантажуватися в процесі прокрутки сторінок. Зазвичай її використовують на тематичних сайтах, інтернет-магазинах і т. д.

Це досить зручно, тому що не вимагає від користувача ніяких дій. Він просто переглядає сторінку і в процесі його браузер завантажує всі потрібні зображення. При цьому в більшості випадків він не відчуває якихось проблем з очікуванням завантаження зображення і т. д. Якщо все реалізовано на належному рівні, то всі картинки будуть завантажуватися протягом секунди.

В окремих випадках, особливо коли у вас повільний інтернет або слабке пристрій, закачування зображень може займати до 10 – 15 секунд. Це не так багато, враховуючи, що в цей час перед користувачем буде текстовий контент.

Якщо б не було ледачою завантаження, то ці 10 – 15 секунд пішли б на відкриття сторінки. Дивитися на білий екран браузера не дуже приємно, так що, швидше за все, людина просто б закрив сайт. А тут він буде зайнятий вивченням вмісту і навряд чи помітить якісь проблеми.

Наступний вид ледачою завантаження увазі, що фото буде завантажуватися тільки після кліка користувачем по якій-небудь області або посиланні. Тобто всі картинки будуть спочатку приховані (не будуть завантажуватися), однак якщо захочеться побачити якусь (буде спеціально розмічена область), то він зможе на неї натиснути, після чого тільки ця картинка буде завантажена.

Такий вид lazy load забезпечує високу швидкість відображення сторінки, але разом з тим у користувача з’являється необхідність у додаткових діях. Погодьтеся, не кожна людина захоче прокликивать всі фото, коли їх дуже багато на сторінці.

Цей варіант більше підійде для якихось блогів або невеликих інформаційних порталів, де картинки не несуть у собі особливо багато інформації. Тоді користувачеві дійсно не потрібно буде витрачати час на кліки у випадках, коли йому це не цікаво. Він цілком зможе обійтися текстовим контентом.

Ще один вид ледачою завантаження, який досить часто використовується на різних ресурсах, – довантаження фото у фоновому режимі. Коли людина заходить на сторінку і залишає її відкритою, припустимо, відійшовши кудись або зупинившись на читанні, браузер продовжує завантажувати контент у фоновому режимі.

Насправді цей спосіб дуже схожий на варіант зі скролінгом, за тим лише винятком, що сама довантаження відбувається незалежно від того, скроллит людина сторінку чи ні. Всі фотографії в будь-якому випадку завантажуються, тільки відбувається це у відкладеному фоновому режимі. Спочатку вантажиться текст і скелет сайту, і вже потім починають перейматися зображення.

Варіант досить зручний, але не скрізь його потрібно застосовувати. Фонова довантаження буде актуальна для проектів з зображеннями у великому дозволі. Тоді завантаження у фоновому режимі буде дійсно виправдана. Однак якщо ви будете наповнювати свій сайт марними матеріалами, які не викликають ніякого інтересу у аудиторії, то всі старання будуть марні.

В такому випадку підійде спосіб зі скролінгом. Якщо люди будуть прокручувати сторінку, то картинки почнуть завантажуватися. Якщо ж ні, то ніякої необхідності в завантаженні фото у високій якості немає.

Будь-який з перерахованих вище варіантів прискорює завантаження сайту і покращує поведінкові фактори. Самим популярним і загальновизнаним видом lazy load вважається варіант зі скролінгом. Однак ніхто не забороняє використовувати інші варіації цього функціоналу. В якихось особливих умовах використання засобів з завантаженням по кліку або фонової завантаженням буде більш виправдано.

Як зробити lazy load на WordPress

Тепер я розповім про те, як можна реалізувати ліниву завантаження зображень на ресурсі з WordPress. Користуватися ми будемо додатковими рішеннями.

За допомогою функціоналу в шаблонах

Отже, зробити ліниву завантаження графіки в WP можна за допомогою функціоналу, який є в шаблонах. Дуже багато шаблонів зараз мають додаткові вбудовані особливості. Як правило, це якісь спеціальні візуальні поліпшення, блоки з текстом і т. д. Є шаблони, які пропонують кастомний можливість активації ледачою завантаження фото. Зазвичай таке є в платних преміум-шаблонах, але ви можете пошукати і безкоштовні.

З безкоштовних можна виділити тему Hueman. Її можна знайти в безкоштовному каталозі WordPress, також цю тему можна встановити прямо з панелі управління WP.

В основному цей шаблон використовується на блогах. Скріншоту вище ви можете бачити, що для цього там є всі необхідні особливості. Сама тема досить швидка, але ви можете зробити її ще швидше за допомогою вбудованого інструменту, який активує ліниву завантаження. Як тільки ви включите цю опцію, всі картинки будуть завантажуватися на вашому ресурсі послідовно при скролінгу сторінок.

Також такий функціонал є і у інших шаблонах популярних. В основному це платні рішення, які можна знайти в різних магазинах або на Themeforest. В останньому магазині шаблонів можна знайти дуже багато тем з цією функцією. Просто введіть у рядок пошуку ключові слова, після чого ресурс видасть вам всі результати.

Шаблонів з таким функціоналом дуже багато. Ви можете зайти в офіційний список магазинів від WordPress.org вибрати сайт потрібного і спробувати знайти там хороший шаблон.

За допомогою плагінів

Якщо ви не хочете змінювати шаблон, то вам допоможуть плагіни. В каталозі WordPress їх дуже багато, вам просто потрібно перейти в нього і ввести ключові слова в рядок пошуку. Тут я розповім про самих популярних і затребуваних розширення, які допоможуть вам зробити lazy load на сайті з WP.

• a3 Lazy Load

Досить популярний плагін, який має більше 100 000 активних установок за даними WordPress.org. Встановити його можна прямо з панелі керування в кілька кліків. Сам плагін має величезну кількість переваг і підійде для використання на будь-якому проекті.

З допомогою цього чудового розширення ви зможете прискорити свій ресурс на WordPress. Особливо сильно це помітно на мобільних пристроях, бо саме на них зазвичай видно проблеми з дуже важкими зображеннями. Якщо таких фото дуже багато, починає завантажуватися сторінка в кілька разів довше.

Щоб переконатися в працездатності даного модуля, розробники пропонують ознайомитися з демо-версією, на якій послідовно розміщені 1 000 картинок. Ви будете прокручувати сторінку, ці зображення будуть завантажуватися в процесі. Ніяких проблем ні зі швидкістю чи неправильним відображенням контенту.

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

Цей плагін має простий інтерфейс, з яким розбереться навіть новачок.

• Lazy Load by WP Rocket

Ще один популярний плагін, який дозволить вам зробити відкладену завантаження картинок. Модуль має понад 40 000 активних установок і продовжує набирати популярність. Його можна розглядати як непогану альтернативу попереднім плагіну.

Він вміє працювати не тільки з картинками, але і з іншими типами вмісту. Наприклад, ви зможете зробити відкладену завантаження кадрів або відео. Якщо на сайті буде аудіо, то можна проробити те ж саме з ним.

Сам скрипт плагіна досить легкий. Його можна дуже легко встановити з каталогу WordPress і налаштувати за допомогою інструкцій від розробників.

• Lazy Load Optimizer

Невелике розширення, яке допомагає налаштувати відкладену завантаження фотографій на вашому ресурсі. Він також безкоштовно доступний в каталозі WP, можна встановити прямо з панелі адміністратора WordPress. Зараз плагін не особливо популярний, всього 4 000+ активних установок. Однак відгуки він має досить позитивні.

Цей плагін має простий інтерфейс. Він підійде для новачків. Вам лише необхідно просто встановити його з панелі управління, після чого налаштувати всі параметри в стандартному настройщике WordPress. Якихось труднощів виникнути не повинно, все гранично просто і зрозуміло.

• Lazy Load

Простеньке розширення з 80 000+ активних установок. Доступний прямо в панелі управління WordPress і має порівняно простий інтерфейс.

Цей плагін не особливо підійде для новачків, тому як з налаштуванням можуть виникнути деякі труднощі. Тим не менше багато вебмастери обирають саме його, тому що сам плагін являє собою невеликий скрипт, який особливо не навантажує CMS.

У каталозі є й інші рішення, які допоможуть вам реалізувати відкладену завантаження зображень. Проте вони не такі популярні та функціональні як ті, що я описав.

Як зробити lazy load без плагінів

Ви можете зробити відкладену завантаження без допомоги плагінів. Для цього доведеться використовувати скрипти, з якими потрібно буде працювати вручну. Тобто новачки навряд чи зможуть осилити таке. Їм доведеться звертатися за допомогою до фахівців.

Самим популярним рішенням для ледачої завантаження можна вважати скрипт від David Walsh, який виклав на своєму сайті мануал, де в подробицях описано принцип роботи цього скрипта.

Цей скрипт працює дуже просто: ви замінюєте всі атрибути src в тегу img на data-src (можна використовувати з яким-небудь іншим префіксом), після чого додаєте в CSS-код декілька рядків. Вони і будуть відповідати за відображення графіки при скролінгу. Також вам необхідно буде використовувати JS-код, який буде заміняти всі атрибути з префіксом на звичайні після того, як всі картинки на сторінці будуть завантажені.

В інструкції по посиланню вище цей процес описаний більш докладно, але на англійській мові. З цим повинен розбиратися обізнана людина, новачкові краще навіть не намагатися.

Є інші способи і скрипти, які допомагають реалізувати відкладену завантаження на сайті. Якісь з них прості в установці, якісь ні. Розглядати їх я не буду, тому що вичерпної інформації це все вам не дасть. Працює все приблизно так само, як я описав вище.

Висновок

Варіантів реалізації функціоналу відкладеного завантаження зображень дуже багато. Я постарався розповісти про всі прості способи, які підійдуть вебмайстрам, використовують WordPress. На інших платформах також є свої рішення, які дозволять зробити lazy load на сайті. Треба просто пошукати на тематичних майданчиках або в каталогах.

Я сподіваюся, що ця стаття допомогла вам розібратися з цим питанням, і тепер у вас не буде проблем, якщо ви захочете реалізувати таке на своєму ресурсі.

Ну а якщо ви хочете навчитися заробляти на своєму сайті за допомогою різних способів, то я раджу вам звернути увагу на курс від Василя Блінова. У ньому автор розглядає створення блогу на WordPress від “А” до “Я”, розкриваючи всі секрети і особливості вебмастеринга. За посиланням вище ви знайдете більш детальну інформацію.