Здрастуйте, шановні читачі блогу . Дозвольте запропонувати вашій увазі пост буквально в кілька абзаців. Проблема, яка вирішується, досить для мене «хвора», бо вже багато років роблю кроки по оптимізації швидкості завантаження сторінок сайту. З часом проблема починає переходити в стадію «нав’язливої», але я поки тримаюся в рамках.
Черговий ворог, виявлений мною на полях боїв за мілісекунди завантаження сторінок і число створюваних при цьому запитів — відео вставляється на сайт з Ютуба, Фейсбуку та інших місць. Стало очевидно, що це ворог. Якщо його зі сторінки прибрати, то вантажиться все швидше і спритніше.
З іншого боку, не варто переходити межу розумного, бо іноді вставлене відео на сторінку серйозно підвищує її шанс на потрапляння в Топ (краще поведінкові, та й взагалі воно може виявитися зрештою цікавіше самої статті). Тому від вставки відеороликів не можна зовсім відмовитися, але бажано це робити з найменшим збитком для швидкості роботи сайту. Про це мова і піде.
Варіанти вставки відео з Ютуба, Фейсбук і т. п.
Пропоновані за замовчуванням методи вставки відео на сайт (з допомогою іфрейма або embed) створюють багато додаткових запитів при завантаженні сторінки. А якщо роликів на одній сторінці буде ще й кілька, то взагалі караул. Навіть досліджуваний мною CloudFlare проблеми не вирішував, а швидше збільшував (але це вже деталі). Суть в тому, що потрібно було щось робити.
Перше рішення, яке прийшло в голову — залишати на сторінці лише скріни, зняті з раніше вставлених роликів (з кнопками відеоплеєра і запуску, щоб здавалося, що це дійсно ролик, а не просто картинка). Ну, а вже на цю ширму (скрін з кнопкою запуску) можна повісити посилання, щоб в новому вікні відкривалася сторінка, де і буде можливість переглянути цей ролик (можна навіть його автовідтворення там увімкнути, щоб користувачеві ще раз мишкою не клацати).
Проблему цей метод вирішував, але попутно створював відвідувачам додаткові труднощі, що не є добре. Та й користувач, йдучи дивитися ролик на іншу сторінку, по суті не поліпшував, а погіршував поведінкові характеристики даної сторінки (хоча, це спірне питання). Але головне, що це не зручно (перевіряв і дивився статистику).
Друге рішення випливало з першого. Треба зробити все те ж саме (розміщувати на сторінці тільки скрін ролика), але показувати відео вже не на іншій сторінці, а на цій самій і ще краще в тому ж самому місці, щоб викликати ілюзії типу «все як завжди». Зробити це можна, на мій погляд, тільки з допомогою Джава-скрипта, що і було реалізовано.
Це буде виглядати приблизно так (спочатку у вихідному коді ви знайдете тільки зображення chto-takoe-bitkoin.jpg, а відтворення ролика активується з допомогою onclick, тобто при натисканні по цьому зображенню):
«alt=»»>
Але в цього методу є кілька недоліків:
Вставка відео на сайт за допомогою джава-скрипта
Якщо все це вас не зупиняє, а бажання зробити сторінки сайту трошки швидше переважує небажання трохи повозитися з кодом, то вперед. Для кожного вставленого на сайт відео доведеться вручну виконати наступні маніпуляції:
Доводимо все до досконалості
Є ще кілька нюансів. При кліці по зображенню (скрину) починається завантаження плеєра і ролика стандартним чином. Але за замовчуванням ролик зазвичай встає на паузу і користувачеві доведеться ще раз клікати по ньому для початку відтворення. Це не є добре.
А тому потрібно налаштувати автовідтворення відео:
Як бачите, автовідтворення і для відеоролика з Фейсбуку чудово працює.
Десь так приблизно…
Удачі вам! До зустрічей на сторінках блогу
