Налаштування відкладеного завантаження зображень – це одна з чудових функцій поради щодо оптимізації зображень у Magento 2 , яка дозволяє покращити швидкість завантаження веб-сайту та зменшити розмір сторінки, поступово завантажуючи зображення.
Після того, як ваші зображення завантажено в режимі відкладеного завантаження, ви можете бути впевнені, що не буде жодної затримки під час завантаження сторінки, спричиненої зображеннями, щоб ваші клієнти отримали найкращий користувацький досвід.
Як налаштувати відкладене завантаження зображень у Magento 2?
Спочатку вам потрібно встановити розширення від Magefan. Потім перейдіть до розділу Магазини > Налаштування > Розширення Magefan > Відкладене завантаження зображень та , щоб увімкнути його . Ви можете вибрати один із двох варіантів. Давайте поговоримо про обидва детальніше.
Відкладене завантаження всіх зображень веб-сайту
Все, що вам потрібно зробити для відкладеного завантаження всіх зображень веб-сайту, це вибрати відповідний варіант у полі вибору Блоки для відкладеного завантаження . Однак, якщо ви хочете виключити деякі зображення з відкладеного завантаження, визначте їх у розділі Блоки відкладеного завантаження та вкажіть, скільки Перших зображень з цих блоків Пропустити.
Відкладене завантаження вибраних зображень веб-сайту
Якщо ви хочете відкладено завантажувати лише деякі певні зображення, виберіть Вибрані у полі вибору Блоки для відкладеного завантаження . Потім вкажіть блоки із зображеннями, які ви хочете відкладено завантажити, у полі Блоки відкладеного завантаження . Крім того, ви можете пропустити перші зображення з цих блоків, щоб вони не були завантажені ліниво.
Налаштувати інші параметри
Нарешті, виберіть, який метод використовувати для лінивого завантаження. Ви можете вибрати Бібліотека JavaScript, що не є jQuery або Відкладене завантаження Native Browser. Потім увімкніть опцію Включити тег Noscript HTML , якщо ви хочете відображати зображення, що завантажуються ліниво, навіть коли JS вимкнено в налаштуваннях браузера.
Як визначити блоки лінивого завантаження?
У полі Блок лінивого завантаження ви можете визначити:
- Ім'я блоку в макеті XML, наприклад:
product.info.details
- Ім'я файлу шаблону блоку. наприклад:
Vendor_Module::folder/file.phtml
- Назва класу блоку, наприклад:
\Magento\CatalogWidget\Block\Product\ProductsList\Interceptor
- Щоб увімкнути відкладене завантаження зображень для Magento 2 CMS Blocks, у вміст блоку слід додати цей HTML-коментар:
<!-- MAGEFAN_LAZY_LOAD -->
Приклад:
Не забудьте тестування зображень з відкладеним завантаженням після збереження налаштувань. Однак зверніть увагу, що деякі зображення можуть бути написані на CSS, тому вам також потрібно застосувати ліниве завантаження для фонових зображень CSS .
