CS-Cart Модуль "Отложенная загрузка изображений" позволяет отложить загрузку скрытых и выходящих за пределы экрана изображений. Это значительно увеличивает скорость загрузки страницы и взаимодействия с сайтом, а также является важным требованием оптимизации скорости по Google Page Speed Insights, что дает до 30 очков к скорости и положительно сказывается на ранжировании.
Стандартная установка добавляет отложенную загрузку на следующие объекты:
- Баннеры главной страницы
- Изображения товаров в блоках и на страницах категорий
- Изображение товара на детальной странице товара
Для добавления отложенной загрузки тегу <img> нужно добавить класс "csc-lazy" и поменять атрибут "src" на "data-src" не меняя значение. Например
<img data-src="https://s1.1zoom.ru/big3/297/Canada_Mountains_Scenery_488936.jpg" class="csc-lazy">
Если изображение добавляется через css свойство background, то нужно убрать свойство background-image: url и добавить атрибут data-bg="url, например
<div class="csc-lazy" data-bg="url(https://godovas.ru/images/abt__yt_banners/57/baner1.jpg)">
Чтобы увидеть работу модуля прокрутите главную страницу до низу, и вы увидите загрузку трех (по очереди) больших изображений. Для наглядности можно также ориентироваться на скроллер справа, который меняется в размере при прогрузке нового изображения.
No posts found