Перед каждой следующей проверкой следует очистить кэш.
Стандартно
Пример: 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;
}