Является ли замена iframe ютуб ролика на lite-youtube таким кодом оптимальной?

WordPress YouTube Видео

1 ответ

Добрый день! Имеется сайт с высокой посещаемостью на Wordpress, на нем есть блоки с iframe вставкой из ютуб в следствии чего base.js подтягивается очень долго (если на десктопах это еще не так заметно, то на моб девайсах это очень сильно садит производительность)
Нашел решение в интернете через lite-youtube Поясняющий ролик по lite youtube
Далее через str_replace и preg_match хочу проходится по сайту и изменять старый iframe на новый
spoilerКод замены

function replace_video_shortcode($content) {     // Паттерн для проверки наличия кода iframe     $pattern = '/&lt;iframe.*src="https://www.youtube.com/embed/([^"]+)".*&lt;/iframe&gt;/';          // Ищем совпадения с паттерном в тексте контента     preg_match_all($pattern, $content, $matches);      // Если найдены совпадения     if ($matches) {         // Проходим по каждому совпадению         foreach ($matches[0] as $match) {             // Извлекаем id видео из совпадения             preg_match($pattern, $match, $video_id);                          // Генерируем новый код для замены             $replacement = '&lt;lite-youtube videoid="' . $video_id[1] . '" params="controls=1"&gt;&lt;/lite-youtube&gt;';                          // Заменяем найденный код на новый код             $content = str_replace($match, $replacement, $content);         }     }          return $content; } add_filter('the_content', 'replace_video_shortcode');

Является ли это разумным и оптимизированным решением ?

Дополнительно:

Цикл можно оптимизировать:

foreach($matches[1] as $index =&gt; $video_id) {     $replacement = '&lt;lite-youtube videoid="' . $video_id . '" params="controls=1"&gt;&lt;/lite-youtube&gt;';     $content = str_replace($matches[0][$index], $replacement, $content); }

foreach($matches[1] as $index => $video_id) { $replacement = '<lite-youtube videoid="' . $video_id . '" params="controls=1"></lite-youtube>'; $content = str_replace($matches[0][$index], $replacement, $content); }

А существует ли вообще matches?
if(!empty($matches[0]))
Если src не идет первым во фрейме, то Ваша регулярка не сработает, можно сделать так:

'/&lt;iframe[^&gt;]*src="https://www.youtube.com/embed/([^?"]+)(?[^"]*)?"[^&gt;]*&gt;&lt;/iframe&gt;/';

'/<iframe[^>]*src="https://www.youtube.com/embed/([^?"]+)(?[^"]*)?"[^>]*></iframe>/';

Ответы:

Возможно я не верно понял, что требуется, но как я понимаю, то есть решение без библиотек. Посмотри, может это оно, от вадика макеева ссыль

Нужно решить такую задачу?

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

Заказать помощь

Лучший ответ

Мария Код Ответ

Замена обычного iframe YouTube на lite-youtube — нормальная идея для PageSpeed, потому что настоящий iframe YouTube тянет много JS, cookies и сетевых запросов. Но делать это грубой регуляркой по всему контенту рискованно: можно сломать нестандартные iframe, Gutenberg-блоки, параметры видео и адаптивность.

Оптимальный вариант — подключить web component один раз и выводить контролируемую разметку:

&lt;lite-youtube videoid="dQw4w9WgXcQ" playlabel="Смотреть видео"&gt;&lt;/lite-youtube&gt;

<lite-youtube videoid="dQw4w9WgXcQ" playlabel="Смотреть видео"></lite-youtube>

Если нужно преобразовывать старые iframe, регулярку лучше ограничить только доменами YouTube и аккуратно доставать ID видео. На уровне WordPress это можно сделать через фильтр the_content, но с проверками:

add_filter('the_content', function ($content) {
    return preg_replace_callback(
        '~&lt;iframe[^&amp;gt]+src=["']https?://www.youtube.com/embed/([^"'?]+)[^"']*["'][sS]*?&lt;/iframe&gt;~i',
        function ($m) {
            $id = sanitize_text_field($m[1]);
            return '&lt;lite-youtube videoid="' . esc_attr($id) . '" playlabel="Смотреть видео"&gt;&lt;/lite-youtube&gt;';
        },
        $content
    );
});

add_filter('the_content', function ($content) { return preg_replace_callback( '~<iframe[^&gt]+src=["']https?://www.youtube.com/embed/([^"'?]+)[^"']*["'][sS]*?</iframe>~i', function ($m) { $id = sanitize_text_field($m[1]); return '<lite-youtube videoid="' . esc_attr($id) . '" playlabel="Смотреть видео"></lite-youtube>'; }, $content ); });

Не забудьте подключить JS/CSS компонента и проверить CLS: у блока должен быть задан aspect-ratio, например 16/9. Для SEO и доступности добавьте понятный playlabel. Если видео критично для контента, можно оставить ссылку на YouTube внутри noscript.

Также важно не загружать скрипт компонента на всех страницах сайта, если видео есть только в отдельных статьях. Подключайте его условно: по наличию shortcode, блока или маркера в контенте. Это сохранит выигрыш по скорости.

После замены проверьте не только Lighthouse, но и реальное поведение: клик запускает видео, полноэкранный режим работает, на мобильном нет горизонтального скролла, а в Safari/Firefox нет ошибок в консоли. Иначе получится красивая оптимизация в отчёте, но неудобный блок для пользователя.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Linux Как диагностировать зависание RK3568 U-boot на Starting kernel? 1 ответ

Является ли замена iframe ютуб ролика на lite-youtube таким кодом оптимальной?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно