Как сделать html ссылку на видео в Youtube

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

Первый способ — использование прямой ссылки на видео. Для этого вам нужно найти URL-адрес видеоролика, который вы хотите поделиться. Обычно он находится в адресной строке браузера, когда вы просматриваете видео на веб-сайте. Затем вставьте этот URL-адрес в тег текст ссылки. При переходе по этой ссылке видео сразу откроется.

Второй способ — использование эмбеддинга видео. Это означает, что вы вставляете код видеоролика на свой веб-сайт или блог. Как правило, каждое видео-хостинговое приложение предоставляет возможность получения кода эмбеддинга. Например, на YouTube вы можете найти кнопку «Поделиться» под видео и выбрать «Встроить».

Как добавить видео на сайт с помощью HTML и тэга video

Затем вам нужно скопировать полученный HTML-код и вставить его на свою веб-страницу или блог. После публикации этой страницы видео сразу откроется при ее просмотре.

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

Методы создания ссылки на сайт, чтобы видео моментально открывалось

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

Если необходимо, чтобы видео автоматически начиналось воспроизведение, можно добавить параметр autoplay в URL-адресе видео. Это можно сделать, добавив его после знака вопроса в конце URL-адреса, например: https://www.youtube.com/watch?v=abc123Истерзанная» начнется 8 июля: узнайте время премьеры

Передача параметров в URL ссылки

Передача параметров в URL ссылки является удобным способом передачи информации с одной веб-страницы на другую. Для этого используется специальный формат URL-адреса, в котором после символа вопроса «?» указываются параметры и их значения.

Каждый параметр представляет собой пару «имя=значение», разделенную символом «param2=value2.

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

Значения параметров могут содержать любые символы, однако некоторые символы, такие как пробелы или специальные символы, должны быть закодированы с помощью специальных кодов. Для этого используются коды ASCII или кодировка URL-адреса.

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

Получение и обработка параметров URL-адреса на сервере осуществляется с помощью специальных методов и функций, доступных в различных языках программирования. Например, в PHP для получения параметров используется массив $_GET, в JavaScript — объект URLSearchParams.

В заключение, передача параметров в URL ссылки является эффективным инструментом для передачи информации между веб-страницами. Однако необходимо учитывать возможность возникновения проблем с безопасностью, поэтому следует быть осторожным при передаче конфиденциальных данных через URL.

Использование якорей для прямого доступа к видео

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

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

Затем, чтобы создать ссылку на это видео, нужно использовать тег с атрибутом href , указывающим на идентификатор якоря. Например:

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

Оптимизация кода видео-плеера для быстрого загрузки

1. Использование правильного формата видео

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

2. Сокращение разрешения видео

Уменьшение разрешения видео может значительно сократить размер файла и ускорить его загрузку. Если качество видео не играет решающей роли, рекомендуется использовать разрешение, оптимальное для вашей аудитории.

3. Оптимизация сжатия видео

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

4. Использование ленивой загрузки видео

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

5. Устранение неиспользуемых функций и плагинов

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

6. Использование кеширования видео

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

7. Оптимизация кода видео-плеера

Для более быстрой загрузки видео рекомендуется оптимизировать код видео-плеера. Это может включать в себя уменьшение числа HTTP-запросов, объединение и минификацию CSS и JavaScript файлов, а также оптимизацию изображений.

8. Использование Content Delivery Network (CDN)

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

Использование тега для автоматического воспроизведения

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

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

Таким образом, при открытии страницы, браузер автоматически начнет воспроизводить видео, указанное в src атрибуте.

Также можно добавить контролы для управления воспроизведением видео. Для этого необходимо добавить атрибуты controls и preload. Например:

С помощью атрибута controls будет отображаться панель управления видео, а с помощью атрибута preload=»auto» видео будет предварительно загружаться.

Предзагрузка видео с помощью тега

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

Атрибуты тега video

В теге video есть несколько атрибутов, которые позволяют настроить предзагрузку видео:

• preload: определяет, как браузер должен предзагружать видео. Значения атрибута могут быть: «none» (без предзагрузки), «metadata» (предзагружаются только метаданные) и «auto» (видео полностью предзагружается)
• poster: указывает картинку, которая будет показана вместо видео, пока оно загружается
• preload=»auto»: этот атрибут указывает браузеру предзагрузить видео автоматически, как только страница загружается

Пример использования тега video с предзагрузкой видео

Вот пример кода, который показывает, как использовать тег video с предзагрузкой видео:

Ваш браузер не поддерживает видео-тег.

В этом примере видео с именем «video.mp4» будет предзагружено автоматически при загрузке страницы. Картинка с именем «poster.jpg» будет показана вместо видео, пока оно загружается. Кроме того, пользователи смогут управлять видео с помощью элементов управления, заданных атрибутом controls.

Минимизация количества HTTP-запросов для быстрого открытия видео

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

Одним из способов сократить количество запросов к серверу является объединение нескольких файлов видео в один. Например, если на странице присутствуют несколько видео, то их можно объединить в один файл и отдать его клиенту одним запросом.

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

Также можно использовать такие методы, как кэширование видео на стороне клиента, использование CDN (Content Delivery Network) для распределения видео по различным серверам, а также сжатие видео для уменьшения его размера.

Использование CDN для ускорения загрузки видео

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

Для использования CDN для ускорения загрузки видео, необходимо сначала загрузить видео-файлы на серверы CDN. Затем, в HTML-коде, нужно указать ссылку на видео-файл, используя URL CDN-сервера. Это можно сделать с помощью тега , где в атрибуте src указывается URL-адрес видео-файла.

Преимущества использования CDN для загрузки видео включают:

• Увеличение скорости загрузки видео для пользователей, особенно тех, кто находится в удаленных регионах;
• Снижение нагрузки на основной сервер, так как видео-файлы доставляются с серверов CDN;
• Большая надежность и стабильность, так как CDN использует распределенную сеть серверов;
• Повышение качества потока видео за счет более быстрой загрузки и меньших задержек.

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

Источник: naman-mebel.ru

Как вставить видео в письмо: простые способы для тех, кто не знает HTML

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

Зачем вставлять видео в email рассылку

Видео становится популярнее как формат контента. Youtube на втором месте среди самых посещаемых сайтов в мире — правда, Facebook уже дышит ему в затылок, но и в этой соцсети выше всего ранжируются именно посты с видео.

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

Так почему бы не добавить видеоконтент в email рассылки? Видео в письмах не просто разнообразит их внешний вид, оно привлечет внимание, даст возможность удачно показать товары или придаст бренду человечности. А заодно увеличит количество открытий, переходов по ссылкам и конверсий в продажи.

Вот немного статистики:

• 68% пользователей предпочтут узнать о свойствах продукта из короткого видео, а не из текста. Значит, даже короткая гифка с демонстрацией туфель сработает лучше, чем два абзаца текста или три фотографии.
• Упоминание видео в теме письма может увеличить Open rate. Разные источники называют цифры от 6 до 19%.
• Видео в письме поднимет CTR на 65%.

Как вставить видео в письмо

Первый способ, который приходит в голову, — встроить видео в код письма. Но это невозможно, если не владеешь HTML. И еще проблема — очень мало почтовых клиентов могут проигрывать встроенное таким образом видео. Это Apple Mail, Outlook для Apple, предустановленные почтовые клиенты в iOS10+ и Sumsung Galaxy, программа Thunderbird. Остальные отобразят не видео, а его обложку или стоп-кадр.

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

Как вставить видео ссылкой в письмо

Первый, самый простой способ — это гиперссылка в тексте письма. Не забывайте, что почтовые системы не любят «голых» ссылок в тексте и считают это признаком спама. Всегда оборачивайте ссылку в текст. Старайтесь писать так, чтобы пользователю было максимально понятно — когда он нажмет на ссылку, перейдет к просмотру видео.

Вот как добавить видео в текст письма с помощью ссылки в SendPulse. Напишите текст в письме с помощью блока «Текст», выделите нужный кусочек и нажмите на кнопку «Добавить ссылку»:

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

Как вставить видео в письмо CTA кнопкой

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

Чтобы создать CTA кнопку для видео в SendPulse, вставьте блок «Кнопка» после текста. В панели редактирования в правой части экрана настройте кнопку: добавьте ссылку на видео, выберите размер и цвет самой кнопки и текста, ее положение относительно центра письма, степень скругления углов и так далее:

Как вставить видео в письмо ссылкой с Youtube

Блок «Видео» в конструкторе SendPulse позволит создать в письме картинку с кнопкой воспроизведения в центре. Выглядит как на самом YouTube, поэтому подписчики сразу поймут, что для просмотра нужно кликнуть на картинку. Не понадобятся ни дополнительная CTA кнопка, ни гиперссылка в тексте.

Чтобы добавить видео в письмо таким способом, перетяните блок «Видео» в свой шаблон и вставьте ссылку в панели редактирования блока:

Обратите внимание! Если вы создаете письма не в конструкторе, а в упрощенном HTML-редакторе, то можете добавлять ссылки не только с YouTube, но и с Vimeo.

Как вставить видео в письмо картинкой со ссылкой

Можно добавить в письмо видео с любого ресурса, не только YouTube или Vimeo. Выглядеть будет похоже, но придется потратить чуть больше времени.

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

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

Добавляем видео в письмо в виде активной картинки-ссылки

Можно совмещать способы. Например, сделать активную картинку-ссылку и добавить гиперссылку в текст рядом. На случай, если картинка не отобразится или пользователь не догадается на нее кликнуть. Еще вариант — активная картинка-ссылка и рядом CTA кнопка. Используйте и комбинируйте эти варианты так, как вам нужно.

Как вставить видео в письмо гифкой

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

В упрощенном редакторе нажмите на кнопку «Видео», в открывшемся окне вставьте ссылку на нужное видео на YouTube или Vimeo и нажмите «Сгенерировать GIF». Для гифки можно выбрать любой кусочек видео длиной до 5 секунд. Чтобы гифка была активной ссылкой на полное видео, оставьте галочку в чекбоксе «Добавить наложение кнопки на изображение».

В редакторе SendPulse создаем гифку из видео c YouTube и добавляем ее в письмо

Слишком тяжелая гифка может не отобразиться в письме. Чтобы такой проблемы не было, мы ввели ограничение — гифку в SendPulse можно создать из видео, которое весит максимум 100 Мб.

Обратите внимание! Три полезных совета, чтобы видео в письме работало эффективно: упоминайте видео в теме письма; пишите интересную подводку к видео — заинтригуйте, упомяните пользу, которую подписчик получит от просмотра; выбирайте для превью живой и динамичный кадр, лучше всего — с людьми.

Какое видео лучше вставлять в email рассылку

Вы можете добавлять в письма любые видео, которые интересны ЦА. Или довериться статистике и предпочесть самые популярные форматы согласно исследованию HubSpot:

• объяснение;
• демонстрация продукта;
• инструкции how to;
• рекомендации, отзывы.

Добавьте героя в свои видео. Персонализированные ролики удерживают внимание на 35% дольше, чем неперсонализированные. К тому же это помогает пользователям стать ближе к бренду — симпатию гораздо проще испытывать к конкретному объекту, то есть человеку или персонажу, чем к абстрактной компании.

По возможность делайте короткие видео. Замечали, что во многих онлайн-курсах даже 20-минутные занятия разбиты на несколько блоков? Исследования показывают, что средний пользователь смотрит только 77% от минутного видео. Для ролика на две минуты и дольше этот показатель резко падает до 57% и продолжает снижаться с увеличением длины.

Это не значит, что надо обязательно сжимать или резать все, что дольше двух минут, например, длинные вебинары. Просто избавляйтесь от лишних деталей в видео и смотрите на отклик своей ЦА.

Что стоит запомнить

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

Самые популярные форматы видео — это объяснения, демонстрация продукта, инструкции и рекомендации. Но вы можете вставлять в письма любые видео, которые полезны и интересны вашей целевой аудитории.

Что сделать, чтобы видео в письме сработало эффективней и собрало больше просмотров:

• Упоминайте видео в теме письма.
• Пишите интересную подводку к видео — заинтригуйте, расскажите о пользе, которую подписчик получит от просмотра.
• Выберите для превью живой и динамичный кадр, лучше всего — с людьми.
• Добавьте персонажа в видео — персонализированные ролики дольше удерживают внимание зрителя и помогают формировать эмоциональную связь с брендом.
• По возможности делайте короткие видео. Это не значит, что часовой вебинар нужно разделить на десяток частей. Но если делаете короткий ролик на две минуты, подумайте, можно ли сократить его до минуты. Это серьезно повысит досматриваемость.

Как добавить видео в свое письмо в сервисе SendPulse:

1. Ссылкой в текст.
2. CTA кнопкой.
3. Картинкой — либо сделайте картинку активной ссылкой, либо еще добавьте рядом CTA кнопку или ссылку в текст.
4. Гифкой.

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

Источник: sendpulse.com

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

35% аудитории рунета не используют компьютер для интернета

Более подробно про это исследование вы можете почитать на habr.com.

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

Сравнение скорости загрузки

Чтобы сравнить скорость загрузки страницы, перейдите по следующим кнопкам:

Обычная вставкаЗагрузка при клике

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

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

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

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

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

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

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

ВАЖНО: в атрибут id необходимо вставить идентификатор вашего видео на YouTube. Если не знаете, где оно находится то смотрите видео инструкцию к этой статье ниже.

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

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

.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

3 этап. Javascript

JAVASCRIPT КОД

‘use strict’; function r(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; if (this.getAttribute(«data-params»)) iframe_url+=’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); >> >);

Позиции сайта не растут в Яндекс и Google?

Закажите полный разбор сайта по SEO + консультацию

Сделайте аудит своего сайта самостоятельно с помощью сервиса

[ВИДЕО] Как использовать данный способ ускорения загрузки страниц на своих проектах?

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

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

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

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

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

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

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

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

• Скриншот запросов страницы #1
• Скриншот запросов страницы #2

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

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

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

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

• Скриншот запросов страницы #1
• Скриншот запросов страницы #2

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

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

Технические ошибки не дают расти в SEO?

Закажите полный разбор сайта по SEO + консультацию

Сделайте аудит своего сайта самостоятельно с помощью сервиса

Вывод

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

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

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

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

Успехов!

С Уважением, Юрий Немец

Источник: sitehere.ru