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

Здравствуйте, дорогие читатели блога MaratKX.ru. Не стоит и говорить о том, как скорость загрузки страницы влияет на настроение посетителей Вашего сайта. Если выразиться математическим языком, то зависимость здесь - обратно пропорциональная. В такой же зависимости находится и лояльность поисковых машин к вашей странице. Одной из причин увеличения времени загрузки может стать размещение на странице видеоролика с различных видео хостингов. Также тормозит загрузку бездумное размещение на странице различных изображений большого размера (объема).

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

Время загрузки видеоролика.

Возьмем, к примеру, 216-ти секундный ролик с ютуба. И вставим его в нашу страницу.

 <div class="embed-responsive embed-responsive-16by9">  <iframe src="https://www.youtube.com/embed/4Y5mTuVf2Ro?rel=0&showinfo=0&fs=0" frameborder="0" allowfullscreen"></iframe>  </div> 

Время загрузки страницы без видео составило: 0,2045 секунды, в то время, как страница с видео загружалась 0,3484 секунды. Таким образом, разница во времени составила приблизительно 15 сотых секунды.

Собственно, 15 сотых секунды, совсем немного, но ведь в данном случае, страница грузится почти в 2 раза дольше.

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

Варианты уменьшения времени загрузки видео.

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

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

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

Второй вариант, который плавно "вытекает" из первого. Необходимо сделать все также, как и первом случае (изначально показать только картинку - скрин ролика), но сам видеоролик показывать на этой же странице, лучший вариант - на этом же месте (вместо картинки). Таким образом, посетитель будет видеть все "как обычно". Помочь нам в данном случае будет призван Джава-скрипт.

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

Однако, и тут есть подводный камешек. Некоторые посетители до сих пор отключают Джава-скрипты у себя в браузере.

Если у посетителя отключен JavaScript.

Если у посетителя нашего сайта запрещено выполнение JavaScript, он будет кликать по нашей картинке безрезультатно. Дело в том, что в данном случае, при стандартном размещении видео, посетитель видит следующую картину:

"Хорошим тоном", с нашей стороны будет предупреждение посетителя о том, что он не сможет посмотреть видео на нашем сайте, без включения JavaScript. Мы, конечно, тоже можем отправить посетителя, в данном случае, на сайт видео хостинга. Лично я в таких случаях предпочитаю, просто уведомить посетителя о необходимости включить в браузере Джава-скрипты.

Если Вас не смущает, что переделать будет необходимо все страницы с видеороликами, вперед! Хотя, старые страницы можно оставить в покое, а новые сделать по новому.

Код для вставки видеороликов.

Итак, наша переделка будет выполняться в несколько шагов. Будут эти шаги простыми или сложными, решать Вам.

1. Нам нужен код видео для вставки на нашу страницу. В моем случае он уже есть:

 <iframe src="https://www.youtube.com/embed/4Y5mTuVf2Ro?rel=0&showinfo=0&fs=0" frameborder="0" allowfullscreen"></iframe> 

В данном коде, собственно ссылкой на видео является следующий кусок кода: https://www.youtube.com/embed/4Y5mTuVf2Ro. все что идет после - это параметры вывода видео на нашем сайте.

2. Теперь нам необходим скрин для видео, мне, например, больше нравится вот этот кадр:

3. Третьим шагом будет размещение "кнопки", которая позволит создать впечатления для посетителя, что это видео, а не простая картинка. Тут есть один момент, на роликах, при наведении цвет кнопки меняется, давайте сделаем так же.

Делаем меняющуюся кнопку.

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

 <style> /*стили для нашего треугольника*/  .button_play{  width:94px;  height:63px;  background: rgba(0,0,0,.5);  border-radius:157px/50px;  }  .button_play img{  margin:13px 31px;  }  </style>    <div class="button_play"> <!-- блок для нашего треугольника -->  <img src="путь к картике кнопки"> <!-- наш треугольник -->  </div> 

Вот такая кнопка у нас получилась. Осталось совсем немного. У нас уже есть все компоненты, теперь соберем их в кучу.

Сделаем блок, в который поместим наш скрин, а также кнопу запуска видео. При наведении на данный блок, с помощью css применим свойство, которое поможет изменить фон нашей кнопки. Да, и вот еще что, надо указатель мышки сделать в форме руки, чтобы посетитель понял, что можно жмакнуть по картинке.

Ну вот, уже стало похоже на видеоролик. Осталось только определиться с размерами. Так как я использую сетку Bootstrap, то о размерах, я лично, в данном случае, не задумываюсь. Ниже картинка вставлена уже с помощью сетки Bootstrap.

Вот код, с помощью которого мы все это имеем:

 <style>  /*стили для блока с картинкой*/  .viderolik{position:relative;}   /*указатель мыши в форме руки при наведении*/  .viderolik:hover{cursor:pointer;}   /*стили для нашего треугольника*/  .button_play{  width:94px;  height:63px;  background: rgba(0,0,0,.5);  border-radius:157px/50px;  }  .button_play img{margin:13px 31px;}   /*меняем фон кнопки при наведении*/  .viderolik:hover .button_play{background: rgba(255,0,0,1);}   </style>    <!-- Код HTML с использованием ращметки Bootstrap -->   <div class="row">  <div class="col-xs-12 col-sm-8 col-sm-offset-2">  <div class="embed-responsive embed-responsive-4by3">  <div class="viderolik">  <img src="путь к вашей картинке" class="img-responsive" >  <div class="button_play"> <!-- блок для нашего треугольника -->  <img src="путь к картинке кнопки"> <!-- наш треугольник -->  </div>  </div>  </div>  </div>  </div> 

4. Осталось только подключить загрузку при клике мышкой на картинке

За загрузку видео отвечает следующий код:

  <!-- Код HTML с использованием ращметки Bootstrap -->   <div class="row">  <div class="col-xs-12 col-sm-8 col-sm-offset-2">  <div class="embed-responsive embed-responsive-4by3">  <div class="viderolik"  onclick="$(this).replaceWith('<iframe src=\'https://www.youtube.com/embed/4Y5mTuVf2Ro?autoplay=1&rel=0&showinfo=0&fs=0\' frameborder=\'0\' allowfullscreen></iframe><br/>');"  >  <img src="путь к вашей картинке" class="img-responsive" >  <div class="button_play"> <!-- блок для нашего треугольника -->  <img src="путь к картинке кнопки"> <!-- наш треугольник -->  </div>  </div>  </div>  </div>  </div> 

Таким образом, чтобы получить загрузку видео, мы добавили реакцию на событие (клик мышки) к блоку с классом viderolik, которое вызывается следующей строкой:
onclick="$(this).replaceWith('<iframe src=\'https://www.youtube.com/embed/4Y5mTuVf2Ro?autoplay=1&rel=0&showinfo=0&fs=0\' frameborder=\'0\' allowfullscreen></iframe><br/>');" ,
которая заменяет содержимое блока и как раз вставляет видео.

Доводим результат до совершенного вида.

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

Так как все содержимое блока с классом viderolik будет заменено при клике, то заголовок вставим в этот блок, применив абсолютное позиционирование нашего заголовка. Для этого добавим стиль для нашего заголовка, я буду использовать <h3>

 <style>  /*стиль для заголовка видео*/  .viderolik h3{  position:absolute;  top:10%;  left:5%;  right:5%;  text-align:center;  color:#fff;  }  </style>   <!-- Код HTML с использованием ращметки Bootstrap -->   <div class="row">  <div class="col-xs-12 col-sm-8 col-sm-offset-2">  <div class="embed-responsive embed-responsive-4by3">  <div class="viderolik"  onclick="$(this).replaceWith('<iframe src=\'https://www.youtube.com/embed/4Y5mTuVf2Ro?autoplay=1&rel=0&showinfo=0&fs=0\' frameborder=\'0\' allowfullscreen></iframe><br/>');"  >  <img src="путь к вашей картинке" class="img-responsive" >  <h3>Попугай чистит винчестер!</h3>  <div class="button_play"> <!-- блок для нашего треугольника -->  <img src="путь к картинке кнопки"> <!-- наш треугольник -->  </div>  </div>  </div>  </div>  </div> 

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

В данном случае стили блока с надписью, оформим прямо в HTML.

 <!-- Код HTML с использованием ращметки Bootstrap -->   <div class="row">  <div class="col-xs-12 col-sm-8 col-sm-offset-2">  <div class="embed-responsive embed-responsive-4by3">  <div class="viderolik"  onclick="$(this).replaceWith('<iframe src=\'https://www.youtube.com/embed/4Y5mTuVf2Ro?autoplay=1&rel=0&showinfo=0&fs=0\' frameborder=\'0\' allowfullscreen></iframe><br/>');"  >  <img src="путь к вашей картинке" class="img-responsive" >  <h3>Попугай чистит винчестер!</h3>  <noscript>  <div style="position:absolute; text-align:center;left:5%;right:5%;bottom:5%;color:#fff;font-size:120%;background: rgba(0,0,0,.5);padding: 1%;"> Вы не сможете просмотреть данное видео, так как у Вас не включен JavaScript!  </div>  </noscript>  <div class="button_play"> <!-- блок для нашего треугольника -->  <img src="путь к картинке кнопки"> <!-- наш треугольник -->  </div>  </div>  </div>  </div>  </div> 

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

Ниже представлен конечный вариант вставки видео, отключите у себя в браузере JavaScript и сможете увидеть данную надпись.

Вот такая длительная получилась борьба за ускорение загрузки страниц, содержащих видеоролики. Помог нам в этом JavaScript ().

Удачи вам! До скорых встреч на страницах сайта MaratKx.ru