Как ускорить загрузку страницы с множеством ютуб роликов?
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
Сам скрипт также можно скачать и отсюда
