КодSEOБлогИное

Ускорить загрузку страницы с видио с Ютуба

Курсы HTML, CSS, PHP, JavaScript, лектор Трепачёв Д.П.

Перед каждой следующей проверкой следует очистить кэш.

Стандартно

Пример: 1.9 секунд, 17 запросов, 1808 КБ

<iframe src="https://www.youtube.com/embed/1TYl3jhfEDA" allowfullscreen></iframe>

При загрузке фрейма со станицей YouTube вместе с роликом подгружается код плеера, скрипты сбора аналитики, рекламы и т.п.

В режиме повышенной конфиденциальности

Пример: 1,4 секунд, 14 запросов, 1646 КБ

<iframe src="https://www.youtube-nocookie.com/embed/1TYl3jhfEDA" allowfullscreen></iframe>

Если использовать youtube-nocookie.com, то скрипт сбора аналитики не будет обращаться к сайту каждую минуту [support.google.com].

Используя при загрузки страницы превью ролика

Пример: 0,4 секунд, 7 запросов, 174 КБ

<iframe srcdoc="<style>html, body, a, img {display: block; width: 100%; height: 100%; margin: 0; padding: 0;} a:before, a:after {position: absolute; content: ''; left: 50%; top: 50%;} a:before {margin: -4.9% 0 0 -7%; background: rgba(31,31,30,.8); padding-top: 9.8%; width: 14%; border-radius: 16% / 27%;} a:after {margin: -1.9vw 0 0 -1vw; border: 2vw solid transparent; border-left: 3.8vw solid #fff;} a:hover:before {background: #c0171c;}</style><a href='http://www.youtube-nocookie.com/embed/1TYl3jhfEDA?autoplay=1'><img src='//img.youtube.com/vi/1TYl3jhfEDA/maxresdefault.jpg' srcset='//img.youtube.com/vi/1TYl3jhfEDA/mqdefault.jpg 320w, //img.youtube.com/vi/1TYl3jhfEDA/hqdefault.jpg 480w, //img.youtube.com/vi/1TYl3jhfEDA/maxresdefault.jpg 1307w'></a>" allowfullscreen></iframe>

Загрузка фрейма с изображением к видео требует меньших усилий. Лишь после нажатия посетителем на это изображение будет загружаться страница YouTube с роликом. Идею очень просто реализовать с помощью атрибута srcdoc (поддерживают не все браузеры).

Атрибут srcset у тега img ещё больше ускорит загрузку на мобильных устройствах.

Стили, выделенные серым цветом, необязательны. Они создают кнопку «Play ►».

a:before,
a:after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
}
a:before {
  width: 14%;
  margin: -4.9% 0 0 -7%;
  border-radius: 16% / 27%;
  padding-top: 9.8%;
  background: rgba(31,31,30,.8);
}
a:after {
  margin: -1.9vw 0 0 -1vw;
  border: 2vw solid transparent;
  border-left: 3.8vw solid #fff;
}
a:hover:before {
  background: #c0171c;
}
Все комментарии