Привіт усім. Просто про маркетинг на зв’язку. І сьогодні поговоримо про оптимізацію відео з Youtube. Як розмістити відео на сайт і як відео вбиває швидкість завантаження веб-сторінки. Ну що, поїхали!
В попередніх моїх відео я переконував усіх в тому, що відео - це найкращий формат контенту для будь-якого сайту. В статті “Як створити блог в 2020 році?” я говорив, що більшість людей візуали, які найкраще інформацію сприймають через зір. Відео надовго залишається в нашій пам’яті. Це тому, що під час перегляду одночасно задіюються органи зору і слуху, а також 50% мозку.
Якщо на відео-контент дивитися зі сторони пошукової оптимізації, відео впливає на позиції сайту не напряму, а через покращення поведінки відвідувачів сайту. Відвідувачі будуть переглядати відео і тим самим на довше будуть затримуватись на веб-сторінці.
Тривалість перегляду сторінки пошукова система враховує, як метрику поведінки. А я нагадаю, що поведінка користувача є фактором ранжування в пошуковій видачі. Наявність 2-3 роликів на сторінці може збільшити тривалість перегляду до 3-5 хвилин. Це тому що ера інтернету зробила нас лінивими до тексту, більшість між читанням і переглядом, віддадуть перевагу відео.
На веб-сторінці відео публікується дуже просто. Створюєте власний канал, завантажуєте відео в Youtube і розміщуєте фрагмент iframe-коду на веб-сторінці.
Але, відео поведінку “лєчіт”, а швидкість завантаження сторінки “калєчіт”. Вся біда в iframe-коді. Під час завантаження веб-сторінки, крім даних необхідних для візуалізації контенту, браузер завантажує велику кількість стороннього JS-коду плеєра YouTube, який і гальмує швидкість сайту. А я нагадаю, що з 2018 року швидкість завантаження є фактором ранжування.
Для експерименту я створив дві нові сторінки. Перша сторінка без відео, друга з відео. Перевіряємо сторінки в pagespeed insights і бачимо, як на сторінці B відео-контент “калічить” параметри швидкості завантаження. Щоб цю проблему усунути, є 2 рішення.
Lazy load for video
Перше рішення - просте. Якщо ваш сайт розроблений на CMS платформі - Joomla, Wordpress або Drupal, вам достатньо встановити і налаштувати один із плагінів lazy load for video. Як і в моєму випадку, плагін все зробить за вас.
“Спеціальнообучєний” скрипт та css-стилі
Друге рішення - складніше. Вам необхідно до сайту підключити “специальнообучений” скрипт та css-стилі. Після цього, на етапі рендеренгу сторінки замість відео будуть завантажуватись лише intro-зображення відео та кнопка play. А сторонній JS-код плеєра YouTube розпочне завантажуватись лише після натискання користувачем кнопки “play”. Для реалізації цього рішення не потрібно знати мову програмування JavaScript - в інтернеті повно інструкцій по цій темі з готовим кодом.
Атрибут loading="lazy"
І є ще одне вирішення цієї проблеми. Розробники браузера Chrome у 2019 році створили спеціальний атрибут loading="lazy", який дозволяє відкласти виконання iframe-коду youtube до тієї пори, поки користувач не почне взаємодіяти із екраном де розміщене відео. Але це рішення має ряд недоліків: по перше, атрибут підтримується лише Chrome починаючи із 75 версії і подруге - інші браузери взагалі не підтримують цей атрибут.
На сьогодні це все. Якщо це відео було для тебе корисним - жми лайк. Зустрінемось онлайн. Далі буде.
