Оптимизация загрузки страницы сайта с 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

ПоделитьсяShare on Facebook0Share on VKShare on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0
Категории: CSS&HTML, Полезное

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

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

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

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

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

  • Максим:

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

  • Evgenij:

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

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

    С ув. Евгений

Добавить комментарий