Проверить настройки Skip to content

Magento & jQuery Lazy Load Plugin. Ускоряем Magento

Скорость загрузки сайта, интернет магазина — это очень важно. Если сайт долго загружается посетителю в браузер, то теряем покупателя.

Как известно Magento (Мадженто) очень «тяжелая», как для хостинга, так и для браузера. Очень много JavaScript, CSS и картинок.

Если с JavaScript, CSS можно играться сжиманием. То для картинок такое не подходит. Конечно можно сделать качество картинки чуть ниже, но все  равно без фотографий товаров никак.

Особенно критичная скорость загрузки для главной страницы Magento (Homepage). Фото товаров много, а размер страницы оооочень большой….

 

Как сжать картинки в Magento?

Можно поставить качество для фотографий товара, например так:

setQuality(70)

Но не сильно помогает, фото все равно занимают много.

Можно попробовать подгрузку фото(картинок) по требованию. То есть фото загружается только когда пользователь будет видеть само фото. Если фотография находится внизу страницы, то будет загружена когда  посетитель сайта пролистает страницу вниз, фотография будет подгружена.

Для такого функционала, можно использовать JavaScript, jQuery

 

Плагин jQuery Lazy Load.

Конечно можно использовать Prototype и другие  фреймфорки JavaScript, но в данной статье расматривается jQuery Lazy Load.

Что потребуется?

  • Усановленый jQuery в Magento
  • Плагин jQuery Lazy Load

 

Вставим  подгрузку фото jQuery Lazy Load для главной страницы Magento (Homepage).

Добавим скрипт jquery.lazyload.js в  папку js/jquery

Изменим cms.xml. Ищем <cms_index_index translate=»label»> , и добавим в этот  тег следующий код

<reference name="head">
    <action method="addJs"><script>jquery/jquery.lazyload.js</script></action>
</reference>

таким образом js/jquery/jquery.lazyload.js будет подключен только на главной странице магазина на Magento.

 

Добавим настройки для тега <img>

<img alt="Magento" data-original="product-image.jpg"  src="loader.gif" class="lazy">

data-original — это картинка которая должна показыватся, loader.gif — это картинка которая показывается если фото не загружено

 

И JavaScript

 jQuery("img.lazy").lazyload();

 

Должно работать.  :)

Используя подгрузку фото, можно уменьшить размер страницы больше чем на половину!

Больше информации о jQuery Lazy Load

http://www.appelsiini.net/projects/lazyload

http://deanhume.com/Home/BlogPost/lazy-loading-images-with-jquery/22

 

 

 

Magento 1.*