Speed optimization is one of the ultimate goals of every store. That's why when trying to пришвидшити Magento, you'll definitely come across lazy loading, one of the best ways to optimise images.
For those of you who don't know що таке ліниве завантаження, it is a loading technique that helps you to load only images available within users' viewport. This helps to improve page loading and deffer unnecessary resources.
Налаштування лінивого завантаження зображень не таке вже й складне, але іноді можуть виникнути проблеми з налаштуванням лінивого завантаження фонових зображень CSS. Саме над цим ми сьогодні й працюватимемо.
Як працюють розширення лінивого завантаження?
Перш ніж рухатися далі, нам потрібно переглянути основний принцип, який використовується в розширеннях Lazy Load, щоб навчитися застосовувати його до фонових зображень CSS.
За замовчуванням браузер завантажує зображення, додане в атрибут src тегу зображення під час завантаження сторінки:
Наприклад, якщо на вашу сторінку додано 50 зображень таким самим чином, як описано вище, усі вони будуть завантажені одночасно під час завантаження сторінки. Відповідно, це призводить до того, що сторінка завантажується довше.
Щоб запобігти цьому, реалізовано відкладене завантаження зображень. Зазвичай воно обробляється двома способами:
- замінюючи атрибут src з джерело даних, набір-джерел даних, або якийсь інший атрибут.
- замінюючи атрибут data-src з атрибут src JS під час завантаження сторінки або будь-якої іншої події JS, яка вказує на те, що зображення мають бути відображені.
Як відкладено завантажувати фонові зображення в Magento?
Тепер, коли ми розуміємо, як працює ліниве завантаження, давайте спробуємо ліниве завантаження наших фонових зображень.
У випадку, якщо ви використовуєте Розширення відкладеного завантаження Magefan ви можете просто відредагувати HTML-код і замінити цей рядок:
з
Розширення завантажить властивість фонового зображення CSS, яка використовується для відкладеного завантаження.
Якщо у вас немає Magefan Lazy Load або ви не хочете змінювати HTML, ви можете скористатися властивістю CSS background та дисплей: немаєБраузер не завантажуватиме зображення з CSS-властивості background, якщо цей блок має дисплей: немає:
Ви можете використовувати цей підхід у меню при наведенні курсора миші або кліку. Таким чином, коли відображаються пункти меню, браузер також завантажуватиме зображення, які там розташовані.
However, you should still keep in mind that lazy loading is not the only way to improve page speed. Try incorporating to reduce the size of images as well.
