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

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

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

  • кеширование
  • сжатие 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 и выбрать эффект появления изображений.

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

6 комментариев

    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

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

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

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

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