[Thủ thuật WordPress] Cải thiện tốc độ tải trang với Plugin Async JS and CSS – Dạo loanh quanh chuyên mục plugin của wordpress mình tình cờ chộp được một plugin khá tiện ích cho các bạn khi muốn đẩy nhanh tốc độ tải trang. Với plugin này các JS và CSS sẽ được gom lại và được tải sau cùng điều này giúp cho tốc độ tải trang tăng lên đáng kể, bạn sẽ thấy sự khác biệt đáng kể khi sử dụng Plugin này!
Plugin Async JS and CSS làm cho tất cả các kịch bản được tải bởi các plugin khác được nạp theo cách không đồng bộ giống như Google PageSpeed Insights khuyến cáo. Chính vì vậy khi cài đặt plugin xong bạn hãy vào công cụ Google PageSpeed bạn sẽ thấy điểm số của website của bạn tăng lên một cách ấn tượng điều này rất tốt cho việc google để ý đến trang web của bạn!
Cải thiện tốc độ tải trang với Plugin Async JS and CSS
Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách cách thay đổi liên kết cũ thành liên kết mới trên wordpress giúp bạn có thể cập nhật lại các liên kết cũ thành liên kết mới một cách dễ dàng và nhanh chóng tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách cải thiện tốc độ tải trang với Plugin Async JS and CSS.
#Hướng dẫn cài đặt Plugin
Đầu tiên bạn cần cài đặt Plugin Async JS and CSSbằng 2 cách. Bạn có thể tải Plugin Async JS and CSS về máy tính tại đây > sau khi tải về bạn tiến hành vào Menu Gói mở rộng > Cài Plugin mới > Tải Plugin lên > chọn “Choose File” và dẫn đến Plugin bạn vừa tải về > sau đó chọn Cài đặt.
Hoặc đơn giản hơn bạn có thể cài đặt trực tiếp bằng cách bạn cũng vào Menu Gói mở rộng > Cài Plugin mới lúc này bạn hãy gõ từ khóa Async JS and CSS vào ô tìm kiếm Plugin sau đó bạn chỉ việc nhấn vào Cài đặt là xong.
Sau khi cài đặt xong bạn kích hoạt plugin lên nhé > Sau khi kích hoạt bạn sẽ thấy xuất hiện một Plugin có tên là Async Settings trong Menu Cài đặt.
#Cấu hình Plugin
Bạn click vô để tiến hành cấu hình Plugin, giao diện Plugin khá đơn giản với các cài đặt như sau!
Load Javascrip asynchronously: Tải JS không đồng bộ
Detect <script> tags in wp_head: Loại bỏ Script trong wp_head (đầu trang) – nếu khi bạn kích hoạt chức này mà xảy ra lỗi thì bạn cần vô hiệu hóa đi nhé.
Detect <script> tags in wp_footer: Loại bỏ Script trong wp_footer (dưới chân trang) – nếu khi bạn kích hoạt chức này mà xảy ra lỗi thì bạn cần vô hiệu hóa đi nhé.
Load CSS asynchronously: Tải CSS không đồng bộ
CSS loading method: Các phương thức tải CSS bạn nên để mặt định nhé.
Minify CSS: Nén CSS
Remove “?ver=XXX” part from URLs: Hủy bỏ các “?ver=XXX” trên URL
Exceptions (files to ignore and load in render-blocking way): Định nghĩa các file bạn muốn tải theo cơ chế không đồng bộ.
Sau khi thực hiện xong bạn lưu lại thay đổi và vào địa chỉ liên kết bên dưới
Hãy nhập địa chỉ website của bạn và kiểm tra kết quả xem nào? Quá là đơn giản để tăng tốc tốc độ tải trang của website của bạn phải không. Chúc bạn thành công!
Có cải thiện nhưng web cứ bị lỗi ko hiện ảnh dù đã bỏ check 2 ô đầu
Bạn thử bỏ những ô check CSS xem sao 😛
Bạn ơi cho mình hỏi plugin này với Async JavaScript thì nên dùng cái nào?
Mỗi cái đều có tính năng riêng, riêng mình thì mình thích Plugin này hơn!
Tại mình thấy thằng Async JavaScript thì có hỗ trợ Autoptimize
Do mình ko dùng song song hai cái nên mình ko đánh giá được tuy nhiên Plugin Async JavaScript có vẻ được cập nhật đều đặng vì thế đó là một lựa chọn tốt 😀
Cảm ơn admin đã chia sẻ thông tin hữu ích nhé.
Vâng cảm ơn bác đã ghé thăm – Chúc bác mộ ngày vui vẻ 😛