Ускорение страниц сайта на которых встроено 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/ или 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');
        }
    });
});

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

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

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

// Получаем изображение записи 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 Видео себе на страницы. Тут то моё решение и может пригодиться.

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

Автор: Тимофей Кузнецов aka Tiku Digital