Jump to content

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

Version number: 1.0.0

500.00 RUB

   (0 reviews)
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.х

4 Screenshots

About This File

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

 

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

 

ЗАЧЕМ

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

 

Для сравнения, я замерял демо сайт, где на странице с 6 видео page speed показывает пк-моб 49/33 без модуля. После включения модуля результат вернулся в зеленую зону и показывает 92/75.

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

 

 

 

 

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

 

ВОЗМОЖНОСТИ

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

 

ДЕМО

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

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

 

ОСОБЕННОСТИ

  • будет работать на всех шаблонах
  • максимально легкий модуль без зависимостей (всего пару строк 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

 




  • 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.