Оптимизация youtube роликов на сайте

Ускоряем сайт с вставленными роликами с ютуба

Как ускорить загрузку страницы с множеством ютуб роликов?

Youtube – 11 requests ≈ 580kb

Видеоролики youtube конечно хороши, их очень просто вставлять на сайт с помощью виджетов или прямиком в iframe, однако мало кто задумывается о том сколько грузится лишнего кода с каждым роликом и отправляется лишних запросов.

У одного клиента было на главной странице более 40 роликов, в результате сайт грузился долго ужасно долго. Если у вас такая же проблема, опишу решение которое помогло мне.

В этом нам поможет бесплатный плагин Lazyframe, который можно скачать на https://github.com/vb/lazyframe

Что делает Lazyframe?

  • грузит только те виджеты и их код по которым кликнул сам пользователь, что позволяет сократить вес страницы
  • позволяет вставить свою картинку-заставку
  • подгружать блоки с картинками заставками с помощью lazyload, то есть только тогда когда оно будет прокручено и попадет в поле видимости.

Это все позволяет существенно снизить нагрузку и ускорить сайт.

Подключение и настройка?

Добавить CSS стили плагина куда-нибудь на страницу, лучше конечно это сделать между <head></head> таким образом:

<link rel="stylesheet" href="/lazyframe.css">

Вставить сам скрипт на сайт например в подвал сайта перед закрывающим тегом </body>

<script src="/lazyframe.min.js"></script>

И в любом месте добавить инициализацию скрипта:

<script>lazyframe('.lazyframe');</script>

А сами видеоролики добавлять на страницу по такому шаблону:

<div
    class="lazyframe" 
    data-vendor="youtube"
    data-title="Подпись"
    data-thumbnail="/адрес_картинки_заставки"
    data-src="ссылка на ютуб ролик"
    data-ratio="1:1"
    data-initinview="false">
</div>

Лично я использую такой вариант:

<div  class="lazyframe"
      data-src="https://www.youtube.com/embed/A0N46FxiOog"
      data-vendor="youtube"
      data-thumbnail="/images/1v.jpg">
</div>

Заставку к видео как вы заметили я подключил свою через data-thumbnail=”/images/1v.jpg”, но можно ее подгружать и автоматически из youtube, для этого нужно иметь API ключи от ютуба, получить их можно здесь: https://console.developers.google.com/
Но в таком случае инициализацию скрипта вам необходимо делать так:

<script>
    lazyframe('.lazyframe', {
      apikey: 'AIzaSyDQxRfx3HQrE0_oTFI2WHzoiGL_CM0JJfQ' //Ваш API ключ
    });
  </script>

Проверить работу можно здесь… www.heihestoma.ru

Сам скрипт также можно скачать и отсюда

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

16 − = 15

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: