• Trang chủ
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • Hosting và Domain
  • Kiếm tiền
  • Đánh giá
  • Khuyến mãi
  • Thông báo
  • Giới thiệu
  • Liên hệ

WP Căn bản

Kiến thức căn bản cho người dùng WordPress

paradise-child-theme-wordpress-theme-tot-nhat
  • Dịch vụ WordPress Hosting
  • Dịch vụ tối ưu WordPress
  • Dịch vụ quét mã độc WordPress
  • Mua Paradise child theme
Trang chủ » WordPress » Thủ thuật WordPress » Tải không đồng bộ JavaScript trong WordPress mà không dùng plugin
hosting-tot-nhat-danh-cho-wordpress

Tải không đồng bộ JavaScript trong WordPress mà không dùng plugin

Cập nhật: 25/04/2023 Trung Hiếu 44 Bình luận

Mục lục Hiện
  • 1. Tải không đồng bộ (Asynchronous) là gì?
  • 2. Tải không đồng bộ JavaScript mà không cần dùng plugin

Tải không đồng bộ JavaScript trong WordPress mà không cần dùng plugin.

tai-khong-dong-bo-javascript-trong-wordpress

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:

  • Async JavaScript (download)
  • Async JS and CSS (download)

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.

ten-cua-javascript

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. :)

  • Chia sẻ lên Facebook
  • Chia sẻ lên Twitter
  • Chia sẻ lên LinkedIn

Bài viết liên quan

Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Tính năng Crawl Optimization của plugin Yoast SEO
Tính năng Crawl Optimization của plugin Yoast SEO
Vô hiệu hóa WooCommerce Brands để tăng tốc độ
Vô hiệu hóa WooCommerce Brands để tăng tốc độ

Chuyên mục: Thủ thuật WordPress Thẻ: Tăng tốc WordPress

dich-vu-wordpress-hosting-chong-ddos-mien-phi

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Tôi là người sáng lập và đứng sau mọi hoạt động của WP Căn bản. Tìm hiểu thêm về tôi tại đây.

Bài viết trước « Kiểm tra dữ liệu có cấu trúc cho website với công cụ của Google
Bài viết sau Loại bỏ post info và post meta khỏi các trang lưu trữ trong Genesis »

Reader Interactions

Bình luận

    Để lại một bình luận Hủy

    Tất cả các bình luận đều sẽ được kiểm duyệt nghiêm ngặt. Mọi bình luận trái quy định sử dụng sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn. Vui lòng đọc kỹ quy định trước khi bình luận. Xin cảm ơn!

  1. chung cư hà nội 4 bình luậnviết

    25/04/2023 lúc 14:37

    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ình luận
    • Trung Hiếu Quản lýviết

      25/04/2023 lúc 18:25

      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é.

      Bình luận
  2. Pháp 10 bình luậnviết

    02/07/2019 lúc 21:48

    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.

    Bình luận
  3. Minh Tùng 1 bình luậnviết

    02/01/2019 lúc 07:16

    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ình luận
    • Trung Hiếu Quản lýviết

      02/01/2019 lúc 07:52

      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

      Bình luận
  4. Linh 5 bình luậnviết

    27/12/2018 lúc 12:56

    Có code nào tương tự làm cho css không anh. Em bị lỗi chặn hiển thị css

    Bình luận
    • Trung Hiếu Quản lýviết

      27/12/2018 lúc 12:57

      WP Rocket, LiteSpeed Cache… đều hỗ trợ async CSS.

      Bình luận
      • Linh 5 bình luậnviết

        27/12/2018 lúc 12:59

        Em không sài 2 plugin đó vs lại e thích code hơn cho nó nhẹ á anh

        Bình luận
        • Trung Hiếu Quản lýviết

          27/12/2018 lúc 13:01

          Không có đâu nhé.

          Bình luận
          • Linh 5 bình luậnviết

            27/12/2018 lúc 13:05

            Vâng cám ơn anh. Để em thử tìm trên mạng xem

  5. Long 7 bình luậnviết

    11/10/2018 lúc 13:33

    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/

    Bình luận
« 1 2

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Tham gia cùng 10.000+ người khác.

Theo dõi qua mạng xã hội

Facebook Group

wpcanban-facebook-group

Bạn đang tìm gì?

WordPress căn bản

Bảo mật WordPress

Tăng tốc WordPress

Sửa lỗi WordPress

Thủ thuật Genesis

Thủ thuật SEO

Thủ thuật CloudFlare

Thủ thuật LiteSpeed

Thủ thuật WooCommerce

Sử dụng theme Paradise

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-wordpress-mien-phi

Dịch vụ quét mã độc miễn phí

dich-vu-quet-ma-doc-wordpress-mien-phi

Footer

Bài viết mới nhất

  • Plugin chống copy nội dung siêu nhẹ cho WordPress 20/05/2025
  • Tự động tạo alt-text cho hình ảnh trong WordPress 18/05/2025
  • Năm 2025 rồi, có nên viết blog nữa không? 07/05/2025
  • Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản 16/04/2025

Bình luận mới nhất

  • Trung Hiếu trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Khánh trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Trung Hiếu trong Năm 2025 rồi, có nên viết blog nữa không?
  • Tuấn Kỷ Nguyên Blog trong Năm 2025 rồi, có nên viết blog nữa không?

Thông tin hữu ích

  • Giới thiệu bản thân
  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

9 Chuyên mục - 1.001 Bài viết - 35.504 Bình luận

Bản quyền © 2014 - 2025 · WP Căn bản (tiền thân là eBooksvn.com) · Sử dụng Paradise child theme và dịch vụ WordPress Hosting