Ускорение страниц с VK Видео

Уско­ре­ние стра­ниц сай­та на кото­рых встро­е­но VK Видео через iframe. Не самая попу­ляр­ная тема в про­шлом, но сей­час вре­ме­на меняются.

Ускорение загрузки страниц с встройкой VK Видео

Ново­сти о том, что YouTube в Рос­сии замед­ля­ют и воз­мож­но пол­но­стью забло­ки­ру­ют заста­ви­ли меня заду­мать­ся. Я вспом­нил, что у меня на сай­те мно­го постов, в кото­рых видео с YouTube. Далее так как я уже дав­но поти­хонь­ку пере­но­шу свои видео с YouTube в VK, я так­же решил поти­хонь­ку менять их у себя на сай­те. Я заме­нял встрой­ку с YouTube на встрой­ку с VK Видео.

Само-собой про­бле­мы с про­из­во­ди­тель­но­стью были и рань­ше. Когда на стра­ни­це YouTube через iframe, ско­рость загруз­ки пада­ет. Но всё было хотя бы в жёл­той зоне по PageSpeed Insights. После того как я встро­ил пер­вые видео с VK Видео, я сно­ва сде­лал про­вер­ку про­из­во­ди­тель­но­сти. Пока­за­те­ли сра­зу ушли в крас­ную зону. Поми­мо пока­за­те­лей про­из­во­ди­тель­но­сти про­се­ли так­же и дру­гие пока­за­те­ли, кото­рые Google назы­ва­ет «Реко­мен­да­ции». Если рань­ше они были ста­биль­но в зеле­ной зоне, то сей­час упа­ли до жел­той, упа­ли на десят­ки пунктов.

Падение производительности страницы с VK Видео

Такое паде­ние про­из­во­ди­тель­но­сти меня не устро­и­ло, ведь ходят слу­хи, что ско­рость загруз­ки сай­та после недав­них обнов­ле­ний Google ста­ла играть бо́льшее зна­че­ние чем ранее. Не гово­ря уже про удоб­ство для посе­ти­те­лей – никто не любит мед­лен­ные сайты.

Я пошел в ChatGPT и начал рабо­ту над тем, что­бы он напи­сал мне рабо­та­ю­щее реше­ние этой про­бле­мы. Спу­стя несколь­ко часов обще­ния с ChatGPT мне уда­лось полу­чить рабо­чий скрипт, кото­рым я решил поде­лить­ся у себя в бло­ге. Я так­же искал гото­вое реше­ние в интер­не­те, но как мини­мум на поверх­но­сти ниче­го не было.

Рост производительности страницы с VK Видео

Вот резуль­тат по PageSpeed Insights после внед­ре­ния на сайт реше­ния, кото­рое я подготовил.

Далее подроб­но про само реше­ние и скрипт, кото­рый я сде­лал с помо­щью ChatGPT.

Про­сто оста­вить все как есть и каким-то вол­шеб­ным обра­зом уве­ли­чить ско­рость загруз­ки стра­ни­цы с встрой­кой через iframe, конеч­но, не полу­чит­ся. Самое изящ­ное реше­ние, кото­рое при­шло мне в голо­ву – это заме­нить iframe заглуш­кой с изоб­ра­же­ни­ем (застав­кой) видео и кноп­кой play. После кли­ка на эту заглуш­ку под­гру­жа­ет­ся насто­я­щий iframe с видео и пара­мет­ром autoplay. Видео сра­зу запускается.

Такой под­ход поз­во­ля­ет не загру­жать iframe с видео сра­зу в момент загруз­ки стра­ни­цы, а загру­жать его толь­ко тогда, когда поль­зо­ва­тель это­го захо­чет. Ведь тео­ре­ти­че­ски посе­ти­тель сай­та может и не посмот­реть видео в посте, а про­сто почи­тать текст. Так зачем мучать его дол­гой загруз­кой видео.

Перед тем как при­ве­сти код скрип­та, я дол­жен отме­тить, что мой сайт рабо­та­ет на WordPress. В коде есть неко­то­рые момен­ты, кото­рые с этим свя­за­ны. Но в целом нет ника­кой раз­ни­цы для какой CMS под­кл­чать этот скрипт. Его мож­но адап­ти­ро­вать под любой сайт.

Скрипт для ускорения загрузки страниц с встройкой VK Видео

Код мое­го реше­ния так­же досту­пен на GitHub

// заменяем iframe vk видео заглушкой, чтобы страница быстрее грузилась, при клике подгружается iframe с autoplay

document.addEventListener("DOMContentLoaded", function() {
    // Ищем все iframe с классом "vk-video"
    const iframes = document.querySelectorAll("iframe.vk-video");

    iframes.forEach(function(iframe) {
        // Получаем URL для подгрузки видео
        let videoSrc = iframe.dataset.src;

        // Добавляем параметр autoplay=1
        videoSrc += "&autoplay=1";

        // Создаем контейнер для превью
        const previewContainer = document.createElement("div");
        previewContainer.className = "videoplayer_thumb";

        // Получаем изображение записи WordPress (предполагается, что это изображение на странице)
        const featuredImage = document.querySelector('meta[property="og:image"]');
        const previewImageUrl = featuredImage ? featuredImage.content : ""; // Получаем URL изображения

        // Устанавливаем изображение записи как фон для превью, если оно существует
        if (previewImageUrl) {
            previewContainer.style.backgroundImage = `url(${previewImageUrl})`;
        } else {
            // Устанавливаем заглушку, если изображение не найдено
            previewContainer.style.backgroundImage = `url('https://tiku.ru/wp-content/themes/Tiku/img/tiku-pattern.webp')`; // Укажите путь к вашей заглушке
        }

        // Создаем контейнер для иконки плей
        const playIconContainer = document.createElement("div");
        playIconContainer.className = "play-icon-container";

        // Вставляем вашу SVG-иконку
        const playIcon = document.createElement("div");
        playIcon.className = "play-icon";
        playIcon.innerHTML = `
					<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="#ffffff" viewBox="0 0 256 256"><path d="M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z"></path></svg>
        `;

        // Добавляем иконку в контейнер
        playIconContainer.appendChild(playIcon);
        previewContainer.appendChild(playIconContainer);

        // Заменяем iframe на контейнер с превью
        iframe.parentNode.replaceChild(previewContainer, iframe);

        // Добавляем событие клика на превью
        previewContainer.addEventListener("click", function() {
            // Восстанавливаем iframe с автозапуском
            const newIframe = document.createElement("iframe");
            newIframe.src = videoSrc;
            newIframe.width = iframe.width;
            newIframe.height = iframe.height;
            newIframe.allow = iframe.allow;
            newIframe.frameborder = iframe.frameborder;
            newIframe.allowFullscreen = iframe.allowFullscreen;
            newIframe.className = iframe.className;

            previewContainer.parentNode.replaceChild(newIframe, previewContainer);
        });
    });
});

В коде скрип­та доста­точ­но мно­го ком­мен­та­ри­ев, кото­рые хоро­шо его опи­сы­ва­ют, поэто­му я не буду делать допол­ни­тель­ный раз­бор. Отме­чу лишь неко­то­рые моменты.

Выбор iframe c VK Видео

В этой части кода мы выби­ра­ем iframe c клас­сом .vk-video. У iframe на моём сай­те уже есть такой класс, ведь ранее я доба­вил дру­гой скрипт, что­бы каж­дый раз при встрой­ке с VK Видео не менять раз­ме­ры и иметь класс для управ­ле­ния раз­ме­ра­ми и оформ­ле­ни­ем через CSS.

document.addEventListener('DOMContentLoaded', () => {
    // Получаем все iframe на странице
    const iframes = document.querySelectorAll('iframe');

    iframes.forEach(iframe => {
        // Проверяем, содержит ли атрибут src значение https://vk.com/
        if (iframe.src.includes('https://vk.com/')) {
            // Удаляем атрибуты width и height
            iframe.removeAttribute('width');
            iframe.removeAttribute('height');
            
            // Добавляем класс vk-video
            iframe.classList.add('vk-video');
        }
    });
});

Вы може­те исполь­зо­вать мой под­ход или как-то ина­че опре­де­лять iframe.

Обновление от 24.11.2024

Я заметил, что VK Видео переехало на отдельное доменное имя vkvideo.ru, поэтому немного обновился код для выбора iframe c VK Видео.

document.addEventListener('DOMContentLoaded', () => {
    // Получаем все iframe на странице
    const iframes = document.querySelectorAll('iframe');

    iframes.forEach(iframe => {
        // Проверяем, содержит ли атрибут src значение https://vk.com/ или https://vkvideo.ru/
        if (iframe.src.includes('https://vk.com/') || iframe.src.includes('https://vkvideo.ru/')) {
            // Удаляем атрибуты width и height
            iframe.removeAttribute('width');
            iframe.removeAttribute('height');
            
            // Добавляем класс vk-video
            iframe.classList.add('vk-video');
        }
    });
});

Изображение заглушки для видео

Сле­ду­ю­щий момент, на кото­рый я хочу обра­тить вни­ма­ние – это источ­ник изоб­ра­же­ния, кото­рое долж­но исполь­зо­вать­ся как заглушка.

// Получаем изображение записи WordPress (предполагается, что это изображение на странице)
const featuredImage = document.querySelector('meta[property="og:image"]');
const previewImageUrl = featuredImage ? featuredImage.content : ""; // Получаем URL изображения

У меня на сай­те для постов в бло­ге, у кото­рых есть видео с YouTube или VK Видео, в каче­стве изоб­ра­же­ния поста сто­ит облож­ка это­го видео, поэто­му я решил при­вя­зать­ся к нему. У WordPress это назы­ва­ет­ся «Featured Images». И такое изоб­ра­же­ние, если оно уста­нов­ле­но, при­сут­ству­ет в коде раз­мет­ки Open Graph.

<meta property="og:image" content="https://tiku.ru/wp-content/uploads/2024/07/portativnyj-pylesos-xiaomi-mijia.jpg" />

ChatGPT пред­ло­жил при­вя­зать­ся к раз­мет­ке Open Graph, мне это подо­шло. У вас ситу­а­ция может отли­чать­ся. Но общая логи­ка, я наде­юсь, понят­на. В целом мож­но пря­мо в скрип­те про­пи­сать уни­вер­саль­ную заглуш­ку для всех видео или каж­дый раз вруч­ную уста­нав­ли­вать изоб­ра­же­ние для заглушки.

Оформление заглушки для видео

За оформ­ле­ние заглуш­ки с кноп­кой play отве­ча­ет корот­кий CSS, кото­рый вы може­те адап­ти­ро­вать под свои нужды.

/* оформление заглушки для видео с кнопкой play */

.videoplayer_thumb {
	width: 100%;
	padding-top: 56.25%; /* Соотношение 16:9 */
	background-size: cover;
	background-position: center;
	position: relative;
	cursor: pointer;
	border-radius: 8px;
	border: 4px solid var(--accent-color-alt);
	transition: border-color .2s ease-in-out;
}

.play-icon-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--accent-color);
	border-radius: 50%;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 8px;
}

.videoplayer_thumb:hover .play-icon svg {
	transform: scale(1.2);
}

.videoplayer_thumb:hover {
	border-color: var(--accent-color);
}

.play-icon svg {
	fill: #fff; /* Цвет иконки */
	transition: transform .2s ease-in-out;
}

.youtube-video,
.vk-video,
.videoplayer_thumb
{
	width: 100%!important;
	aspect-ratio: 16 / 9.05!important;
}


.youtube-video,
.vk-video,
.videoplayer_thumb
{
	background-color: var(--card-background);
	box-shadow: var(--shadow-elevation-medium);
}

.youtube-video,
.vk-video
{
	border: 4px solid var(--accent-color);
}

/* оформление заглушки для видео с кнопкой play */

Скрипт я раз­ме­стил пря­мо в шаб­лоне поста, для WordPress – это single.php, для сти­лей у меня есть отдель­ный файл single.css, кото­рый загру­жа­ет­ся толь­ко для стра­ниц постов в блоге.

Я так­же адап­ти­ро­вал этот скрипт, что­бы он рабо­тал не толь­ко для встро­ек с VK Видео, но и для встро­ек с YouTube. Это так­же дало при­рост про­из­во­ди­тель­но­сти для отдель­ных страниц.

Ускорение страниц с VK Видео: заключение

Я наде­юсь, что дан­ное реше­ние кому-то помо­жет сде­лать свой сайт луч­ше и быст­рее. Я думаю, что в бли­жай­шие годы попу­ляр­ность и коли­че­ство поль­зо­ва­те­лей VK Видео будут толь­ко рас­ти. А так­же будет рас­ти и коли­че­ство сай­тов, кото­рые встра­и­ва­ют VK Видео себе на стра­ни­цы. Тут то моё реше­ние и может пригодиться.

Если у вас есть вопро­сы, пред­ло­же­ния или поже­ла­ния, пожа­луй­ста, поде­ли­тесь в ком­мен­та­ри­ях к это­му посту или напи­ши­те мне любым удоб­ным для вас способом.

Под­пи­ши­тесь на мой канал на VK Видео.

Под­пи­ши­тесь на Telegram‑канал Tiku Digital

Посмот­ри­те боль­ше полез­ных постов про веб-раз­ра­бот­ку в моём блоге.