Tags
налаштування

Налаштування Image Lazy Load - одна з чудових порад з оптимізації зображень Magento 2, яке дозволяє покращити швидкість завантаження веб-сайту та зменшити розмір сторінки, поступово завантажуючи зображення.

Як тільки ваші зображення будуть завантажені за допомогою lazy load, ви можете бути впевненими, що не буде затримки завантаження сторінки, щоб ваші клієнти отримували лише найкращі враження.

Зміст [приховати]

  1. Як налаштувати image lazy load у Magento 2:
  2. Як вказувати lazy load blocks?

Як налаштувати 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.

Lazy load images in Magento 2

4. Виберіть Method, який ви хочете використовувати для відкладеного завантеження. Ви можете вибрати Non-jQuery JavaScript Library або Native Browser Lazy Loading.

5. Ввімкніть опцію Include Noscript HTML tag, якщо ви хочете відображати відкладено завантажені зображення, навіть коли JS вимкнено в налаштуваннях браузера.

Lazy load configuration Magento

Як вказувати 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 -->

Приклад:

Magento 2 Image Lazy Load

Після збереження налаштувань не забудьте протестувати lazy load images. Однак зауважте, що деякі зображення можуть бути прописані в CSS, тому вам також потрібно застосувати lazy load для фонових зображень в CSS.