Від автора: зображення складають цілих 65% всього веб-контенту, і час завантаження сайту легко може стати проблемою. Навіть при правильній оптимізації зображення можуть бути важкими. Це може негативно позначитися на часі, що люди будуть витрачати на очікування, щоб отримати доступ до чого-небудь. Швидше за все, відвідувачі не вытерпят і підуть кудись в інше місце, якщо ви не придумаєте рішення для завантаження зображень таким чином, щоб не заважати сприйняттю швидкості. У цій статті ви познайомитеся з 5 техніками ледачою завантаження, які зможете додати у свій набір інструментів для оптимізації користувальницького досвіду на сайті.
Що таке лінива завантаження?
При ледачою завантаження зображень на сайті завантажуються асинхронно, тобто після повного завантаження видимій частині сторінки або взагалі за умовою тільки при появі у вьюпорте. Це означає, що якщо користувач не долистает сторінку до кінця, зображення в нижній частині взагалі не завантажаться.
Даний підхід використовується на деяких сайтах, але особливо помітний на сайтах з великою кількістю зображень. Зайдіть на улюблену онлайн-майданчик фотографій у високому дозволі, і ви відразу ж зрозумієте, як сайт завантажує обмежену кількість зображень. По мірі прокручування вниз буде видно, як плейсхолдеры швидко замінюються на реальні зображення. Наприклад, зверніть увагу на завантажувач на сайті Unsplash.com: прокрутка цій частині сторінки у видиму частину екрану викликає заміну плейсхолдера фотографією високого дозволу:
Навіщо взагалі думати про ледачу завантаження зображень?
Є, як мінімум, дві чудові причини, чому варто подумати про використання ледачою завантаження зображень на вашому сайті:
Якщо ваш сайт відображає контент або дає користувачам який-небудь функціонал за допомогою JS, то завантаження DOM має вирішальне значення. Зазвичай скрипти чекають повного завантаження DOM перед виконанням. На сайті з великою кількістю зображень лінива завантаження (асинхронне завантаження) може стати вирішальним фактором того, чи залишиться користувач або покине сайт.
Більшість рішень по ледачою завантаженні завантажують зображення тільки, якщо користувач прокрутив сторінку до того місця, де воно потрапляє під вьюпорт. Якщо користувач ніколи не докрутити сторінку до цієї точки, зображення не будуть завантажені. Це значно економить трафік, за що більшість користувачів, особливо користувачі мобільних пристроїв і користувачі на слабких з’єднаннях, скажуть вам спасибі.
Отже, лінива завантаження зображень покращує продуктивність сайту, але як найкраще це зробити?
Ідеального способу не існує. Якщо вам подобається JS, то для вас не складе труднощів написати свій власний скрипт з ледачою завантаженні. Або ж можна знайти в мережі відповідні рішення та експериментувати з ними. Я зробив саме так і знайшов ці п’ять цікавих технік.
№1 Проста лінива завантаження і поява від David Walsh
David Walsh запропонував свій скрипт для ледачої завантаження зображень. Спрощена версія:
Атрибут src в тегу img замінюється на data-src:
В CSS елементи img з атрибутом data-src приховані. Після завантаження зображення плавно з’являються з допомогою переходів:
img {
opacity: 1;
transition: opacity 0.3 s;
}
img[data-src] {
opacity: 0;
}
Далі JS додає атрибут src до всіх img і дає значення відповідного атрибута data-src. Як тільки всі зображення завантажилися, скрипт видаляє атрибут data-з src тега img:
[].forEach.call(document.querySelectorAll(‘img[data-src]’), function(img) {
img.setAttribute(‘src’, img.getAttribute(‘data-src’));
img.onload = function() {
img.removeAttribute(‘data-src’);
};
});
David Walsh також пропонує фолбек на випадок, коли JS не спрацював. Фолбек можна подивитися в його блозі. Плюс цього рішення: легко реалізовується і ефективне.
З іншого боку, цей метод не включає в себе функціонал завантаження по прокручуванні сторінки. Іншими словами, браузер завантажує всі зображення, незалежно від того, прокрутив користувач сторінку чи ні. Сторінка завантажується швидше, так як зображення завантажуються після HTML. Тим не менш, ви не економите трафік.
№2 Лінива завантаження з прогресивним поліпшенням від Robin Osborne
Robin Osborne пропонує супер геніальне рішення на основі прогресивного поліпшення. У його методі лінива завантаження на JS вважається поліпшенням для звичайного HTML і CSS.
Чому саме прогресивне поліпшення? Якщо ви будете показувати зображення з допомогою JS, що буде, якщо JS відключити, або якщо виникне помилка, яка заблокує виконання скрипта? У такому разі без прогресивного поліпшення користувачі взагалі не побачать зображень. Не дуже добре.
Більш докладно з рішенням Osborne можна ознайомитися у Pen. Є ще один розширений Pen, де враховано випадок поломки JS.
У цієї техніки ряд переваг:
Техніка прогресивного поліпшення гарантує користувачам доступ до контенту.
Метод підходить не тільки під ситуації з недоступним JS, але і під ситуації, коли JS зламаний: всі ми знаємо, як можуть бути схильні до помилок скрипти, особливо в середовищі з великою кількістю запущених скриптів.
Працює лінива завантаження зображень прокручування. Якщо користувач не прокрутить сторінку до потрібного місця, зображення не завантажуються.
Метод не спирається на зовнішні залежності, тобто не потрібні фреймворки та плагіни.
Більш докладно з підходом Robin Osborne можна ознайомитися в його блозі.
№3 Lazy Load XT jQuery плагін
Швидка і проста альтернатива написання власної ледачою завантаження — JavaScript/jQuery плагін, який зробить всю найважчу роботу за вас.
Lazy Load XT – багатофункціональний jQuery плагін. Можна завантажити безкоштовно спрощену версію jquery.lazyloadxt.js, в якій доступна тільки лінива завантаження. Або ж можна використовувати розширену версію плагіна jquery.lazyloadxt.extra.js. У розширеній версії з допомогою ледачою завантаження можна завантажувати iframe, відео і всі теги з атрибутом src.
Щоб підключити Lazy Load XT проект, додайте jQuery-бібліотеку перед закриваючим тегом з посиланням на один з двох вищезгаданих файлів. Наприклад:
Не хочете використовувати jQuery, Lazy Load XT пропонує полегшений варіант – невеликий скрипт jqlight.lazyloadxt.min.js:
Замініть у документі зображеннях атрибут src на data-src:
Плагін може ініціалізується сам, або ж можна зробити це вручну. Наприклад, для ініціалізації елементів вибірки напишіть:
$(elements).lazyLoadXT();
Цей плагін додає безліч аддонов. Лише парочка:
Якщо додати jquery.lazyloadxt.spinner.css, то під час завантаження зображення можна відображати анімований спиннер.
Якщо підключити до проекту animate.min.css і написати цю рядок $.lazyLoadXT.onload.addClass = ‘animated bounceOutLeft’; в JS-файл, то можна додати всі ефекти для завантаження зображень з Animate.css. bounceOutLeft можна замінити на будь-який інший ефект.
Переваги Lazy Load XT і його аддонов:
Підтримується CDN, тобто не потрібно завантажувати скрипти Lazy Load XT на свій сервер.
Широка підтримка в браузерах, в тому числі в IE6-11 і Opera Mini.
Ліниву завантаження зображень можна використовувати на сторінці, в прокручуваному контейнері, в макетах з вертикальною і горизонтальною прокруткою. Сценаріїв нескінченно багато.
З допомогою аддонов можна створювати чудові плавні переходи, додати підтримку ретина екранів, ліниво завантажувати фонові зображення і т. д.
Можна ліниво завантажувати різні типи медіа.
В документації показано, як протидіяти випадкам з відключеним JS у браузері.
Не потрібно підключати повну jQuery-бібліотеку, щоб використовувати цей плагін.
Повний список варіантів і аддонов можна знайти в репозиторії azy Load XT на GitHub.
№4 bLazy.js –плагін на чистому JavaScript
bLazy – розумний JS-плагін ледачою завантаження. Більш конкретно: «bLazy – легкий скрипт ледачою завантаження (1.2 Кб минифицированная і стисла версія). Він дозволяє ліниво завантажувати і обслуговувати декілька зображень для економії трафіку і запитів на сервер. Якщо користувачі не будуть прокручувати всю сторінку, то сайт буде завантажуватися швидше» — Сайт bLazy
Цей невеликий незалежний плагін дозволяє:
Ліниво завантажувати вставляються і фонові зображення.
Завантажувати різні зображення залежно від розміру екрана і його дозволу.
Ліниво завантажувати з атрибутом src, наприклад, iframe, HTML5-відео, скрипти, ігри на unity і т. д.
Ліниво завантажувати зображення в прокручуваному контейнері.
Підтримувати старі браузери аж до IE7-8.
Використовувати CDN, щоб не розміщувати плагін на своєму сервері.
Базова реалізація. Розмітка:
Звичайний тег img потрібно змінити наступним чином:
Додати клас .b-lazy.
Використовувати плейсхолдер в якості параметра src. Для економії HTTP-запитів також можна використовувати инлайновые прозорі gif з кодуванні base64. Але будьте обережні, так у вас не буде кешування на наступних сторінках, де використовується одне і те ж зображення.
Атрибут data-src вказує на зображення, яке необхідно ліниво завантажити.
JS: введіть простий виклик bLazy і налаштуйте об’єкт на карті опцій:
var bLazy = new Blazy({
//опції
});
№5 Лінива завантаження з ефектом розмитого зображення
Якщо ви читаєте Medium, то повинні були помітити, як сайт завантажує головне зображення посту. Спершу ви бачите розмите зображення низької якості, поки завантажується версія з високою роздільною здатністю:
Розмитий плейсхолдер на сайті Medium
Ліниво завантажене зображення високої якості на сайті Medium
Можна декількома способами ліниво завантажувати зображення з таким цікавим розмитим ефектом. Мій улюблений – техніка від Craig Buckler. Плюси його рішення:
Продуктивність: всього 463 байта CSS і 1.007 байт минифицированного JS-коду.
Підтримка ретина екранів.
Немає залежностей: немає jQuery та інших бібліотек і фреймворків.
Використовується техніка прогресивного поліпшення для старих браузерів і поламаного JS.
Більш докладно з методом можна ознайомитися в статті «як створити свій власний завантажувач прогресивних зображень», а також завантажити код з репозиторію проекту на GitHub.
Висновок
От і всі, 5 способів ледачою завантаження зображень, з якими можна експериментувати у своїх проектах.
Який метод ваш улюблений? Як ви думаєте, лінива завантаження зображень покращує користувальницький досвід і продуктивність на сайті? Пишіть про це в коментарях.
