Javascript làm chậm trang của bạn ? Tăng tốc độ load trang với kỹ thuật Asynchronous và Deferred

Website với nhiều script javascript thực thi sẽ làm giảm tốc độ load trang, làm trình duyệt đơ giật. Tăng tốc độ load trang với kỹ thuật Asynchronous và Deferred là kỹ thuật tốt nhất để tăng tốc website của bạn.

Để tăng tốc độ website cải thiện thứ hạng cần thiết trên Google, bạn có thể dùng các thủ thuật như bật nén Gzip, kỹ thuật caching … Tuy nhiên, bạn cũng cần lưu ý tới Javascript. Có quá nhiều các script thực thi cùng lúc trong lúc website của bạn được tải về sẽ làm trình duyệt đơ giật, làm cho website chậm hiển thị và điểm số về thời gian load trang của bạn có vấn đề. Bài viết này sẽ giúp các bạn tăng tốc độ load trang với kỹ thuật Asynchronous và Deferred áp dụng cho Javascript trên trang.

Vấn đề chính

Trong một website, bạn sẽ thấy rất nhiều script thực thi cùng thời gian tải trang. Kiểm tra thử tại công cụ PageSpeed Insights sẽ cho kết quả trung thực nhất. Và bạn phát hiện rằng chính các script là nguyên nhân chính chặn hiển thị website và làm chậm đáng kể nội dung hiển thị.

Bạn cài nút chia sẻ mạng xã hội, mã nhúng, một vài hiển thị Ajax. Tất cả các điều đó đều được thực thi bởi Javascript. Chưa kể, để chạy được Javascript thì trình duyệt sẽ dùng kha khá năng lực xử lý của một chiếc máy tính. Cụ thể như bạn vào trang mua sắm LAZADA chẳng hạn, bạn sẽ thấy chúng lung linh thế nào và “đơ” thế nào. Với máy tính CoreDuo mình test thì quả là chán.

Tại sao kỹ thuật Asynchronous và Deferred lại giúp tăng tốc ?

Bây giờ, mình vào chi tiết một chút về vấn đề kỹ thuật. Đây là hình ảnh mô phỏng cách mà trình duyệt dịch mã HTML kèm theo Javascript:

Mô tả thời gian tải trang và hiển thị của một website thông thường
Mô tả thời gian tải trang và hiển thị của một website thông thường

Trình duyệt sẽ tải HTML về, biên dịch và nếu gặp Script, nó sẽ tải Script về và biên dịch cùng với HTML. Như vậy, website của bạn trông sẽ lờ đờ, vỡ toang hoác vì trình duyệt đang kéo một phần HTML về nhưng phải đợi Javascript và biên dịch chúng xong mới kéo phần tiếp theo của HTML về.

Một script thông thường nhúng vào website sẽ khai báo code kiểu này trong thẻ <head></head> của website:

<script src="demo.js"></script>

Kỹ thuật Deferred

Mô tả thời gian tải trang của kỹ thuật Deferred
Mô tả thời gian tải trang của kỹ thuật Deferred

Sử dụng kỹ thuật Deferred trong website sẽ giúp tải javascript về độc lập với mã HTML. Trình duyệt sẽ tải toàn bộ HTML về đồng thời tải luôn javascript. Chỉ khi HTML được tải xong thì Javascript mới được thực thi !

Lưu ý: Nếu bạn chưa có kinh nghiệm triển khai kỹ thuật deferred thì rất có thể chúng không chạy 😀

Bạn có thể khai báo code trên website như thế này:

<script src="dm_defer.js" defer></script>

Kỹ thuật asynchronously

Một kỹ thuật nữa được ra đời cùng với HTML5, kỹ thuật load Async đối với các file Javascript. Đây là cách hay nhất hiện nay được nhiều webmaster và coder áp dụng. Bởi tính ưu việt của nó, lại dễ dàng chạy các script mà không cần các thủ thuật cao siêu. Đơn giản nó hoạt động như mô phỏng này:

Mô phỏng kỹ thuật Asynchronous và thời gian tải trang
Mô phỏng kỹ thuật Asynchronous và thời gian tải trang

Trình duyệt sẽ tải HTML và Script về đồng thời, khi script sẵn sàng thì nó thực thi và tải nốt phần HTML còn lại. Script được thực thi ngay trong lúc HTML được biên dịch nên các hàm Javascript dễ dàng chạy hơn. Đối với những người ít kinh nghiệm lập trình Javascript thì đây là cách tốt nhất nếu deffered không chạy hàm của bạn !

Khai báo trên code sẽ như thế này:

<script src="dm_async.js" async></script>

Sử dụng kỹ thuật nào cho website của tôi ?

Nếu bạn có kinh nghiệm lập trình Javascript thì đó không hẳn là một vấn đề. Các bạn lưu ý là kỹ thuật Deffered có từ trước và nó chạy được trên hầu hết các trình duyệt tới thời điểm này. Còn Async là kỹ thuật có sau và một số trình duyệt gặp vấn đề với nó. Tuy nhiên bạn cứ tạm thời yên tâm vì các trình duyệt mới nhất trên cả di động lẫn máy tính đều có thể chạy được với 2 kỹ thuật trên.

Ưu điểm của Deffered phải kể tới là khả năng hiển thị website thần tốc. Mọi HTML được tải về và Parse xong rồi mới tới Javascript. Nhưng vì nó chạy sau cho nên các hàm Javascript nào mà cần thực thi trước khi thẻ HTML xuất hiện thì nó sẽ ngừng chạy 😀

Cũng xin lưu ý thêm là trong trang, nếu bạn dùng nhiều kỹ thuật load javascript thì rất có thể chúng sẽ chạy hoặc không chạy. Hoặc lúc chạy được lúc không. Bạn nên sử dụng đồng bộ một kỹ thuật !

Nếu bạn dùng WordPress

Có một vài plugin giúp các bạn khắc phục thời gian tải trang bằng kỹ thuật Deffered hay Async. Các bạn có thể tham khảo plugin jQuery & Plugins Asynchronous Loader hoặc một plugin cải thiện tốc độ chung như AutoOptimize cũng rất ổn ! Lưu ý: Trong cài đặt sẽ có một vài lựa chọn để bạn có thể bật tắt qua lại cho tới khi script của bạn nó chạy 😀

Mời các bạn khám phá thêm cách mã hóa Javascript tránh lộ code nhé !

Chúc các bạn thành công !

TÁC GIẢ:

Tôi là Jam, thâm niên 7 năm thiết kế website và làm SEO. Hãy theo dõi blog của tôi để nhận được nhiều chia sẻ thú vị xung quanh chủ đề công nghệ.
Trang chủ / Công nghệ / Quản trị website / Javascript làm chậm trang của bạn ? Tăng tốc độ load trang với kỹ thuật Asynchronous và Deferred

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *