Tăng tốc độ tải trang với lazy load Javascript

Tốc độ tải trang luôn là một vấn đề được các webmaster ưu ái hàng đầu, ngoài hình ảnh thì javascript là yếu tố ảnh hưởng rất lớn tới tốc độ tải trang. Ta thường có cách giải quyết với vấn đề trên bằng việc thêm các thuộc tính async hoặc defer vào <script, tuy nhiên với một số sau khi thêm thì code không hoạt động...

Tôi lấy ví dụ đơn giản một số js không quá cần thiết phải tải đồng thời với việc tải trang đó là facebook sdk dùng cho việc bình luận hoặc fanpage của facebook. Đa phần nó đều nằm ở phần sidebar, footer hoặc cuối bài viết vì thế ta hoàn toàn có thể lợi dụng .scroll() hoặc getBoundingClientRect() để tải js khi cuộn chuột tới một thành phần nào đó hoặc chiều cao được chỉ định. Hoặc có thể sử dụng onload() để tải file sau khi đã load xong trang

1. Ví dụ với .scroll()

Trường hợp này tôi muốn load js của google analytics với trang bài viết, thông thường thì khi đọc bài viết người đọc sẽ phải cuộn trang xuống. Khi cuộn tới một vị trí nhất định thì js sẽ được load sẽ giảm thiểu được kha khá tốc độ so với khi js được load ngay từ đầu

Tích hợp jquery nếu blog của bạn chưa có

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>

Code có dạng

function function_name() {
   // Your code
}

$(window).scroll(function() {
    if ($(window).scrollTop() > XXX) {
       function_name();
    }
});

Hiểu đơn giản function_name() sẽ được load khi cuộn trang tới độ cao XXX mà bạn đặt.

Trong trường hợp bạn muốn load js từ nguồn thứ 3 code có dạng

function function_name() {
     var t = document.createElement("script");
     t.src = "https://yourcode.js";
     document.body.appendChild(t);
}

$(window).scroll(function() {
    if ($(window).scrollTop() > XXX) {
       function_name();
    }
});

2. Sử dụng getBoundingClientRect()

Ví dụ tôi muốn load sdk của facebook, khi đó bạn sẽ cần chỉ định 1 div nào đó với id nào đó (ở đây tôi lấy 1 div có id là fb-plugin), khi cuộn chuột chạm tới div đó js mới được load. Code có dạng

function loadSDK() {
    var t = document.createElement("script");
    t.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=285887815280112&autoLogAppEvents=1", document.body.appendChild(t)
}
window.onscroll = function() {
    document.getElementById("fb-plugin").getBoundingClientRect().top < window.innerHeight && (loadSDK(), window.onscroll = null)
};

3. Sử dụng button ?

Cái này khá hay nhỉ, bấm vào mới bắt đầu tải js ! Thử nó với facebook comment xem sao

Code demo với button

<button id='showcmt' onClick='showComments();'>Comments</button>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' numposts='5' width='100%'/>

Tạo function load SDK Facebook khi có sự kiện click vào button

function showComments() {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = 'https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.12&appId=285887815280112&autoLogAppEvents=1';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

Hoàn toàn giải quyết được vấn đề quá cồng kềnh khi tích hợp bộ plugin của facebook vào website.

4. Sử dụng sự kiện onload

function your_function() {
 // Your code
}
window.onload = your_function;

Theo đó khi tải xong trang (js, css, image,...) thì code trong hàm your_function mới được thực thi

Với thủ thuật nhỏ nhưng vô cùng hay này hi vọng sẽ giúp ích cho bạn trong quá trình phát triển website ! Chúc thành công