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