Налаштування Image Lazy Load - одна з чудових порад з оптимізації зображень Magento 2, яке дозволяє покращити швидкість завантаження веб-сайту та зменшити розмір сторінки, поступово завантажуючи зображення.
Як тільки ваші зображення будуть завантажені за допомогою lazy load, ви можете бути впевненими, що не буде затримки завантаження сторінки, щоб ваші клієнти отримували лише найкращі враження.
Як налаштувати image lazy load у Magento 2:
1. Встановіть розширення Magento 2 Image Lazy Load від Magefan.
2. Підіть в Stores > Configuration > Magefan Extensions > Lazy Load та увімкніть розширення.
3. Вкажіть блоки Lazy Load Blocks, для яких зображення слід завантажувати за допомогою lazy load та визначте скльіи перших зображень з цих блоків виключити з lazy load у полі First Images To Skip.
4. Виберіть Method, який ви хочете використовувати для відкладеного завантеження. Ви можете вибрати Non-jQuery JavaScript Library або Native Browser Lazy Loading.
5. Ввімкніть опцію Include Noscript HTML tag, якщо ви хочете відображати відкладено завантажені зображення, навіть коли JS вимкнено в налаштуваннях браузера.
Як вказувати lazy load blocks?
- Назва блоку в XML-макеті, напр.:
product.info.details
- Назва файлу шаблону блоку. напр.:
Vendor_Module::folder/file.phtml
- Назву класу блоку, напр.:
\Magento\CatalogWidget\Block\Product\ProductsList\Interceptor
- Щоб увімкнути відкладене завантаження зображень для CMS блоків в Magento 2, у вміст блоку слід додати цей HTML-коментар:
<!-- MAGEFAN_LAZY_LOAD -->
Приклад:
Після збереження налаштувань не забудьте протестувати lazy load images. Однак зауважте, що деякі зображення можуть бути прописані в CSS, тому вам також потрібно застосувати lazy load для фонових зображень в CSS.
