Прискорюємо завантаження сайту

683

Здрастуйте, шановні читачі блогу . Дозвольте запропонувати вашій увазі пост буквально в кілька абзаців. Проблема, яка вирішується, досить для мене «хвора», бо вже багато років роблю кроки по оптимізації швидкості завантаження сторінок сайту. З часом проблема починає переходити в стадію «нав’язливої», але я поки тримаюся в рамках.

Прискорюємо завантаження сайту

Черговий ворог, виявлений мною на полях боїв за мілісекунди завантаження сторінок і число створюваних при цьому запитів — відео вставляється на сайт з Ютуба, Фейсбуку та інших місць. Стало очевидно, що це ворог. Якщо його зі сторінки прибрати, то вантажиться все швидше і спритніше.

З іншого боку, не варто переходити межу розумного, бо іноді вставлене відео на сторінку серйозно підвищує її шанс на потрапляння в Топ (краще поведінкові, та й взагалі воно може виявитися зрештою цікавіше самої статті). Тому від вставки відеороликів не можна зовсім відмовитися, але бажано це робити з найменшим збитком для швидкості роботи сайту. Про це мова і піде.

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

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

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

Проблему цей метод вирішував, але попутно створював відвідувачам додаткові труднощі, що не є добре. Та й користувач, йдучи дивитися ролик на іншу сторінку, по суті не поліпшував, а погіршував поведінкові характеристики даної сторінки (хоча, це спірне питання). Але головне, що це не зручно (перевіряв і дивився статистику).

Друге рішення випливало з першого. Треба зробити все те ж саме (розміщувати на сторінці тільки скрін ролика), але показувати відео вже не на іншій сторінці, а на цій самій і ще краще в тому ж самому місці, щоб викликати ілюзії типу «все як завжди». Зробити це можна, на мій погляд, тільки з допомогою Джава-скрипта, що і було реалізовано.

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

Прискорюємо завантаження сайту«alt=»»>

Але в цього методу є кілька недоліків:

  • Метушня з усім наведеним нижче замість того, щоб просто скопіювати пропонований на відеохостингах код
  • В браузерах користувачів повинен бути дозволений Джава скрипт. В іншому випадку відео вони не подивляться 🙁
  • Вставка відео на сайт за допомогою джава-скрипта

    Якщо все це вас не зупиняє, а бажання зробити сторінки сайту трошки швидше переважує небажання трохи повозитися з кодом, то вперед. Для кожного вставленого на сайт відео доведеться вручну виконати наступні маніпуляції:

  • Скопіювати код вставки (з потрібним розміром відео) і розмістити його на сторінці, типу цього:
  • Зняти скрін з ролика (використовувати картинку, яку, наприклад, плеєр Ютуба довантажує собі за замовчуванням, не виходить, бо на ній немає кнопки запуску — того самого трикутника посередині, який і дозволяє відрізнити ролик від простого зображення). Вийде приблизно так (поки ще не кликабельно — просто картинка):
    Скрин со вставленного на сайт видеороликаПрискорюємо завантаження сайту
  • Далі я оптимизирую розмір цього скрін і заливаю до себе на сервер (хостинг) по ФТП. На цьому підготовчий етап закінчений.
  • З коду вставляється відеоролика я беру ідентифікатор (в моєму прикладі це NHgSn6U9m5g) і переношу його в ось таку конструкцію (у яке місце і так нескладно здогадатися):
    Прискорюємо завантаження сайту
  • Туди ж я додаю шлях до скрін, який зробив трохи раніше і залив на свій сервер (вставляю, природно, в тег IMG). Клас img_center1 можете прибрати, бо це просто мій спосіб оформлення картинок на сайті.
  • Доводимо все до досконалості

    Є ще кілька нюансів. При кліці по зображенню (скрину) починається завантаження плеєра і ролика стандартним чином. Але за замовчуванням ролик зазвичай встає на паузу і користувачеві доведеться ще раз клікати по ньому для початку відтворення. Це не є добре.

    А тому потрібно налаштувати автовідтворення відео:

  • Для відео-ролика на Ютубі це зробити досить легко — потрібно просто додати autoplay=1 в рядок з джерел відео тега Iframe (можна відразу після знака питання стоїть за ідентифікатором відео, або після амперсанда &, є роздільником між параметрами даного відео).
  • Для ролика з Фейсбуку довелося пошукати рішення, але воно теж знайшлося. Причому вставити потрібно теж autoplay=1, але трохи в інше місце (див. у наведеному нижче прикладі):
    Прискорюємо завантаження сайту
  • Як бачите, автовідтворення і для відеоролика з Фейсбуку чудово працює.

    Десь так приблизно…

    Удачі вам! До зустрічей на сторінках блогу