Lazy Load - отложенная загрузка изображений для virtuemart

Опубликовано: 14 июня, 2016
Обновлено: 28 февраля, 2018
Категория: SEO оптимизация, Расширения для VirtueMart 2, Расширения для VirtueMart 3
Комментариев: 26

Увеличить скорость загрузки страницы можно разными способами:

  • кеширование
  • сжатие css и js файлов
  • оптимизация изображений
  • отложенная загрузка контента

В этой статье подробно разберем последний пункт и покажем, каких результатов можно добиться.

При использовании lazy load (ленивой загрузки) для изображений вес страницы становится меньше, поэтому страница начинает грузиться быстрее.

Принцип работы прост - изображения динамически подгружаются, как только попадают в область видимости пользователя. Например, браузеру не нужно сразу загружать все фото товаров из категории, достаточно загрузить и показать изображения для нескольких товаров, которые попадают на первый экран. Если на странице выводится много товаров, то это позволит значительно ускорить загрузку.

Интегрировать lazy load в virtuemart можно 2 способами:

  • вручную, внеся некоторые правки в шаблон
  • с помощью плагина, который позволит добить lazy load для всех изображений на сайте

Добавляем lazy load вручную

Существует множество скриптов, которые можно использовать для интеграции lazy load на сайт. Я использую echo.js. Сжатая версия скрипта весит всего 2 Кб. Пример работы можно посмотреть на этой странице.

Подключим скрипт на странице категории. На других страницах, на мой взгляд, нет особого смысла использовать ленивую загрузку. Если нужно добавить lazy load для всех изображений сайта, то лучше использовать плагин LLFJ - Lazy Load for Joomla!, о котором пойдет речь в следующем разделе.

Итак, скопируем файлы скрипта в папку шаблона /templates/имя_шаблона/echo/ .

Скачать

Заменим код вывода изображения в категории.

Для virtuemart 3

В файле /components/com_virtuemart/sublayouts/products.php заменим

на

Для virtuemart 2

В файле /components/com_virtuemart/views/category/tmpl/default.php заменим

на

Добавим вызов скрипта в самом конце файла /components/com_virtuemart/views/category/tmpl/default.php (для всех версий vm).

Скрипт имеет ряд настроек. Подробнее про все настройки можно почитать на этой странице.

В адресе замените имя_шаблона на название вашего шаблона.

offset - параметр смещения. Позволяет начинать загрузку изображений до того, как они попадут в область видимости. 100 - расстояние в px от области видимости, при котором начинается загрузка.

Ниже сравнительная таблица, полученная с помощью сервиса https://tools.pingdom.com. Для теста на странице выводилось 90 товаров.

Без echo.js C echo.js
Размер страницы 1500 kB 850kB
Время загрузки 7.07s 4.79s

Плагин LLFJ - Lazy Load for Joomla!

Чтобы обойтись без правок кода можно использовать готовый плагин LLFJ - Lazy Load for Joomla!

Скачать

Плагин совместим только с joomla 3 и позволяет очень гибко настроить ленивую загрузку на сайте.

Все настройки находятся в Расширения > Менеджер плагинов > System - LLFJ - Lazy Load for Joomla! > Settings

settings

Можно отключить lazy load для отдельных изображения, компонентов, страниц и поисковых роботов. Добавить fallback для пользователей с отключенным javascript и выбрать эффект появления изображений.

Выбирайте способ на свой вкус и сделайте ваш сайт чуточку быстрее 🙂

Плюс к отложенной загрузке изображений лучше всего оптимизировать (сжать) сами изображения. Оптимизированные изображения будут загружаться значительно быстрее. При этом никаких видимых изменений или потери качества изображений нет. Можно сжать каждую картинку на сайте вручную (к примеру, через Photoshop). Но при большом количестве изображений на сайте это занятие становится очень трудоемким и из-за этого практически невыполнимым. В этом случае придет на помощь сервис OptiPic.io - он позволяет оптимизировать процесс - находит и сжимает все изображения на вашем сайте. Подключается очень легко к сайту на любой CMS, фреймворку или даже самописном движке.
26 комментариев

    Tobi

    Отличная статья, спасибо, буду пробовать!

    NIKOLY

    Здравствуйте!
    скрипт выводит большое изображение

    <?php
    echo 'images[0]->file_url.'" alt="'.$product->product_name.'">';
    ?>

    возможно ли вывести миниатюру?

      admin

      admin

      Здравствуйте!

      Для вывода миниатюры попробуйте использовать код

    NIKOLY

    практически работает) выводит

    а миниатюры переименовываются под размер, т.е. по пути нет такой картинке есть kartinka_0x100.jpg

    Николай

    Упс, не прочитал чего написал, видемо тег img удалило)
    проблема такая получилась: виртуал март делая миниатюры переименовывает их и в данном случае

    миниатюры не загружаются т.к. в пути указана kartinka.jpg, а её нет есть kartinka_0x100.jpg

      admin

      admin

      Попробуйте этот вариант

        Igoralmaty

        При таком варианте все работает, но в некоторых разделах появляется ошибка:

        "0 - Call to undefined method VmMediaHandler::createThumb()"

          admin

          admin

          Скорее всего, в этих разделах есть картинки, формат которых не поддерживает virtuemart.
          Попробуйте поочередно отключать товары, чтобы найти тот, который вызывает проблему.

            Igoralmaty

            Данная ошибка появляется в случае если на странице присутствуют товары, у которых отсутствуют изображения. Тег img в данном случае выглядит следующим образом:
            Как обойти эту ситуацию, ведь в самой карточке картинка noimage.gif присутствует?

            admin

            admin

            Ошибка возникает при попытке сделать уменьшенную версию картинки.
            Попробуйте добавить дополнительное условие для вывода

            В этом условии можно проверить, например, имя картинки.
            Распечатайте массив, чтобы посмотреть какое точно имя у картинки.

            Igoralmaty

            Массив следующий:

            VmMediaHandler Object
            (
            [media_attributes] => 0
            [setRole] =>
            [file_name] =>
            [file_extension] =>
            [virtuemart_media_id] => 0
            [_foldersToTest:VmMediaHandler:private] => Array
            (
            [0] => images/stories/virtuemart/product/
            [1] => images/stories/virtuemart/product/resized/
            )

            [_actions:VmMediaHandler:private] => Array
            (
            )

            [_mLocation:VmMediaHandler:private] => Array
            (
            )

            [_hidden:VmMediaHandler:private] => Array
            (
            )

            [theme_url] => components/com_virtuemart/
            [virtuemart_vendor_id] => 0
            [file_title] =>
            [file_description] =>
            [file_meta] =>
            [file_class] =>
            [file_mimetype] =>
            [file_type] => products
            [file_url] => images/stories/virtuemart/product/
            [file_url_thumb] =>
            [published] => 0
            [file_is_downloadable] => 0
            [file_is_forSale] => 0
            [file_is_product_image] => 0
            [shared] => 0
            [file_params] => 0
            [file_lang] =>
            [created_on] =>
            [created_by] => 0
            [modified_on] =>
            [modified_by] => 0
            [file_url_folder] => images/stories/virtuemart/product/
            [file_path_folder] => images/stories/virtuemart/product/
            [file_url_folder_thumb] => images/stories/virtuemart/product/resized/
            [media_role] => file_is_displayable
            )

            Igoralmaty

            А имя у картинки noimage.gif, путь components/com_virtuemart/assets/images/vmgeneral

            admin

            admin

            Попробуйте вместо

            использовать

            Igoralmaty

            Всегда срабатывает else, проверено через:

            admin

            admin

            Замените

            на

    Stasweb

    В логах пишет
    404 GET /imidzhevaya-produktsiya/bejdzhi/templates/lik-astana/echo/blank.gif HTTP/1.0
    Хотя файл _lik-astana.kz/templates/lik-astana/echo/blank.gif есть.
    Почему он его так подключает

      admin

      admin

      Судя по коду не хватает файла по пути site.ru/imidzhevaya-produktsiya/bejdzhi/templates/lik-astana/echo/blank.gif

    Stasweb

    да но ссылка site.ru/templates/lik-astana/echo/blank.gif доступна и файл blank.gif отображается.
    вот мой код

    пробовал так

    так же не работает

      admin

      admin

      Надо смотреть непосредственно на сайте.
      Пришлите доступ к админке, доступ к сайту по ftp и описание проблемы на admin@virtuemart.su, посмотрю, что можно сделать.

    TYMON_krot

    Здравствуйте. А как правильно отключить в плагине LLFJ - Lazy Load for Joomla! ? Прописывал различные варианты, но что-то не срабатывает

      TYMON_krot

      отключить URL , а то не указал в сообщении

        admin

        admin

        Пришлите скрин настроек, которые не срабатывают.

    TYMON_krot

    Не знаю как в комментарий подключить скрин.
    пробовал так вписывать

    /my-cart
    my-cart
    modaparadise.ru/my-cart
    https://modaparadise.ru/my-cart

    Опция Toggle selection - Include URLs - Да

    Илья

    Ваш сайт просто космос! Спасибо за работу.
    Не подскажите, а как сделать ленивую загрузку для фоток подкатегорий?
    echo.js
    Заранее благодарен!

    Иван

    Сделал загрузку фото категорий так:
    в файле com_virtuemart/sublayouts/categories.php
    заменил

    на

    вроде работает

      admin

      admin

      Спасибо, что поделились решением.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

*
Для вставки кода заключите его в теги [php] [/php]
*

С 15-18 июня admin в отпуске.

Ответы на все вопросы и ссылки на товары будут присланы 19 июня.

Спасибо за понимание и хороших выходных.

×