В свете последних блокировок, включая популярный Юутб в веб-интеграциях на различных сайтах, которые я создавал и создаю, приходится делать дополнительные конструкции, чтобы выпиливать эти интеграции из исходного кода окольными путями) Результатом является — ускоренная загрузка сайта, без бесконечной попытки что-то там подгрузить.)))
Особенность задачи состоит в том, что в теме-шаблоне сайта используется плагин jQuery.tubular (строка $.fn.tubular). Этот плагин предназначен для создания фонового видео из YouTube на всю страницу. Он жёстко прописывает загрузку //www.youtube.com/iframe_api прямо внутри себя. Поскольку мы работаем через дочернюю тему, самым элегантным и правильным решением будет «обмануть» этот скрипт. Мы заблокируем реальный запрос к YouTube, но создадим в памяти браузера виртуальную «заглушку» плеера. Тогда плагин tubular подумает, что всё в порядке, не выдаст ошибок и сайт загрузится мгновенно.
Вот основные тезисы результата рабочего процесса:
- Внедрение заглушки YouTube API до загрузки основного скрипта;
- Создаем фальшивый объект YouTube API, чтобы плагин tubular не выдавал ошибок;
- Перехватываем создание элемента скрипта YouTube и блокируем его запрос;
- Если скрипт пытается загрузить YouTube, подменяем ссылку на пустую заглушку;
- Имитируем успешную загрузку для зависимых скриптов темы;
- Подключаем этот перехватчик в самый верх страницы (в <head>) раньше всех остальных скриптов;
- Готово!
Рабочий код
Добавляем в файл functions.php дочерней темы следующий код:
// Внедрение заглушки YouTube API до загрузки основного скрипта
function inject_youtube_api_mock() {
?>
<script>
// Создаем фальшивый объект YouTube API, чтобы плагин tubular не выдавал ошибок
window.YT = window.YT || {};
window.YT.Player = window.YT.Player || function() {
return {
playVideo: function() {},
pauseVideo: function() {},
stopVideo: function() {},
destroy: function() {}
};
};
// Перехватываем создание элемента скрипта YouTube и блокируем его запрос
const originalCreateElement = document.createElement;
document.createElement = function(tagName) {
const element = originalCreateElement.call(document, tagName);
if (tagName.toLowerCase() === 'script') {
Object.defineProperty(element, 'src', {
set: function(value) {
if (value && value.indexOf('youtube.com/iframe_api') !== -1) {
// Если скрипт пытается загрузить YouTube, подменяем ссылку на пустую заглушку
this.setAttribute('data-blocked-yt', value);
value = 'data:text/javascript,console.log("YouTube API blocked for speed");';
// Имитируем успешную загрузку для зависимых скриптов темы
setTimeout(() => {
if (typeof window.onYouTubeIframeAPIReady === 'function') {
window.onYouTubeIframeAPIReady();
}
}, 50);
}
this.setAttribute('src', value);
},
get: function() {
return this.getAttribute('src');
}
});
}
return element;
};
</script>
<?php
}
// Подключаем этот перехватчик в самый верх страницы (в <head>) раньше всех остальных скриптов
add_action('wp_head', 'inject_youtube_api_mock', 1);
Что делает этот код:
- Он внедряется в самый верх сайта (
wp_headс приоритетом 1) и начинает «слушать» браузер. - Как только скрипт плагина
tubularпытается создать тег< script src="//www.youtube.com/iframe_api" >, наш перехватчик мгновенно ловит этот запрос и меняет адрес на безопасную пустую строку (data:text/javascript...). - Браузер вообще не отправляет запрос к серверам YouTube, поэтому ошибка
net::ERR_CONNECTION_RESETв консоли браузера полностью исчезает. - Спустя 0.05 секунды код сам даёт команду сайту: «Всё готово, якобы загрузились!», чтобы плагин
tubularне завис в ожидании, а сайт продолжил работу.
