Speed up website with defer loading of iframes

Trong quá trình đăng bài cho website, bạn có thể sẽ cần nhúng 1 video từ nguồn khác (youtube, vimeo,...) vào bài viết của mình qua thẻ iframe. Điều này chắc chắn sẽ khiến cho tốc độ tải trang giảm đi rõ rệt vì sẽ xuất hiện thêm rất nhiều tài nguyên tệp cần tải xuống. Trong bài viết này tôi sẽ giới thiệu tới các bạn cách trì hoãn tải video để tăng tốc độ tải trang cho website


Ví dụ bạn nhúng 1 video từ youtube vào với code như sau

Bạn chỉ cần thay đổi thuộc tính src thành

Và xuất bản bài đăng

Tiếp theo bạn sẽ truy cập vào trang chỉnh sửa template và dán đoạn code sau trước thẻ đóng </body>

<script type='text/javascript'>//<![CDATA[
function init() {
    var vidDefer = document.getElementsByTagName('iframe');
    for (var i = 0; i < vidDefer.length; i++) {
        if (vidDefer[i].getAttribute('data-src')) {
            vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
        }
    }
}
window.onload = init;
//]]></script>

Code trên rất dễ hiểu thôi, đó là khi tất cả tài nguyên trang web (js, css, image,...) đã tải xong sẽ gán function init cho sự kiện onload. Trong function init sẽ tiến hành trả lại thuộc tính src cho thẻ iframe . Nói một cách nôm na là khi tải xong trang thì mới bắt đầu tải video.

Điều này sẽ giúp cho thời gian tải trang nhanh hơn và vẫn đảm bảo load được video lên trang. Nếu còn nghi ngờ bạn có thể đo tốc độ tải trước và sau khi áp dụng thủ thuật để thấy sự thay đổi

* Mở rộng: Tương tự bạn cũng có thể áp dụng nó với thẻ img.

<img data-src="image1.jpg" alt="image 1"/>
<img data-src="image2.jpg" alt="image 2"/>

<script type='text/javascript'>//<![CDATA[
function init() {
  var imgDefer = document.getElementsByTagName('img');
  for (var i = 0; i < imgDefer.length; i++) {
    if (imgDefer[i].getAttribute('data-src')) {
      imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
    }
  }
}
window.onload = init;
//]]></script>

Bạn có thể dùng notepad để thay thế src bằng data-src cho nhanh

Thủ thuật này rất hữu hiệu cho những website thường xuyên chia sẻ video qua link nhúng. Hi vọng bài viết sẽ giúp ích cho bạn

Good Luck !