Lazy Loading

Що таке Lazy Loading?

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

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

Загальні переваги lazy loading

Оскільки головна мета lazy loading — оптимізувати завантаження елементів лише тоді, коли вони використовуються, є численні переваги, які можна підсумувати як:

• ›Швидкість показу головних елементів сайту.
• ›Значне покращення користувацького досвіду на сайті (UX).
• ›Покращена продуктивність на мобільних пристроях, особливо коли вони мають обмежені мережеві ресурси; активний Lazy Loading дозволить серфінг сторінок, що за такого поганого покриття інакше були б непридатними.
• ›Загальна й тотальна оптимізація ресурсів, як-от CPU, RAM і батарея на мобільних пристроях.
• ›Збільшення часу перебування на наших сторінках, через відсутність проблем із завантаженням, опосередковано перетворюється на покращення ранжування.
• ›Зменшення bounce rate.

Аналогічно, програмний підхід lazy loading має переваги й новинки з більш технічної точки зору:

• ›Lazy loading повністю сумісний з JS-фреймворками, як-от React і Angular, а також з CMS-платформами, як-от WordPress. Насправді нещодавно повідомили, що lazy loading для зображень буде включено за замовчуванням у WordPress версії 5.5.
• ›Завдяки API IntersectionObserver він не приховує зображення від пошукових систем.
• ›Підтримка кількох типів контенту, як-от зображення та responsive-класові ресурси.
• ›Дозволяє індексувати зображення сайту, що життєво для SEO.
• ›Це 100% SEO Friendly ресурс, оскільки безпосередньо й опосередковано покращує багато ключових пунктів у SEO.

Як реалізувати lazy loading у WordPress?

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

Перегляд найвидатніших плагінів WordPress для реалізації lazy loading.

Щоб провести цю реалізацію, маємо кілька варіантів:

• ›Обрати конкретний плагін lazy loading, як-от «Lazy loader», «a3 lazy load»…
• ›Обрати плагін вебоптимізації, як-от «WP Rocket», який уже має цю опцію за замовчуванням разом з іншими покращеннями.

SEO-аспекти, пов'язані з Lazy Loading

Уже знаємо головну місію відкладеного завантаження і його ключові переваги, і як це впливає на покращення продуктивності нашої сторінки, нашого UX і SEO.

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

Наприклад, lazy loading використовує кеш для покращення швидкості, тож якщо там зберігається забагато контенту, можуть виникати уповільнення чи помилки при неправильній реалізації, навіть заважаючи Google індексувати сторінки й елементи, що може мати серйозний вплив на ранжування сайту. Деякі поради:

• ›Оптимізуйте кеш і робіть розумне його використання.
• ›Використовуйте Google Search Console, щоб перевіряти контент, який Google краулить на сайті.
• ›Додавайте ALT-текст, щоб кожне зображення можна було індексувати Google.
• ›Завжди використовуйте API IntersectionObserver.
• ›Додавайте атрибут loading до iframe чи вбудованого контенту з інших сторінок чи джерел завдяки функції Blink LazyLoad браузера Chrome. Стосується зображень, фото, відео, тексту й іншого контенту.

Lazy loading і UX

Коли йдеться про сайт, технічна й загальна оптимізація для пропозиції хорошого користувацького досвіду (UX) необхідна щодо часу завантаження, чуйності, використання ресурсів і загальної поведінки. Якщо сайт не дуже чуйний, його bounce rate буде високим, а якщо він пропонує поганий користувацький досвід — це впливатиме на трафік, видимість і навіть SEO.

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

Native lazy loading (HTML) у Chrome

Демонструючи важливість, яку Google надає UX, з 2020 року і починаючи з версії 75 його браузера Chrome, можна додавати native lazy loading до HTML-тегів сторінки та їхнього мультимедійного контенту, як-от фото, відео тощо.

Так, додаючи HTML-атрибут lazy loading автоматично, браузер Chrome розуміє, що контент сторінки завантажуватиметься відповідно до навігації користувача, а не весь одразу, покращуючи швидкість і чуйність. Щоб ним користуватися, атрибут loading зі значенням lazy додається до кожного тегу візуальних і мультимедійних ресурсів, а також iframes:

<img src="image.jpg" loading="lazy" alt="..." />

<iframe src="video-player.html" loading="lazy"></iframe> Цей ресурс можна використовувати як в зображеннях, що становлять велику частину інформації, яку браузер має завантажити, так і в iframes; згадаймо, що ми використовуємо їх для вбудовування зовнішніх ресурсів у наш сайт.

Важливо виокремити використання в iframes, оскільки вони можуть бути критичними точками завантаження на нашому сайті.

З мінусів, native lazy loading сумісний лише з Chrome, хоч його використання можна реалізувати в інших браузерах через сумісні бібліотеки, у разі відсутності підтримки, як-от у Mozilla Firefox.

Використання Lazy loading

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

Маєте запитання про lazy loading чи хочете реалізувати його у своєму проєкті? Ми у вашому розпорядженні!

Документація й джерела:

• ›Lazy loading для зображень
• ›Lazy loading для відео
• ›Native lazy loading