Почему нельзя вставлять видео YouTube через iframe или как ускорить загрузку страниц сайта - Web-Global: Связывая миры через веб-технологии
Web-Global

Почему нельзя вставлять видео YouTube через iframe или как ускорить загрузку страниц сайта

Пост опубликован 6 апреля 2022 в 13:47 и находится в рубриках Js. 986
Поделиться:

При создании сайта под заказ или просто для своего проекта возникает проблема со скоростью загрузки видео. Часто Google PageSpeed Insights на данную проблему не реагирует, но при загрузке в браузере скорость загрузки страницы заметно падает. Я сейчас говорю именно о видео. О тех видео, которые мы берем с сервиса Youtube. В этой статье я рассмотрю способ, который действительно ускорит загрузку страницы, на которой находится много вставок видео с Youtube.

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

Как это использовать и результаты экспериментов

Эксперимент - как ускорить загрузки страницы отказавшись от iframe

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

Затем я решил просто сравнить количество HTTP запросов на странице, где нет вставок iframe, со страницей, где я для примера вставил несколько видеороликов. Я понимал, что этот способ действительно уменьшает время загрузки страницы, но был приятно удивлен, когда увидел, что загрузка уменьшается в десятки раз.

Об этом эксперименте с видеороликами вы можете прочитать ниже. Я часто пользуюсь своими же статьями, которые написал довольно давно, поэтому для удобства я приведу скрипты, стили и разметку, которая необходима для вставки видео этим способом. Чтобы когда вы зайдете на данную статью второй раз (из закладок, например), могли сразу воспользоваться необходимыми материалами.

Блок «СКОПИРОВАЛ-ВСТАВИЛ»

Автор этого кода Alexis Ulrich (ссылка на оригинал в конце статьи). А сейчас, собственно, сам код с небольшими пояснениями.

1 этап. HTML разметка

HTML КОД

<div class="youtube" id="0wCC3aLXdOw" style="width: 500px; height: 281px;"></div>

2 этап. CSS стили

Скачать изображение кнопки «Play» можно здесь — скачать кнопку «Play».

CSS КОД

.youtube {
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: all 200ms ease-out;
    cursor: pointer;
}
.youtube .play {
    background: url('../img/youtube-play-btn.png') no-repeat; /*ВАЖНО: здесь укажите адрес до изображения*/
    background-position: 0 -50px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    position: absolute;
    height: 50px;
    width: 69px;
    transition: none;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
.youtube:hover .play {
    background-position: 0 0;
}

3 этап. Javascript

JAVASCRIPT КОД

'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
    if (!document.getElementsByClassName) {
        // Поддержка IE8
        var getElementsByClassName = function(node, classname) {
            var a = [];
            var re = new RegExp('(^| )'+classname+'( |$)');
            var els = node.getElementsByTagName("*");
            for(var i=0,j=els.length; i < j; i++)
                if(re.test(els[i].className))a.push(els[i]);
            return a;
        }
        var videos = getElementsByClassName(document.body,"youtube");
    } else {
        var videos = document.getElementsByClassName("youtube");
    }
    var nb_videos = videos.length;
    for (var i=0; i < nb_videos; i++) {
        // Находим постер для видео, зная ID нашего видео
        videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)';
        // Размещаем над постером кнопку Play, чтобы создать эффект плеера
        var play = document.createElement("div");
        play.setAttribute("class","play");
        videos[i].appendChild(play);
        videos[i].onclick = function() {
            // Создаем iFrame и сразу начинаем проигрывать видео, т.е. атрибут autoplay у видео в значении 1
            var iframe = document.createElement("iframe");
            var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
            if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params");
            iframe.setAttribute("src",iframe_url);
            iframe.setAttribute("frameborder",'0');
            // Высота и ширина iFrame будет как у элемента-родителя
            iframe.style.width  = this.style.width;
            iframe.style.height = this.style.height;
            // Заменяем начальное изображение (постер) на iFrame
            this.parentNode.replaceChild(iframe, this);
        }
    }
});

Эксперимент со скоростью загрузки страницы на практике

Эксперимент со скоростью загрузки страниц

Ниже я описал 2 небольших эксперимента со скоростью загрузки страницы в зависимости от способа загрузки видео YouTube. Обратите внимание, насколько сильно отличаются цифры. Все тесты я проводил в браузере Chrome (версия 52.0.2743.116 m).

Для тестов я создал две страницы:

  • Страница #1 — здесь загрузка реализована тем способом, о котором рассказано в статье. То есть видео загружается только при клике.
  • Страница #2 — на этой странице я вставил видео обычным способом — через тег iFrame.

На протяжении двух тестов на страницах будут лишь добавляться видео.

ТЕСТ #1 — Количество видео на странице: 1

Сравнение скорости загрузки страницы с одним видеороликом

Подробное изображение со всеми запросами можно посмотреть по ссылкам:

Как видно из скриншота, на первой странице время загрузки меньше половины секунды. Оно и понятно, ведь на второй странице вдвое больше запросов. Даже на странице с одним видео заметна существенная разница. Если проанализировать запросы, то можно заметить, что на первой странице лишь 7 запросов, в то время как на второй их 15.

Но что же произойдет, если будет не одно видео, а несколько? Смотрите результаты второго эксперимента далее…

ТЕСТ #2 — Количество видео на странице: 5

Сравнение скорости загрузки страницы с одним видеороликом

Количество запросов для каждой из страниц:

Здесь разница колоссальная. Как во времени загрузки, так и по количеству запросов.

Я думаю становится понятно, что чем большее количество видео используется на странице, тем дольше будет осуществляться загрузка страницы.

ТЕХНИЧЕСКИЕ ОШИБКИ НЕ ДАЮТ РАСТИ В SEO?

Закажите полный разбор сайтапо SEO + консультациюПОСМОТРЕТЬ СТОИМОСТЬ

Сделайте аудит своего сайтасамостоятельно с помощью сервисаПЕРЕЙТИ НА СЕРВИС

Вывод

Также обязательно изучите плагин lazyYT.js. Он отлично подходит для решения этой задачи. Демо можно посмотреть здесь.

Скорость загрузки страниц — это постоянно больной вопрос. Многие пишут о том, что этот вопрос остро стоит именно в наше время. Но изучая литературу по созданию сайтов, которая написана в начале 2000-х, я сделал для себя вывод: даже в то время, когда страница загружалась примерно 10 секунд, о скорости загрузки беспокоились точно также, а может даже сильнее. Причина — приходилось отказываться от графической информации и других медиа на странице.

Способ вставки видео с YouTube, который мы рассмотрели в этой статье, действительно позволяет ускорить загрузку страниц сайта. Это видно даже на глаз. Поэтому попробуйте один раз применить это на своем сайте, и вы поймете все прелести данного способа.

К сожалению, прочитав статью, многие веб-мастера разочаруются. Возможно, они ждали именно плагина для какой-либо CMS (WordPress, Joomla и т.д). Ведь намного проще установить один плагин и наслаждаться результатом. Но увы, действительно оптимизированные вещи делаются зачастую вручную. Поэтому данный способ отлично подойдет для лендингов. Но кто запрещает на основе этого JS кода написать свой плагин для WordPress, например? 😉

Успехов!