Що таке Lazy Loading у Magento 2?

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

Lazy loading (відкладене завантаження) — техніка оптимізації продуктивності вебсторінок. Вона покращує показники швидкості завантаження і знижує споживання ресурсів. Ця методологія актуальна для інтернет-магазинів із великою кількістю контенту.

Lazy loading — процес завантаження ресурсів вебсторінки (зображень, відео, скриптів) тільки в міру їхньої необхідності. Замість того щоб завантажувати всі елементи сторінки одразу під час відкриття, ресурси завантажуються поступово, у міру того як користувач скролить сторінку й наближається до цих елементів. Це зменшує час початкового завантаження сторінки та покращує показники продуктивності.

Як працює lazy loading?

Технологія lazy loading працює таким способом:

1. Визначає зони видимості (viewport). Браузер визначає видиму зону екрана користувача — це та частина сторінки, яка відображається на екрані.
2. Ідентифікація відкладених ресурсів. Елементи поза видимої зони позначаються як «відкладені» (lazy-loaded). Ці елементи містять спеціальні атрибути, які вказують, що їх потрібно завантажувати лише за необхідності.
3. Моніторинг прокручування. Браузер відстежує прокручування сторінки користувачем. Коли юзер прокручує сторінку вниз і наближається до відкладених елементів, вони потрапляють у видиму зону.
4. Завантаження ресурсів. Як тільки відкладені елементи потрапляють у видиму зону, починається їхнє завантаження. Це відбувається асинхронно. Основні елементи сторінки продовжують працювати без затримок.

Типи lazy loading

Є пара варіантів реалізації функції lazy loading:

1. Відкладене завантаження зображень. Найпоширеніший тип lazy loading. Зображення завантажуються лише тоді, коли користувач наближається до них. Це корисно для сайтів із великою кількістю зображень, адже зменшує навантаження на сервер і браузер.
2. Відкладене завантаження відео. Відеоконтент може бути завантажений за потреби, що знижує навантаження на смугу пропускання і покращує продуктивність сторінки.
3. Відкладене завантаження скриптів. JavaScript та інші скрипти можуть завантажуватися асинхронно або відкладатися доти, доки вони не будуть справді необхідні. Це зменшує час початкового завантаження та покращує загальну продуктивність сторінки.

1. Зменшуйте час завантаження сторінки

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

Як працює:

• Під час завантаження сторінки браузер спочатку завантажує тільки ті елементи, які видно користувачеві.
• Елементи за межами видимої зону (viewport), завантажуються, коли користувач скролить сторінку вниз і наближається до них.
• Це скорочує обсяг даних, які потрібно завантажити насамперед, зменшуючи затримку перед появою контенту на екрані.

2. Поліпшуйте користувальницький досвід

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

Переваги для UX:

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

3. Збережіть bandwidth та ресурси системи

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

Економія ресурсів:

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

4. Зменшіть bounce rates

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

Як відкладене завантаження зменшує bounce rates:

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

I. Використання вбудованих функцій Magento 2

Magento 2 підтримує базові функції для налаштування відкладеного завантаження зображень. Ось як це можна зробити:

1. Переходимо в адмін панель Magento 2:

• Входимо в адмін Magento 2.

2. Переходимо до розділу «Content» (Контент):

• У головному меню вибираємо «Content» (Контент) та «Configuration» (Конфігурація).

3. Налаштування зображень:

• Шукаємо секцію «Catalog» (Каталог) та вибираємо «Image Configuration» (Конфігурація зображень).
• Вибираємо опцію «Lazy Load Images» (Відкладене завантаження зображень) та вмикаємо її.

4. Зберігаємо зміни:

• Натискаємо кнопку «Save Config» (Зберегти конфігурацію), щоб застосувати зміни.

II. Використання сторонніх розширень

Для гнучкого налаштування відкладеного завантаження Magento 2 використовують сторонні розширення, що доступні на Magento Marketplace.

1. Пошук розширення:

• Переходимо на Magento Marketplace та шукаємо розширення для lazy loading.

2. Вибір та встановлення розширення:

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

3. Налаштування розширення:

• Після встановлення переходимо до його налаштування через адмін панель Magento 2.
• Налаштовуємо параметри відкладеного завантаження відповідно до вимог: вибір елементів для відкладеного завантаження (зображення, відео тощо), налаштування порогів завантаження та інших параметрів.

III. Налаштування через кастомні скрипти

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

1. Вибір бібліотеки:

• Популярні бібліотеки для відкладеного завантаження включають lazysizes і Lozad.js. Ці бібліотеки легко інтегрувати та налаштовувати.

2. Інтеграція бібліотеки:

• Завантажте обрану бібліотеку й додайте її файли у ваш проєкт Magento 2.
• Включаємо бібліотеку в шаблон вашого сайту. Відкриваємо файл layout XML або PHTML вашого шаблону й додаємо посилання на скрипт бібліотеки.

3. Налаштування атрибутів завантаження

• Додаємо потрібні атрибути до зображень та інших елементів, які потрібно завантажувати у відкладеному форматі.

4. Налаштування бібліотеки:

• Налаштовуємо параметри бібліотеки відповідно до вимог. Наприклад, ви можете налаштувати пороги завантаження, ефекти анімації тощо.

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

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