Tối ưu tốc độ load web khi chèn iframe Youtube
26/05/2023 - 222
Để sử dụng mã iframe với kỹ thuật lazy loading, bạn cần thêm thuộc tính “class” là “lazyload” và thuộc tính “data-src” chứa đường dẫn URL của iframe Youtube vào mã iframe của bạn.
Ví dụ, để nhúng một video Youtube vào trang web của bạn với kỹ thuật lazy loading, bạn có thể sử dụng mã iframe sau:
<iframe class="lazyload" data-src="https://www.youtube.com/embed/<video_id>" width="560" height="315"></iframe>
Trong đó, “lazyload” là giá trị của thuộc tính “class”, giúp xác định rằng iframe này sẽ được tải bằng kỹ thuật lazy loading. “https://www.youtube.com/embed/<video_id>” là đường dẫn URL của video Youtube mà bạn muốn nhúng vào trang web của mình.
Sau khi bạn đã thêm thuộc tính “class” và “data-src” vào mã iframe của bạn, bạn có thể sử dụng các thư viện JavaScript như LazyLoad, Intersection Observer API hoặc tạo mã JavaScript tùy chỉnh để thực hiện kỹ thuật lazy loading cho iframe Youtube. Kỹ thuật này giúp tối ưu tốc độ tải trang web và cải thiện trải nghiệm người dùng bằng cách tải iframe chỉ khi người dùng cuộn trang đến vị trí chứa iframe.
Ví dụ, bạn có thể sử dụng thư viện LazyLoad để thực hiện kỹ thuật lazy loading cho iframe Youtube. Đầu tiên, bạn cần thêm thư viện này vào trang web của mình bằng cách thêm đoạn mã sau vào phần đầu của trang:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" integrity="sha512-2n2v1gwn3hRnN+9v0q5dHofl6nRtEYi8H1pWvH5+fMlH5XtxyZuK0Xz3gQJc/5F5yf4y6e5GKf2rUblKDc5nOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Sauđó, bạn có thể thêm đoạn mã JavaScript sau vào phần cuối của trang:
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyIframes = [].slice.call(document.querySelectorAll("iframe.lazyload"));
if ("IntersectionObserver" in window) {
var lazyIframeObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var lazyIframe = entry.target;
lazyIframe.src = lazyIframe.dataset.src;
lazyIframeObserver.unobserve(lazyIframe);
}
});
});
lazyIframes.forEach(function(lazyIframe) {
lazyIframeObserver.observe(lazyIframe);
});
}
});
</script>
Trong đó, thư viện LazyLoad được sử dụng để tải iframe Youtube khi người dùng cuộn trang đến vị trí chứa iframe. Mã JavaScript này được sử dụng để tìm tất cả các thẻ iframe có thuộc tính “class” là “lazyload”, và sử dụng Intersection Observer API để chèn thuộc tính “src” vào thẻ iframe khi người dùng cuộn trang đến vị trí chứa iframe.
Lưu ý rằng, để sử dụng kỹ thuật lazy loading cho iframe Youtube, bạn cần thêm thư viện JavaScript hoặc tạo mã JavaScript tùy chỉnh để thực hiện kỹ thuật này. Bạn có thể sử dụng các thư viện như LazyLoad, Intersection Observer API hoặc tạo mã JavaScript tùy chỉnh để tải iframe Youtube chỉ khi người dùng cuộn trang đến vị trí chứa iframe.
