This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Sunday, 20 May 2018

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/MhQKe-aERsU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Bạn chỉ cần thay đổi thành

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/MhQKe-aERsU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

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 !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js