Jump to content
Seriusis

[Поддержка] YouTube lazy load & popup - оптимизация и кастомизация iframe, увеличение page speed

Recommended Posts

YouTube lazy load & popup - оптимизация и кастомизация iframe, увеличение page speed


YouTube lazy load & popup - оптимизация и кастомизация iframe, увеличение page speed


Модуль решает проблему долгой загрузки iframe с youtube и увеличивает page speed. Улучшает визуальную часть и дает возможность катомизации: отображение видео в popup, установка своих превью на видео, установка произвольной иконки "play",

 

Все вставки iframe с видео на вашем сайте перед выводом на страницу будут автоматически заменены на превью видео в виде изображений, которые подтягиваются с img.youtube.com/vi.

 

ЗАЧЕМ

Все знают, что iframe с видео очень сильно загружают страницу и уменьшают скорость загрузки сайта. Особенно это ощутимо (и даже визуально видно), если на странице несолько видео (каждый iframe это доп. запросы и ресурсы).

 

 

spacer.png

 

ССЫЛКИ НА ДЕМО

6 видео - разница 30-50%

Модуль выключен:

https://oc23.likedev.pro/6-video?disable-video-optim

и page speed 49/33 -  https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F6-video%3Fdisable-video-optim&tab=mobile 

Модуль включен  

https://oc23.likedev.pro/6-video

и page speed 92/75 -  https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F6-video 

Страница та же, только в первом случае добавлен параметр ?disable-video-optim , чтобы модуль не срабатывал и можно было увидеть разницу. 

 

1 видео - разница 10-30%

И даже с 1 видео показатель достаточно проседает, особенно для мобильных устройств

Модуль выключен:

https://oc23.likedev.pro/1-video?disable-video-optim 

и page speed 88/51https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F1-video%3Fdisable-video-optim&tab=desktop

Модуль вкючен:

https://oc23.likedev.pro/1-video

и page speed 96/80https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F1-video&tab=mobile

 

Админка https://oc23.likedev.pro/admin/   логин/пароль: demo/demo

 

 

Кроме того визуально намного симпатичнее превью с иконкой, чем ютубовский iframe, да и возможность открытия видео в popup тоже очень полезна. + мы можем через css стили кастомизировать превью как нам угодно.

 

ВОЗМОЖНОСТИ

  • видео по клику на превью
  • всплывающеее окно с видео по клику на превью
  • произвольные изображение для превью
  • выбор размера превью
  • установка своей иконки на кнопку 'play' (font awesome, html) и ее стилизация через css
  • возможно указать пути для исключения работы модуля
  • поля для камтомных стилей и js

 

 

ОСОБЕННОСТИ

  • будет работать на всех шаблонах
  • максимально легкий модуль без зависимостей (всего пару строк css и ванильного js, никаких библиотек)
  • будет работать даже без бутстрапа и jquery
  • открытый код

 

ПРИМЕНЕНИЕ

  • увеличение скорости загрузки и в результате лучший показатель page speed
  • кастомизация внешнего вида видео превью
  • вывод видео в popup позволить показывать ваши iframe даже на ограниченном пространстве
  • подмена превью на свои позволит поставить подходящие вам изображения для видео и украсить сайт

 

УСТАНОВКА

 

видео установки

(только тут фикс не нужен, остальное - так же)

Спойлер

 

 

Через установщик в админке загружаете архив модуля ocmod для своей версии опенкарт. 

Для версий 2.x убедитесь, что у вас уже установлен модификатор localcopy.ocmod, если его нет - установите.

 

 

ЛИЦЕНЗИЯ 

Лицензия выдается на один домен. Также при необходимости на тестовый поддомен. Для получения ключа обращайтесь в лс или на почту [email protected], сразу указывайте данные о покупке: номер заказа и домен

 

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

 

Также смотрите модули:

Accordion & Tabs & Steps, Faq & HowTo Microdata, any place & content

 

spacer.png

 


  • Добавил
  • Добавлено
    12.11.2020
  • Категория
  • Системные требования
  • Метод активации
    По запросу в ЛС
    По запросу на почту
  • Ioncube Loader
    Нет
  • OpenCart
    3.0
    2.3
    2.2
    2.1
    2.0
  • ocStore
    3.0
    2.3
    2.2
    2.1
  • OpenCart.Pro, ocShop
    Opencart.pro 2.3
    Opencart.pro 2.1
    OcShop 2.0.3.х
  • Обращение к серверу разработчика
    Нет
  • Старая цена
    500

 

Share this post


Link to post
Share on other sites

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

Подскажите, пожалуйста, после установки модуля - все сработает как указано в описании автоматически? Или нужно будет ручками что-то делать? 

На демке при нажатии на видео всплывает окно с видео, где нужно ещё раз его запустить. Одним кликом реально запустить видео? 

В карточке товара сработает? 

Edited by Sergeyy84

Share this post


Link to post
Share on other sites

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

 

1 час назад, Sergeyy84 сказал:

Подскажите, пожалуйста, после установки модуля - все сработает как указано в описании автоматически? Или нужно будет ручками что-то делать? 

если вставляете iframe обычным способом без каких либо оберток для адаптивности - все будет работать. Вручную ничего не менять.

 

1 час назад, Sergeyy84 сказал:

На демке при нажатии на видео всплывает окно с видео, где нужно ещё раз его запустить. Одним кликом реально запустить видео? 

 

 Конечно должно работать с 1 клика. На днях заметили такой баг, но я не успел выпустить обновление. Поправленную версию сброшу.  Модуль только выпустил, могут всплывають проблемы по мере покупок, но я на связи и оперативно исправляю.

Share this post


Link to post
Share on other sites
1 час назад, Sergeyy84 сказал:

В карточке товара сработает? 

Да, работает на всех страницах

Share this post


Link to post
Share on other sites

Модуль обновлен 

1.0.1

  • исправление ошибок
  • улучшение совместимости с разными вариантами iframe вставок
  • исправление ошибки autoplay

Share this post


Link to post
Share on other sites

.

Share this post


Link to post
Share on other sites
9 часов назад, pixel88 сказал:

В чем проблема?

Здравствуйте, не могу просмотреть на яндекс диске скрины, просьба в другом сервисе сделать

Share this post


Link to post
Share on other sites
Posted (edited)
Цитата

Здравствуйте, не могу просмотреть на яндекс диске скрины, просьба в другом сервисе сделать

При нажатии на установить где список модулей появляется следующая ошибка:

Parse error: syntax error, unexpected '.', expecting ',' or ';' in /var/www/u0206593/data/www/neoboi33.ru/admin/controller/extension/module/ldev_yt_iframe.php on line 22

 

Я и не знал что яндекс запретили у вас. Дублирую.

https://ibb.co/wLjxJjV

https://ibb.co/WznKzzH

Edited by pixel88

Share this post


Link to post
Share on other sites

.

Share this post


Link to post
Share on other sites
1 час назад, pixel88 сказал:

При нажатии на установить где список модулей появляется следующая ошибка:

Parse error: syntax error, unexpected '.', expecting ',' or ';' in /var/www/u0206593/data/www/neoboi33.ru/admin/controller/extension/module/ldev_yt_iframe.php on line 22

 

Я и не знал что яндекс запретили у вас. Дублирую.

https://ibb.co/wLjxJjV

https://ibb.co/WznKzzH

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

Share this post


Link to post
Share on other sites

Добрый вечер. У меня ocStore 2.3.0.2.3 шаблон UniShop v2.5.0.0. Установил дополнительный модификатор для данного шаблона для видео с YouTube во вкладке товара. Все работает но просели показатели по загрузке карточки товара пример https://my-kepka.com/panamy/letnyaya-panama-sparsil. Вопрос будет ли ваш модуль корректно работать с данной сборкой и не возникнут ли проблемы при установке а также повысит ли показатели загрузки страниц?

 

Share this post


Link to post
Share on other sites
11 часов назад, pchela78 сказал:

Добрый вечер. У меня ocStore 2.3.0.2.3 шаблон UniShop v2.5.0.0. Установил дополнительный модификатор для данного шаблона для видео с YouTube во вкладке товара. Все работает но просели показатели по загрузке карточки товара пример https://my-kepka.com/panamy/letnyaya-panama-sparsil. Вопрос будет ли ваш модуль корректно работать с данной сборкой и не возникнут ли проблемы при установке а также повысит ли показатели загрузки страниц?

 

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

Модуль будет работать, скорость загрузки вырастет, потому что каждое видео будет заменено на изображение. По установке - проблем быть не должно, но модуль ещё молодой, по этому все случаи невозможно предсказать.

Share this post


Link to post
Share on other sites

Установил модуль, все очень просто и легко. Скорость загрузки страниц товара с видео возросла. Модуль работает. Автору респект!

  • +1 1

Share this post


Link to post
Share on other sites
26 минут назад, pchela78 сказал:

Установил модуль, все очень просто и легко. Скорость загрузки страниц товара с видео возросла. Модуль работает. Автору респект!

спасибо, если будут вопросы - обращайтесь ) 

Share this post


Link to post
Share on other sites
Цитата

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

 

Все работает, спасибо за оперативность) Модуль рекомендую.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By Sha
      499.00 руб
      Скачать/Купить дополнение


      Layout Type, ускорение мобильной версии.
      Инструмент, который поможет ускорить мобильную версию OpenCart!
       
      Как сделать шаблон адаптивным? на мобильной версии скрыть "лишние" элементы.
      Нужно, что-бы при этом не пострадало usability? переместить модули и виджеты на другие позиции.
       
      Даже топовые шаблоны, поступают именно таким образом, элементы которые "не нужны" или наоборот необходимы только в мобильной версии: либо скрываются посредством css (display:none); либо перемещаются, хорошо если flexbox или bootstrap pull push но часто с помощью навешивания множества слушателей событий javascript. Даже адаптивность bootstrap основана на таких принципах.
      Всё это создаёт лишний "вес" и нагрузку, что конечно же замедляет работу сайта и заставляет процессор пользователя работать с повышенной нагрузкой шумя как майнинг ферма.
      Мы в наших продуктах пропагандируем использовать только то, что необходимо сейчас. И исходя из этих принципов нами был разработан
       
      модуль Мобильные схемы который поможет:
      уменьшить объём страницы (предотвратить чрезмерную нагрузку на сеть),  сократить размер структуры DOM, ускорить время окончания работы ЦП, избавится от лишнего JavaScript кода (сократить время выполнения кода JavaScript), избавится от css костылей,       а так-же:
      Устранить ресурсы, блокирующие отображение, Сократить время ответа сервера (время до получения первого байта, TTFB), Использовать подходящий размер изображений,  
           и др.
           при этом даже улучшив
       
      адаптивность, гибкость в настройке и дружелюбность Вашего сайта!  
       
      Поддерживает встроенные схемы популярных модулей, например поддерживает SEOCMS.
       
      Бесплатно модуль получить можно вместе с шаблоном Roundshop.
       
      данная версия поддерживает OpenCart 2.1.x, 2.2.x, 2.3.x, ocStore 2.1.x, 2.2.x, 2.3.x
      версию для Opencart 3.x, ocStore 3.x можно скачать здесь!
       
      Техническая поддержка
      доступна пользователям из списка покупателей и только после прочтения faq:
      Если вы обращаетесь с просьбой разобраться в проблеме, то для экономии времени укажите:
      адрес сайта доступ в админ-панель доступ на FTP-сервер  
      По любым вопросам вы можете связаться с нами через:
      Личные сообщения на форуме; Режим работы с 10-00 до 18-00 по киевскому времени за исключением выходных и праздничных дней.
       
       
      Добавил Sha Добавлено 13.03.2018 Категория Кэширование, сжатие, ускорение Системные требования Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х Обращение к серверу разработчика Нет Старая цена 0  
    • By Sha
      Инструмент, который поможет ускорить мобильную версию OpenCart!
       
      Как сделать шаблон адаптивным? на мобильной версии скрыть "лишние" элементы.
      Нужно, что-бы при этом не пострадало usability? переместить модули и виджеты на другие позиции.
       
      Даже топовые шаблоны, поступают именно таким образом, элементы которые "не нужны" или наоборот необходимы только в мобильной версии: либо скрываются посредством css (display:none); либо перемещаются, хорошо если flexbox или bootstrap pull push но часто с помощью навешивания множества слушателей событий javascript. Даже адаптивность bootstrap основана на таких принципах.
      Всё это создаёт лишний "вес" и нагрузку, что конечно же замедляет работу сайта и заставляет процессор пользователя работать с повышенной нагрузкой шумя как майнинг ферма.
      Мы в наших продуктах пропагандируем использовать только то, что необходимо сейчас. И исходя из этих принципов нами был разработан
       
      модуль Мобильные схемы который поможет:
      уменьшить объём страницы (предотвратить чрезмерную нагрузку на сеть),  сократить размер структуры DOM, ускорить время окончания работы ЦП, избавится от лишнего JavaScript кода (сократить время выполнения кода JavaScript), избавится от css костылей,       а так-же:
      Устранить ресурсы, блокирующие отображение, Сократить время ответа сервера (время до получения первого байта, TTFB), Использовать подходящий размер изображений,  
           и др.
           при этом даже улучшив
       
      адаптивность, гибкость в настройке и дружелюбность Вашего сайта!  
       
      Поддерживает встроенные схемы популярных модулей, например поддерживает SEOCMS.
       
      Бесплатно модуль получить можно вместе с шаблоном Roundshop.
       
      данная версия поддерживает OpenCart 2.1.x, 2.2.x, 2.3.x, ocStore 2.1.x, 2.2.x, 2.3.x
      версию для Opencart 3.x, ocStore 3.x можно скачать здесь!
       
      Техническая поддержка
      доступна пользователям из списка покупателей и только после прочтения faq:
      Если вы обращаетесь с просьбой разобраться в проблеме, то для экономии времени укажите:
      адрес сайта доступ в админ-панель доступ на FTP-сервер  
      По любым вопросам вы можете связаться с нами через:
      Личные сообщения на форуме; Режим работы с 10-00 до 18-00 по киевскому времени за исключением выходных и праздничных дней.
       
       
    • By RuslanLight
      Всем Здравствуйте!
      Вчера на моем сайте происходили какие-то чудеса.
      С середины дня сайт начал тормозить, зашел на хостинг и увидел что CPU перегружен до 125% (относительно тарифного плана хостинга).
      Изменений в коде ни в предыдущий ни в этот день не делались.
      При том что трафа, за этот день, в разы меньше чем было в декабря за один час. И в декабре таких глюков не было!
      Сначала начал грешить на сбой в парсинге модуля SimplePars. Выключил модуль. вырубил крон, удалил на хосте саму запись крона, обновил модификаторы, обновил кеш админки.
      Вроде попустило, но на пару минут, а потом продолжились скачки до 100-125%.
      Выключил вообще траф, всю ночь все равно были скачки с нагрузкой на CPU при почти полном отсутствии трафа (кроме ботов поисковиков кончено).
      Утром принудительно закешировал все страницы в JetCache и о чудо, попустило.
      И слайды:
      Всплеск необычной нагрузки на CPU, видно что в сравнении с предыдущим днем этот всплеск необычный - https://prnt.sc/wlyln0
      Всплеск процессов PHP, тоже необычно смотрится в сравнении с пред днем - https://prnt.sc/wlymgk
      Сразу скажу что проблем с хостингом нет, хостинг в декабре держал большую нагрузку в х10-20 раз, с тех пор особо ничего не поменялось, товары хоть и добавились (ок 15-20% от общего кол-ва), но и неактивных ушло столь-же. Но сапорт хостинга не смог дать вразумительный ответ кто грузит так проц, сказали толкьо index.php. Но через него идут по сути все процессы, поэтому что за паразит так "убивал" проц я не мог установить.

      В общем!
      Понимаю, что любую сложную систему надо оптимизировать персонально. В тч куча установленных модулей и темы, не может проходить бесследно.
      Поэтому, ищу специалиста(ов) который сможет оптимизировать/ускорить сайт по максимуму, снять нагрузку с сервера и ускорить сайт в принципе!
      OcStore 3.0.2.0
      тема - UltraStore 2.1.3
      JetCache v 18.1

      PS Сори за простыню! )
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.