Оптимизация загрузки страницы сайта с YouTube видео

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

Проблема: кто использует видео из youtube посредством кода iframe

Ускорить загрузку страницы на которой размещено видео с ютубе


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

На загрузку только одного base.js, который тянет youtube плеер, уходило 2.98 секунд. Полная загрузка страницы составляла 6.58 секунд. Довольно долго.

Решение нашлось и довольно оригинальное от Дениса Черникова. Посмотреть можно тут.

Пример реализации

Вкратце опишу решение. Вместо множества лишних запросов, тянется только превью видео и поверх накладывается значок воспроизведения видео. В результате применения данного приема я смог сократить время загрузки страницы до 3.37 (Без учета кэширования).

Также нашел еще 2 реализации выложенные stanislav.protasevich.

На js http://codepen.io/stanislas-prime/pen/akrpD 

На jquery http://codepen.io/stanislas-prime/pen/qKmfL

Рекомендуем к прочтению



7 комментариев

  • Василий Блинов:

    Пойду почитаю, что там пишет Денис про оптимизацию видео…

  • Дмитрий Иванович Сухоруков:

    Классный метод, будем тестить)

  • Максим:

    Спасибо что ссылочки!!!
    Метод шикарный, прям ненарадуюсь что нашел эту статью.
    Использую по 5-8 видео с youtube на страницах своего сайта, при первой загрузке , страница полностью загружалась 31 секунду.
    Сейчас после ускорения полная загрузка за 6 секунд

  • Evgenij:

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

    Автору спасибо.

    С ув. Евгений

  • Евгений:

    Кто-нибудь решил проблему с загрузкой видео на мобильных? Чтобы два раза не приходилось кликать.

Оставить комментарий

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания применять.

Срок проверки reCAPTCHA истек. Перезагрузите страницу.