Cách tối ưu tăng điểm PageSpeed Insights khi web có nhúng youtube

Để giảm thời gian thực thi JavaScript của YouTube (đặc biệt trên website nhúng video hoặc sử dụng iframe của YouTube), làm  tăng điểm PageSpeed Insights bạn có thể áp dụng một số kỹ thuật tối ưu sau:

à trước khi đọc bài này thì anh em lưu ý , bài viết này mình chỉ chia sẻ tối ưu youtube chứ ko tối ưu toàn diện mấy cái điểm trước và sau này mình chỉ thêm code fix youtube ngoài ra ko làm thêm bất cứ gì , nếu muốn xanh thêm các bạn phải tối ưu mấy phần khác

Nếu bạn dùng WordPress, bạn hoàn toàn có thể thêm code vào file functions.php của theme (hoặc thông qua plugin snippets) để tự động tối ưu YouTube – ví dụ như lazy load iframe YouTube hoặc thay thế iframe bằng ảnh thumbnail.

function replace_youtube_iframe_with_thumbnail($content) {
    return preg_replace_callback(
        '#<iframe[^>]+src="https://www\.youtube\.com/embed/([^\?"]+)[^>]*></iframe>#i',
        function ($matches) {
            $video_id = esc_attr($matches[1]);
            $thumbnail = "https://img.youtube.com/vi/{$video_id}/hqdefault.jpg";
            return '<div class="youtube-lazy" data-id="' . $video_id . '">
                        <img src="' . $thumbnail . '" alt="YouTube video" />
                        <button>Xem video</button>
                    </div>';
        },
        $content
    );
}
add_filter('the_content', 'replace_youtube_iframe_with_thumbnail');

thứ 2 là chèn  thêm JS sau vào footer scrip

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.youtube-lazy').forEach(el => {
    el.addEventListener('click', () => {
      const iframe = document.createElement('iframe');
      iframe.src = 'https://www.youtube.com/embed/' + el.dataset.id + '?autoplay=1';
      iframe.setAttribute('allowfullscreen', '');
      iframe.setAttribute('frameborder', '0');
      el.innerHTML = '';
      el.appendChild(iframe);
    });
  });
});

và đây là thành quả

Chúc bạn sớm hoàn thiện website thật đẹp và chuyên nghiệp!