Авторизация:
Имя:

Пароль:

Поиск по сайту:

Поделиться:

Последнее на сайте:

Подписка на новости

Введите Ваш email:


Разделы:

рейтинг статьи: 4/5; голосов: 4; комментариев: 0

Главная > Создание сайта > Как ускорить скорость загрузки страницы с видео

17.07.2017

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

Добрый день, дорогие читатели моего сайта. Продолжаем разговор о скорости загрузки страниц сайта, то есть, об ее увеличении. Все уже прекрасно знают, как поисковые системы начали относиться к «медленным», в плане загрузки основной информации, интернет-проектам. Google запустил специальный сервис pagespeed inside для тестирования страниц. Для Яндекс этот показатель не так сильно важен. Но значение ему он тоже придает. В прошлых статьях мы говорили о способах увеличения скорости загрузки для мобильных устройств, но они важны и для десктопной версии сайта.

Как ускорить скорость загрузки страницы с видео

Сегодня постараемся научиться устанавливать видео, чтобы не замедлять загрузку сайтов. Как известно, любой запрос на сервер отнимает драгоценные миллисекунды, а если сервак находится на другом конце света, то сами знаете, чем это чревато. Поэтому, нужно стараться минимизировать количество запросов в коде вашего сайта на сервер. При загрузке видео также идет дополнительный запрос. Не важно, видео с Ютуба, Фейсбук или другого видеохостинга, важно, что при загрузке странице будет проходить дополнительный запрос на чужой сервер. Это зло, от которого нужно избавляться. Сегодня мы этим и займемся. Удалять видос не в коем случае не нужно, так как он может повысить время нахождения пользователя на странице, а это плюс в копилку вашего интернет-проекта.

 

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

  1. Делаем скриншот нужного видео. А именно, его анонса, так как привыкли видеть пользователи. Вместо кода самого видео ставим ссылку с этим скриншотом на другую страницу, где уже будет помещен код, который мы скопировали с Ютуб или Фейсбук. Тем самым мы сокращаем количество запросов при загрузке страницы. А пользователь видит такую же картинку, как и при обычном видео, только при нажатии на нее видео не запустится, а откроется в новом окне, а там опять нужно сделать клик, чтобы оно начало воспроизводится. С одной стороны не удобно для посетителей, но с другой – увеличиваем скорость загружаемого кода страницы

  2. Использование Java. В этом случае, мы оставляем скриншот, ссылку на видео, но сделаем так, чтобы пользователь мог его просмотреть не на другой странице, а на той же и в том же месте. Создается иллюзия работы стандартного кода YouTube (нажал и смотришь).

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

  1. Использование дополнительного Ява-скрипт кода. С которым нужно будет немного повозиться, вместо того, чтобы просто вставить скопированный код с видеохостингов. Об этом поговорим ниже

  2. Пользователи могут отключать запуск скриптов у себя в браузерах. Это значит, что ваш код не будет работать

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

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

 

Ускоряем загрузку видосов при помощи Java скриптов

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

  1. Копируем код для вставки на страницу, который предлагает Ютуб. Он имеет вот такой вид
  2. код видео с youtube

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

  4. На этом этапе делаем оптимизацию изображения при помощи программы IrfanView. Это необходимо, чтобы удалить из картинки все мета данные, из-за которых pagespeed будет матюкаться на них

  5. Модифицируем код, представленный ниже. В него вставляем идентификатор своего видео (он отмечен на крине выше). В тег «img» добавляем путь к картинке. Вносим изменения, которые отмечены на скриншоте ниже
  6. ускоряем загрузку страницы с видео роликом

  7. Вставляем полученный java-скрипт в код страницы в нужном месте. Здесь можете изменить размеры изображения в тегах «width» и «height». В результате мы получим работоспособную картинку, которая выглядит и работает как настоящий видеоролик

Но есть один нюанс. При нажатии на такую картинку видеоряд сразу не запустится, просто произойдет загрузка самого ролика. Чтобы пользователю повторно не пришлось нажимать на него (он может заподозрить подвох) нужно в код, представленный выше, вставить команду автозапуска «autoplay=1», в то место, которое указано на скриншоте выше (подчеркнуто красной полосой).

В результате мы получаем готовый ролик, который будет запускаться, как настоящее видео, а загружаться как обычная картинка:

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

 

Статьи по теме:

275

Оцените статью:

1 2 3 4 5
рейтинг: 4/5; голосов: 4

Зарегистрируйтесьили войдите под своим именем чтобы оставить комментарий