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

Обновлено: 15 июля 2017

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Разрешите предложить вашему вниманию пост буквально в несколько абзацев. Проблема, которая тут решается, довольно для меня «больная», ибо уже много лет предпринимаю шаги по оптимизации скорости загрузки страниц сайта. Со временем проблема начинает переходить в стадию «навязчивой», но я пока держусь в рамках.

Как добавить видео на сайт

Очередной враг, обнаруженный мною на полях боев за миллисекунды загрузки страниц и число создаваемых при этом запросов — видео вставляемое на сайт с Ютуба, Фейсбука и других мест. Стало очевидно, что это враг. Если его со страницы убрать, то грузится все быстрее и шустрее.

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

Варианты вставки видеоролика с Ютуба, Фейсбука и т.п.


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

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

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

Второе решение вытекало из первого. Надо сделать все то же самое (размещать на странице только скрин ролика), но показывать видео уже не на другой странице, а на этой же самой и еще лучше в том же самом месте, чтобы вызывать иллюзии типа «все как обычно». Сделать это можно, на мой взгляд, только с помощью Джава-скрипта, что и было реализовано.

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

Но у данного метода есть несколько недостатков:

  1. Возня со всем описанным ниже вместо того, чтобы просто скопировать предлагаемый на видеохостингах код
  2. В браузерах пользователей должен быть разрешен Джава-скрипт. В противном случае видео они не посмотрят 🙁

Вставка видео на сайт с помощью джава-скрипта


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

  1. Скопировать код вставки (с нужным размером видео) и разместить его на странице, типа этого:
    <iframe width="710" height="399" src="https://www.youtube.com/embed/NHgSn6U9m5g" frameborder="0" allowfullscreen></iframe>
  2. Снять скрин с ролика (использовать картинку, которую, например, плеер Ютуба подгружает себе по умолчанию, не получается, ибо на ней нет кнопки запуска — того самого треугольника посередине, который и позволяет отличить ролик от простого изображения). Получится примерно так (пока еще не кликабельно — просто картинка):
    Скрин со вставленного на сайт видеоролика
  3. Далее я оптимизирую размер этого скрина и заливаю к себе на сервер (хостинг) по ФТП. На этом подготовительный этап закончен.
  4. Из кода вставляемого видеоролика я беру идентификатор (в моем примере это NHgSn6U9m5g) и переношу его в такую вот конструкцию (в какое место и так несложно догадаться):
    <div class="img_center1" onclick="$(this).replaceWith('<iframe width=\'100%\' height=\'400\' src=\'https://www.youtube.com/embed/NHgSn6U9m5g?autoplay=1&amp;rel=0\' frameborder=\'0\' allowfullscreen></iframe><br/>');"><img alt=""  src="http://ktonanovenkogo.ru//wp-content/uploads/video/image/chto-takoe-bitkoin.jpg" /></div>
  5. Туда же я добавляю путь до скрина, который сделал чуть ранее и залил на свой сервер (вставляю, естественно, в тег IMG). Класс img_center1 можете убрать, ибо это просто мой способ оформления картинок на сайте.

Доводим все до совершенства


Есть еще несколько нюансов. При клике по изображению (скрину) начинается подгрузка плеера и ролика стандартным образом. Но по умолчанию ролик обычно встает на паузу и пользователю придется еще раз кликать по нему для начала воспроизведения. Сие не есть хорошо.

А посему нужно настроить автовоспроизведение видео:

  1. Для видео-ролика на Ютубе это сделать довольно легко — нужно просто добавить autoplay=1 в строчку с источников видео тега Iframe (можно сразу после знака вопроса стоящего за идентификатором видео, либо после амперсанда &, являющегося разделителем между параметрами данного видео).
  2. Для ролика с Фейсбука пришлось поискать решение, но оно тоже нашлось. Причем вставить нужно тоже autoplay=1, но немного в другое место (см. в приведенном ниже примере):
    <div onclick="$(this).replaceWith('<iframe  src=\'https://www.facebook.com/plugins/video.php?autoplay=1&href=https%3A%2F%2Fwww.facebook.com%2Fsmotriwow%2Fvideos%2Fvb.378858835552346%2F835234266581465%2F%3Ftype%3D3&show_text=0&width=715&height=400\' width=\'715\' height=\'400\' style=\'border:none;overflow:hidden\' scrolling=\'no\' frameborder=\'0\' allowTransparency=\'true\'  allowFullScreen=\'true\'></iframe>');"><img alt="Десерт" src="http://ktonanovenkogo.ru//wp-content/uploads/video/image/4.jpg" width="100%"/></div>

Как видите, автовоспроизведение и для видеоролика с Фейсбука замечательно работает:

Десерт

Где-то так примерно...

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Плюсануть
Поделиться
Отправить
Класснуть
Линкануть
Запинить
* Нажимая на кнопку "Подписаться" Вы соглашаетесь с политикой конфиденциальности.

Подборки по теме:

Рубрика: Скорость загрузки сайта

Комментарии и отзывы

Остап

Спасибо. А почему бы не использовать для тех же целей:

$(document).ready(function(){
document.write("Код видео");
});

Владислав

Дмитрий, добрый вечер!

Честно, удивили Вы меня данной статьей. Я никогда не думал, когда вставляю на свой сайт: alcostad.ru видеоролики, о проблемах в скорости загрузки страницы. За последние полгода я написал около 450 новых публикаций и страниц, видеоролики вставлял «безбожно» практически в каждую страницу.

Кстати, я являюсь подписчиком Вашего сайта, просматриваю Ваши публикации, пусть не все. Но для меня Вы Гуру в сайтостроении.

Не так давно, на анализаторе Сео Академия мне были даны рекомендации по оптимизации скорости загрузки сайта и в них про вмонтированные видеоролики вообще ничего не говорилось! Речь шла об особенностях шаблона вордпресс, об изображениях, о юридическом консультанте партнерки «Лидия».

Спасибо за информацию!

Дмитрий

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

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

Александр

Странно, но Firefox 52.2.1 (32-бит) не смог показать два видео, размещенных в конце вашего текста.

Владислав

Вчера отправил комментарий к этой статье на Ваш сайт. У меня еще вопрос:

1. я вставляю в тело контента просто код видео с Ютуба (Вордпресс), даже не активной ссылкой, а просто адрес видео, и он сразу начинает отображаться в тексте статьи при ее дальнейшем редактировании, автоматически корректируется размер видео в зависимости от ширины шаблона.

2. тогда какой смысл в том, чтобы окружать код адреса видео фреймами, дивами и прочим, если и так все корректно отображается.

3. вчера я говорил о том, что при анализе моего сайта (анализатор скорости загрузки и прочих параметров от СеоАкадемии) мне были даны кучи рекомендаций от них по оптимизации скорости загрузки, но о том, что видео с Ютуба вообще как-то нагружает сайт ничего не говорилось.

Остап

Дмитрий да $(document).ready (function (){}); это функция которая начинает загрузку находящегося в ней скрипта после полной загрузки DOM документа. То есть как минимум весь html код будет загружен прежде чем начнется загрузка видео. Я думаю для посетителей сайта это вполне подошло бы. Так как они смогут просматривать контент страницы не дожидаясь загрузки видео. У себя на сайте виджеты соц сетей я вставлял именно таким образом.

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

Остап

Владислав, проблема в том что если Youtube будет лежать или грузится слишком медленно, то посетители Вашего сайта не увидят контент пока не загрузится превюшка видео. Рекомендаций по таким моментам сервис не даст так как в момент проверки сервер Youtube всегда доступен. В общем то это уже оптимизированная оптимизация, 😉 и если у Вас молодой сайт то над такими моментами можете не заморачиваться.

Дмитрий

Остап: спасибо за разъяснения. Надо будет тоже к кнопкам соцсетей попробовать приметить такой способ.

Владислав

Спасибо Остап!

Я дилетант в этих вещах. Больше могу только писать статьи, просто видео с Ютуба очень значимое дополнение. Посещаемость сайта пока 2000, честно говоря времени разбираться в кодах для оптимизации у меня нет ни сил, ни знаний, ни времени. Тогда не останется времени на создание контента.

NMitra

Можно совсем без JS, только HTML: http://shpargalkablog.ru/2017/05/youtube-iframe.html

Вячеслав

Дмитрий, привет. Уже не первый раз замечаю, что после того, как я ищу на вашем блоге какую то инфу, а если ее нет, то начинаю разбирать ваш код по кусочкам)),то сразу же после этого, мне приходит на почту новый анонс вашей статьи ИМЕННО на эту тему. Вот и сейчас, за два дня до выхода статьи все перерыл по данной теме у вас, но не найдя подробностей, стал копировать с кода принцип работы роликов с подгрузкой после клика, но получилось немного коряво и тут опять статья... Это совпадение? или вы как то мониторите?, просто это уже не первый раз.

Вячеслав

NMitra

Это совсем другой вариант ты предлагаешь. В твоем случае загружается и картинка и фрейм, а в случае Дмитрия загружается только картинка, а фрейм только при клике.

NMitra

Фрейм то пустой. По сути такой же тег, как div. Страница Ютуб грузиться только после нажатия на картинку. Смысл тут сохраняется.

Анатолий

Для видео с Yotube уже давно решил эту же проблему с помощью плагина WP YouTube Lyte. Работает отлично, настройки минимальны: в панели настроек указываем желаемый размер видео (высоту и ширину), вставляем ссылку на видео в статье, заменяя https на httpv. Количество размещаемых в посте видеороликов не имеет значения. Единственное, что желательно сделать, — в качестве первью (своего изображения) к видео при загрузке на видеохостинг заранее ее оптимизировать (сжать) в любой программе, предназначенной для этого, или онлайн-сервисе.

Egor

Как видите, значение некоторых атрибутов можно с легкостью подправить под свои нужды. Прежде всего, это касается размеров отображаемого фрейма. Теперь осталось вставить его код в html вашего сайта. При этом главное учесть соразмерность окна вашего сайта и фрейма. Но если что-то пойдет не так, размеры можно легко подогнать.

Текст Вашего сообщения:

Подписаться на новые комментарии к этой статье

* Нажимая на кнопку "Добавить комментарий" или "Подписаться" Вы соглашаетесь с политикой конфиденциальности.