Async JS/CSS – Bộ 3 plugin thần thánh giúp tăng tốc WordPress



Đây là plugin sau cùng mà mình muốn giới thiệu với các bạn trong “bộ 3 plugin thần thánh”. Tại sao mình lại giới thiệu nó cuối cùng? Cái gì cũng có nguyên do của nó và đây là lý do của mình:

“Async Js and Css (AJC) cho hiệu quả tăng tốc không mấy rõ rệt với những site WordPress thông thường”. Đơn giản vì em nó ít khi có được “đất diễn”. 🙁

Thôi, trước tiên ta cứ đi vào định nghĩa cái đã. Mình sẽ giải thích lí do sau.



1. Công nghệ Async là gì?

Bình thường, khi các bạn mở 1 trang web bất kì, trình duyệt sẽ phân tích mã nguồn trang, tải các thành phần trang về để hiển thị. Tuy nhiên, mỗi khi gặp phải 1 đoạn mã javascript (js), trình duyệt sẽ phải ngưng tải các thành phần còn lại để tải xong mã js này rồi xử lí nó. Điều này rõ ràng khiến tốc độ tải trang chậm hơn, tốn kém thời gian, khiến người dùng dễ mất kiên nhẫn mà thoát mất. Và từ bất cập đó, công nghệ Async ra đời với mục đích làm cho trình duyệt mỗi khi gặp mã js sẽ tiếp tục load đoạn mã đó song hành với các thành phần khác. Chỉ khi đoạn mã được load xong xuôi thì mới tiến hành xử lí. Như vậy sẽ giúp ngăn “thời gian chết” của việc load javascript, từ đó giảm thời gian tải trang xuống nhiều lần.

2. “Đất diễn” thực sự cho Async

Mọi anh hùng đều phải có “đất diễn” thì mới trổ hết tài nghệ ra được. Môi trường thích hợp nhất để AJC thi triển hết võ công chính là 1 trang web với đầy rẫy các mã javascript chạy ngang dọc từ trên xuống dưới. Mà mặc định 1 trang WordPress chỉ có vài ba đoạn mã wp-emoji-release.min.js, wp-embed.min.js… nên vẫn chưa phải sân chơi thực sự để AJC thể hiện. Ấy thế mà, chỉ cần bạn chèn thêm vào WordPress mấy cái nút chia sẻ mạng xã hội, vài cái video Youtube hay hệ thống comment của bên thứ 3 của Facebook, Disqus thì lúc đó bạn mới thấy rõ được sự khác bọt giữa việc dùng và không dùng Async Js and Css.

3. Cài đặt, sử dụng Async JS and CSS – “Kẻ bị người đời lãng quên”

Lưu ý: Plugin này có chức năng hoàn toàn tương tự với Rocket Loader trên Cloudflare. Bởi vậy bạn chỉ nên chọn 1 trong 2 thằng để sử dụng thôi: dùng cái này thì phải tắt cái kia đi.
Giống như Limit Login Attempts, Async JS and CSS cũng là kẻ đang bị người đời dần lãng quên, do không còn được cập nhật gì trong hơn 3 năm trở lại đây. Nhưng điều đó không có nghĩa là nó không tương thích với các phiên bản mới của WordPress.

Vẫn như những gì mình từng nói về “bộ 3 plugin thần thánh”, đặc điểm chung là cực kì dễ cài đặt và sử dụng. AJC cũng không phải ngoại lệ. Chỉ đơn giản cài và kích là xong.

Mục Setting các bạn có thể để như sau là ok.

Nếu xảy ra tình trạng lỗi giao diện thì các bạn bỏ tích các mục liên quan đến CSS đi là xong.

  • Detect <script> tags in wp_head
  • Detect <script> tags in wp_footer
  • Load CSS asynchronously
  • Minify CSS

4. Thử nghiệm khả năng tăng tốc tải trang của AJC

Cũng như trong bài giới thiệu về a3 Lazy Load, hôm nay, mình cũng sẽ làm cuộc thử nghiệm khả năng của AJC với 1 bài viết (đã được cache bởi WP Fastest Cache) chứa 1 video Youtube, 1 nút like/share Facebook và 1 khung comment Facebook. Tất cả plugin đều bị tắt, chỉ để lại mỗi plugin tạo cache và AJC mà thôi. Dưới đây là kết quả test với Pingdom tool và GTMetrix.

Khi không kích hoạt AJC:

Khi có kích hoạt AJC:

Như trên có thể thấy, việc dùng AJC giúp rút ngắn thời gian tải trang xuống từ 0,6 – 1,2 giây. Con số này không nhỏ đâu ạ!

5. Kết luận

Giống như việc tạo cache và thêm lazy load vào Wordpress, xử lý Async javascript cũng là 1 trong những ưu tiên hàng đầu cần phải làm trong “công cuộc tăng tốc tải trang, cải thiện trải nghiệm người dùng”. Bạn đã thấy rõ những hiệu quả mà Async mang lại? Vậy còn chần chờ gì nữa mà không thử luôn ngay hôm nay. 🙂





Bình luận

avatar