Підтримайте 
Оптимізація швидкості є однією з головних цілей кожного магазину. Ось чому, намагаючись покращити швидкість Magento, ви точно зустрінетеся з відкладеним завантаженням (lazy loading), одним із найкращих способів оптимізації зображень.
Для тих із вас, хто не знає, що таке lazy loading, варто зазначити, що це метод, який дозволяє завантажувати лише зображення, доступні у вікні перегляду користувачів. Це допомагає покращити завантаження сторінок і відкласти завантаження непотрібних ресурсів.
Налаштування відкладеного завантаження зображень не є складним, проте у вас інколи можуть виникати труднощі під час налаштування відкладеного завантаження фонових зображень в CSS. І це саме те, з чим ми сьогодні будемо працювати.
Зміст [приховати]
Як працюють розширення Lazy Load?
Перш ніж рухатися далі, нам потрібно пригадати основний принцип, який використовується в розширеннях Lazy Load, щоб навчитися застосовувати його до фонових зображень в CSS.
За замовчуванням браузер завантажує зображення, додане в атрибут src тегу зображення під час завантаження сторінки:
<img src="image.jpg" />
напр. якщо ваша сторінка має 50 зображень, доданих за допомогою описаного вище способу, усі вони завантажуватимуться одночасно. Це відповідно призводить до довшого завантаження сторінки.
Саме для уникнення таких проблем використовується відкладене завантаження. Зазвичай цей процес відбувається двома способами:
- заміна атрибута src на data-src, data-srcset, або ж певні інші атрибути.
- заміна атрибута data-src на атрибут src за допомогою JS під час завантаження сторінки або будь-якої іншої JS події, яка вказує на те, що зображення мають відображатися.
Як використовувати lazy load для фонових зображень в Magento?
Отож, тепер ми розуміємо, як працює відкладене завантаження і можемо спробувати застосувати його до наших фонових зображень.
Якщо ви використовуєте розширення Lazy Load від Magefan, тоді можете просто відкоригувати HTML і замінити такий рядок:
на
Розширення завантажить фонове зображення CSS за допомогою lazy loading.
Якщо у вас немає модуля Lazy Load від Magefan або ви не хочете змінювати HTML, ви можете скористатися властивістю (property) фонового CSS і display:none. Браузер не завантажуватиме зображення з властивості фонового CSS, якщо цей блок має display:none:
Ви можете використовувати цей спосіб у меню, навівши мишу або клацнувши нею. Таким чином, коли відображаються пункти меню, браузер також завантажуватиме зображення, які там розташовані.
Однак слід пам’ятати, що відкладене завантаження — не єдиний спосіб покращити швидкість сторінки. Спробуйте застосувати зображення webp, щоб також зменшити розмір зображень.