Sử dụng Asynchronous trong WordPress

Cập nhật lần cuối vào

Kỹ thuật Asynchronous được sử dụng khá nhiều trong lập trình, nó giúp chúng ta giải quyết được công việc trong khi mọi thứ khác vẫn tiếp tục hoạt động. Đối với WordPress thì Asynchronous cũng hữu dụng không kém, khi mà bạn sử dụng quá nhiều JavaScript trên trang của bạn, để giúp cho website chạy nhanh hơn thì bạn nên áp dụng kỹ thuật bất đồng bộ này.

Sử dụng Asynchronous trong WordPress

Chúng ta tìm hiểu qua một chút khái niệm về Asynchronous, từ này dịch sang Tiếng Việt có thể gọi là bất đồng bộ hoặc không đồng bộ. Khi bạn giải quyết nhiều công việc, nếu áp dụng kỹ thuật bất đồng bộ vào thì tất cả công việc sẽ đều thực hiện cùng lúc, không phải đợi một công việc này làm xong rồi mới đến thực thi công việc khác.

Xem thêm: Thuộc tính async và defer trong JavaScript

Nếu bạn có quan tâm đến tốc độ tải trang của WordPress, nếu bạn có sử dụng Google PageSpeed Insights để tối ưu cho trang web của bạn thì bạn nên xem qua bài viết này để áp dụng kỹ thuật Asynchronous vào WordPress. Nếu bạn không biết nhiều về code, bạn hoàn toàn có thể sử dụng plugin hỗ trợ, bên dưới là danh sách các plugin cho phép bạn sử dụng kỹ thuật Asynchronous vào WordPress:

Trong 2 plugin bên trên thì plugin Async JS and CSS được nhiều người sử dụng hơn và nó cũng được đánh giá nhiều hơn. Lần cập nhật cuối cùng của plugin Async JS and CSS là vào ngày 18/11/2013, cũng khá lâu so với thời điểm hiện tại, nhưng nếu bạn không phải là lập trình viên WordPress thì bạn hoàn toàn có thể tin dùng cái này thay vì phải tự tay viết.

Nếu bạn thích mày mò code hoặc đang làm lập trình WordPress thì bạn có thể áp dụng filter bên dưới để thêm thuộc tính async vào trong khi tải JavaScript.

function sb_theme_clean_url($url) {
    if(false === strpos($url, '.js') || false !== strpos($url, 'jquery.js') || false !== strpos($url, 'jquery.min.js')) {
        return $url;
    } elseif(false !== strpos($url, '.js')) {
        $url = "$url' async='async";
    }
    return $url;
}
add_filter('clean_url', 'sb_theme_clean_url', 11, 1);

Như vậy là các tập tin JavaScript của bạn đã được thêm thuộc tính async vào, tuy nhiên bạn nên phân biệt được khi nào nên dùng async, khi nào nên dùng defer và khi nào thì tải JavaScript theo cách bình thường. Đối với các thư viện bạn dùng lại, các code của bạn phụ thuộc vào thư viện đó thì bạn nên để nó load bình thường. Trong trường hợp bên trên là mình đã viết các hàm kiểm tra để tránh thêm async vào jQuery.