Tải không đồng bộ JavaScript trong WordPress mà không cần dùng plugin.
Nếu bạn đã từng kiểm tra thử tốc độ load website của mình với công cụ Google PageSpeed Insights thì chắc hẳn đã ít nhất một lần nhìn thấy cảnh báo “Eliminate render-blocking JavaScript and CSS in above-the-fold content” (Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên) rồi phải không nào? Điều này có nghĩa là trình duyệt web sẽ tải các file .js và .css (dùng để hiển thị giao diện) trước khi hoàn tất việc tải phần text (chữ). Nó làm cho quá trình hiển thị phần text bị chậm đi. Và Google thì không thích điều đó.
Tham khảo thêm:
- Loại bỏ Query String trong WordPress không cần dùng plugin
- Minify HTML, JavaScript và CSS mà không cần plugin
Google cho rằng việc phần text hiển thị chậm sẽ ảnh hưởng đến trải nghiệm người dùng vì nội dung là thứ quan trọng nhất mà họ cần. Do đó, nếu website của bạn cũng đang gặp phải cảnh báo này, tốt nhất là nên tìm cách khắc phục nó. Và hướng giải quyết hiệu quả cho vấn đề này chính là kỹ thuật tải không đồng bộ hay còn gọi là Asynchronous (Async).
Tải không đồng bộ (Asynchronous) là gì?
Hiểu một cách đơn giản, kỹ thuật tải không đồng bộ sẽ yêu cầu trình duyệt hoàn tất việc tải phần text (chữ) trước khi tải JavaScript để bổ sung tính năng hoặc các hiệu ứng “hoa lá” đi kèm. Nó trái ngược với kỹ thuật tải đồng bộ (Synchronous) khi mà các thành phần của trang web được tải đồng thời.
Trong WordPress, các bạn có thể tải không đồng bộ JavaScript một cách đơn giản thông qua việc sử dụng plugin. Một số plugin hỗ trợ tải không đồng bộ JavaScript phổ biến mà các bạn có thể tham khảo bao gồm:
Nhiều plugin tạo cache như WP Rocket, W3 Total Cache, LiteSpeed Cache… cũng hỗ trợ sẵn tính năng này.
Tuy nhiên, nếu bạn không phải là tín đồ của plugin thì bài viết này là dành cho bạn. Ngay bây giờ, tôi sẽ hướng dẫn cho các bạn cách thiết lập tải không đồng bộ JavaScript mà không cần sử dụng plugin.
Tải không đồng bộ JavaScript mà không cần dùng plugin
Tất cả những gì mà các bạn cần làm là thêm đoạn code sau đây vào file functions.php
của theme hoặc child theme mà bạn đang sử dụng. Các bạn cũng có thể sử dụng plugin Code Snippets để chèn nhằm tránh nó bị xóa mất khi cập nhật theme:
//* Asynchronous JS without plugin
function async_js($tag){
$scripts_to_async = array('script-1.js', 'script-2.js', 'script-3.js', 'script-4.js', 'script-5.js');
foreach($scripts_to_async as $async_script){
if(true == strpos($tag, $async_script ) )
return str_replace( ' src', ' async="async" src', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'async_js', 10 );
Lưu ý:
- Thay
script-1.js
,script-2.js
… bằng tên các JavaScript tương ứng trên website của bạn. Nếu số lượng script ít hơn, các bạn có thể xóa bớt đi và ngược lại, hãy bổ sung thêm theo cấu trúc sẵn có. - Một số JavaScript sẽ gặp lỗi nếu bị tải không đồng bộ (nhất là
js/jquery/jquery.js
). Do đó các bạn nên loại bỏ những script này ra khỏi danh sách.
Các lấy tên của script, các bạn có thể xem trong ví dụ minh họa bên dưới.
Sau khi hoàn tất, lưu lại và xóa cache (nếu có) rồi kiểm tra kết quả bằng Google PageSpeed Insights. Thật đơn giản phải không nào? Chúc các bạn thành công!
Bạn có đang áp dụng kỹ thuật Asynchronous trên website của mình? Bạn biết phương pháp khác đơn giản hơn để tải không đồng bộ JavaScript trong WordPress? Hãy chia sẻ nó với chúng tôi bằng các sử dụng khung bình luận bên dưới.
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Anh cho em hỏi chỗ cách lấy tên js thì với các loại js của plugin thì lấy cả / như hướng dẫn ạ. Với cả các js ko phải của plguin thì lấy như nào ạ?
Bạn lấy làm sao cho tên của file JS đó có thể dùng để phân biệt được với những file JS khác là được nhé.
Không hiểu lắm chỗ lấy tên JS. Tại có luôn cả đường dẫn theo hướng dẫn màu đỏ. Nếu không phải JS của plugin thì xác định thế nào anh.
cám ơn ,Bác Hiếu, Em áp dụng thấy hiệu quả, Bác có thể viết 1 bài giúp thông não về ” Trì hoãn tải CSS không dùng” đưa các css này xuống chân trang tải sau. Em kiểm tra PageSpeed Insights thấy nó báo , mà chưa đủ công lực để làm , có thể áp dụng kỹ thuật tải không đồng bộ cho css được không ạ, cám ơn chúc Bác sức khỏe thành công
Bạn có thể dùng các plugin như WP Rocket, LiteSpeed Cache hay Autoptimize để làm việc đó. Còn code thì hiện tại chưa có đâu. :P
Có code nào tương tự làm cho css không anh. Em bị lỗi chặn hiển thị css
WP Rocket, LiteSpeed Cache… đều hỗ trợ async CSS.
Em không sài 2 plugin đó vs lại e thích code hơn cho nó nhẹ á anh
Không có đâu nhé.
Vâng cám ơn anh. Để em thử tìm trên mạng xem
e cũng xài wp rocket mà bỏ mấy url java chặn hiển thị vào mà kiểm tra nó vẫn k hiệu quả . có xung khắc với plugin nào k a https://miraclex.vn/