Cách trì hoãn phân tích cú pháp JavaScript trong WordPress (4 phương pháp)

Bạn có chạy trang web WordPress của mình thông qua một công cụ kiểm tra hiệu suất chỉ để được đáp ứng hướng dẫn phân tích cú pháp (trì hoãn JavaScript) trong WordPress không?

Cùng chiasefree tham khảo cách trì hoãn javascript nhé

4 Cách trì hoãn phân tích cú pháp JavaScript trong WordPress
Cách phân tích cú pháp Defer JavaScript trong WordPress (4 phương pháp)

Việc triển khai thay đổi này có thể có tác động tích cực đến thời gian tải trang của trang web của bạn, đặc biệt là đối với khách truy cập trên thiết bị di động. Nhưng cảnh báo có thể hơi khó hiểu, đó là lý do tại sao chúng tôi sẽ giải thích chính xác ý nghĩa của việc trì hoãn phân tích cú pháp JavaScript và cách bạn có thể triển khai thay đổi này trên trang web WordPress của mình.

Đây là những gì bạn sẽ học được trong bài viết này:

Nếu bạn chỉ muốn chuyển thẳng đến hướng dẫn, bạn có thể nhấp vào liên kết cuối cùng trong danh sách ở trên.

Phân tích cú pháp Defer JavaScript trong WordPress có nghĩa là gì?

Nếu bạn đã từng chạy trang web WordPress của mình thông qua Google PageSpeed ​​Insights, GTmetrix hoặc các công cụ kiểm tra tốc độ trang khác, có thể bạn đã gặp đề xuất hoãn phân tích cú pháp JavaScript.

Nhưng… điều đó thực sự có nghĩa là gì? Và tại sao nó là một xem xét hiệu suất quan trọng?

Về cơ bản, khi ai đó truy cập trang web WordPress của bạn, máy chủ của trang web sẽ cung cấp nội dung HTML của trang web đến trình duyệt của khách truy cập đó.

Sau đó, trình duyệt của khách truy cập bắt đầu ở trên cùng và duyệt qua mã để hiển thị trang web của bạn. Nếu, khi di chuyển từ trên xuống dưới, nó tìm thấy bất kỳ JavaScript nào, nó sẽ ngừng hiển thị phần còn lại của trang cho đến khi nó có thể tìm nạp và phân tích cú pháp tệp JavaScript.

Nó sẽ thực hiện điều này cho mỗi tập lệnh mà nó tìm thấy, điều này có thể có ảnh hưởng tiêu cực đến thời gian tải trang của trang web của bạn vì khách truy cập cần nhìn chằm chằm vào màn hình trống trong khi trình duyệt của họ tải xuống và phân tích cú pháp tất cả JavaScript.

Nếu một tập lệnh nhất định không cần thiết cho hoạt động cốt lõi của trang web của bạn (ít nhất là khi tải trang đầu tiên), bạn không muốn nó cản trở việc tải các phần quan trọng hơn của trang web của bạn, đó là lý do tại sao trang đó các công cụ kiểm tra tốc độ luôn yêu cầu bạn trì hoãn việc phân tích JavaScript.

Vậy trì hoãn phân tích cú pháp JavaScript có nghĩa là gì?

Về cơ bản, trang web của bạn sẽ thông báo cho trình duyệt của khách truy cập đợi để tải xuống và / hoặc phân tích cú pháp JavaScript cho đến khi nội dung chính của trang web của bạn đã tải xong. Tại thời điểm đó, khách truy cập đã có thể xem và tương tác với trang của bạn, vì vậy thời gian chờ đợi để tải xuống và phân tích cú pháp mà JavaScript không còn có tác động tiêu cực như vậy nữa.

Bằng cách tăng tốc thời gian tải trong màn hình đầu tiên của nội dung, bạn làm cho Google hài lòng và tạo ra trải nghiệm tốt hơn, nhanh hơn cho khách truy cập của bạn.

Làm thế nào để biết nếu bạn cần trì hoãn phân tích cú pháp JavaScript

Để kiểm tra xem trang web WordPress của bạn có cần hoãn phân tích JavaScript hay không, bạn có thể chạy trang web của mình thông qua GTmetrix.

GTmetrix sẽ cho bạn điểm và cũng liệt kê các tập lệnh cụ thể cần được hoãn lại:

Các phương pháp khác nhau để trì hoãn việc phân tích cú pháp JavaScript

Có một số cách khác nhau để trì hoãn việc phân tích cú pháp JavaScript. Đầu tiên, có hai thuộc tính mà bạn có thể thêm vào tập lệnh của mình:

  • Async – Không đồng bộ
  • Defer – Hoãn lại

Cả hai thuộc tính đều cho phép trình duyệt của khách truy cập tải xuống JavaScript mà không tạm dừng phân tích cú pháp HTML. Tuy nhiên, sự khác biệt là trong khi không đồng bộ không tạm dừng phân tích cú pháp HTML để tìm nạp tập lệnh (như hành vi mặc định), nó sẽ tạm dừng trình phân tích cú pháp HTML để thực thi tập lệnh sau khi nó được tìm nạp.

Với việc trì hoãn, trình duyệt của khách truy cập sẽ vẫn tải xuống các tập lệnh trong khi phân tích cú pháp HTML, nhưng họ sẽ đợi để phân tích cú pháp tập lệnh cho đến khi quá trình phân tích cú pháp HTML hoàn tất.

Hình ảnh này từ Phát triển với Web đã thực hiện một công việc tuyệt vời trong việc giải thích sự khác biệt:

4 Cách trì hoãn phân tích cú pháp JavaScript trong WordPress
Hình ảnh giải thích async vs defer

Một tùy chọn khác, được đề xuất bởi Patrick Sexton của Varvy, sử dụng một tập lệnh để gọi một tệp JavaScript bên ngoài chỉ sau khi quá trình tải trang đầu tiên kết thúc. Điều này có nghĩa là trình duyệt của khách truy cập sẽ không tải xuống hoặc thực thi bất kỳ JavaScript nào cho đến khi quá trình tải trang đầu tiên kết thúc.

Cuối cùng, một cách tiếp cận khác mà bạn sẽ thấy là chỉ cần di chuyển JavaScript của bạn xuống cuối trang. Tuy nhiên, phương pháp này không phải là một giải pháp tuyệt vời vì mặc dù trang của bạn sẽ hiển thị sớm hơn, nhưng trình duyệt của khách truy cập sẽ vẫn hiển thị trang khi đang tải cho đến khi tất cả các tập lệnh kết thúc. Điều này có thể ngăn một số khách truy cập tương tác với trang của bạn vì họ cho rằng nội dung chưa được tải đầy đủ.

Cách phân tích cú pháp Defer JavaScript trong WordPress (4 phương pháp)

Để trì hoãn việc phân tích cú pháp JavaScript trong WordPress, có ba cách chính bạn có thể thực hiện:

    • Plugin – có một số plugin WordPress miễn phí và cao cấp tuyệt vời để trì hoãn việc phân tích cú pháp JavaScript. Chúng tôi sẽ hướng dẫn bạn cách làm như vậy với hai plugin phổ biến.
  • Phương pháp Varvy – nếu bạn am hiểu công nghệ, bạn có thể chỉnh sửa mã trang web của mình trực tiếp và sử dụng đoạn mã từ Varvy.
  • Tệp Functions.php – bạn có thể thêm đoạn mã vào tệp functions.php của chủ đề con để tự động hoãn các tập lệnh.

Bạn có thể nhấp vào bên trên để chuyển thẳng đến phương pháp ưa thích của mình hoặc đọc qua tất cả các kỹ thuật để tìm ra phương pháp phù hợp nhất với bạn.

1. Plugin JavaScript Async miễn phí

Async JavaScript là một plugin WordPress miễn phí của Frank Goossens, người đứng sau plugin Autoptimize phổ biến.

Nó cung cấp cho bạn một cách đơn giản để trì hoãn phân tích cú pháp JavaScript bằng cách sử dụng không đồng bộ hoặc trì hoãn.

Để bắt đầu, bạn có thể cài đặt và kích hoạt plugin miễn phí từ WordPress.org. Sau đó, đi tới Settings → Async JavaScript để định cấu hình plugin.

Ở trên cùng, bạn có thể bật chức năng của plugin và chọn giữa không đồng bộ và trì hoãn. Nhớ lại:

Async tải xuống JavaScript trong khi vẫn phân tích cú pháp HTML nhưng sau đó tạm dừng phân tích cú pháp HTML để thực thi JavaScript.

Trì hoãn tải xuống JavaScript trong khi vẫn phân tích cú pháp HTML và đợi thực thi nó cho đến khi quá trình phân tích cú pháp HTML kết thúc.

Cách sử dụng plugin Async JavaScript
Cách sử dụng plugin Async JavaScript

Ngoài ra, bạn cũng có thể chọn cách xử lý jQuery. Nhiều chủ đề và plugin phụ thuộc rất nhiều vào jQuery, vì vậy nếu bạn cố gắng trì hoãn việc phân tích cú pháp các tập lệnh jQuery, bạn có thể phá vỡ một số chức năng cốt lõi của trang web của mình. Cách tiếp cận an toàn nhất là loại trừ jQuery, nhưng bạn có thể thử nghiệm với việc trì hoãn nó. Chỉ cần đảm bảo kiểm tra trang web của bạn một cách kỹ lưỡng.

Hơn nữa, bạn cũng có thể bao gồm hoặc loại trừ các tập lệnh cụ thể bị hoãn lại theo cách thủ công, bao gồm một tính năng thân thiện với người dùng để cho phép bạn nhắm mục tiêu các chủ đề hoặc plugin cụ thể đang hoạt động trên trang web của bạn:

Các quy tắc bao gồm / loại trừ JavaScript không đồng bộ
Các quy tắc bao gồm / loại trừ JavaScript không đồng bộ

2. Sử dụng Plugin WP Rocket

Nếu bạn đang sử dụng dịch vụ hosting tại Kinsta thì plugin WP Rocket được tích hợp sẵn tối ưu tốt với bộ nhớ đệm cấp máy chủ của Kinsta.

Ngoài một loạt các kỹ thuật tối ưu hóa hiệu suất khác, WP Rocket có thể giúp bạn trì hoãn việc phân tích cú pháp JavaScript trong tab Tối ưu hóa Tệp của bảng điều khiển WP Rocket. Tìm tùy chọn  Load JavaScript deferred (Tải JavaScript hoãn lại) trong phần JavaScript Files(Tệp JavaScript).

Giống như plugin Async JavaScript, WP Rocket cũng cho phép bạn loại trừ jQuery để tránh các vấn đề với nội dung trang web của bạn:

Cách hoãn phân tích cú pháp JavaScript với WP Rocket
Cách hoãn phân tích cú pháp JavaScript với WP Rocket

3. Sử dụng Phương pháp được Đề xuất của Varvy (Code)

Trước đó, chúng tôi đã đề cập rằng Patrick Sexton của Varvy khuyên bạn nên sử dụng đoạn mã chờ tải xuống và thực thi JavaScript cho đến khi trang web của bạn hoàn thành tải trang đầu tiên.

Bạn có thể triển khai phương pháp này bằng cách tinh chỉnh đoạn mã mà Varvy cung cấp, sau đó thêm tập lệnh vào chủ đề của bạn ngay trước thẻ đóng .

Đây là mã từ Varvy:

Đảm bảo thay thế “defer.js” bằng tên / đường dẫn tệp thực của tệp JavaScript mà bạn muốn hoãn lại. Sau đó, bạn có thể sử dụng hook wp_footer để chèn mã qua tệp functions.php của chủ đề con của bạn.

Với cách tiếp cận này, bạn sẽ bọc mã của Varvy trong một cái gì đó như sau:

4. Trì hoãn JavaScript qua tệp functions.php

Cuối cùng, bạn cũng có thể thêm thuộc tính defer vào các tệp JavaScript của mình mà không cần plugin bằng cách thêm đoạn mã sau vào tệp functions.php của bạn:

Về cơ bản, đoạn mã này yêu cầu WordPress thêm thuộc tính defer vào tất cả các tệp JavaScript của bạn ngoại trừ jQuery.

Nó nhanh chóng và dễ dàng, nhưng nó không cung cấp cho bạn mức độ kiểm soát chi tiết như plugin Async JavaScript cung cấp.

Bạn có nhận được thông báo *Cảnh báo Javascript phân tích cú pháp hoãn lại * không? Đừng lo lắng … Hãy khắc phục ngay với 4 phương pháp này! 🚀⏳

Lời kết

Trì hoãn phân tích cú pháp JavaScript trên trang web WordPress của bạn là một cân nhắc hiệu suất quan trọng.

Khi bạn đã sử dụng một trong các phương pháp ở trên để hoãn phân tích cú pháp JavaScript trong WordPress, chúng tôi khuyên bạn nên thực hiện hai điều:

  • Kiểm tra trang web của bạn để đảm bảo rằng việc trì hoãn một số tập lệnh nhất định không làm hỏng nội dung trong màn hình đầu tiên. Một lần nữa, điều này thường xảy ra với jQuery, đó là lý do tại sao nhiều công cụ cho phép bạn loại trừ jQuery.js. Tuy nhiên, nó cũng có thể xảy ra với các tập lệnh khác.
  • Chạy lại trang web của bạn thông qua GTmetrix để đảm bảo rằng trang web của bạn đang trì hoãn nhiều tập lệnh nhất có thể (bạn có thể không đạt điểm tuyệt đối nếu loại trừ jQuery – nhưng điểm của bạn sẽ tốt hơn).

Bạn có bất kỳ câu hỏi nào về cách trì hoãn phân tích cú pháp JavaScript trong WordPress không? Hỏi đi trong các ý kiến!

Bài viết được dịch từ bài “How to Defer Parsing of JavaScript in WordPress (4 Methods)” – Kinsta.com

Bạn nghĩ sao về bài viết này?
+1
0
+1
0
+1
0
+1
0
+1
0


Lưu ý:
→ Vui lòng bình luận bằng tiếng Việt có dấu.
→ Hãy dùng tên và email thật của bạn khi comment.
→ Không sử dụng keyword trong ô Name.
→ Nếu có ý định Spam link thì hãy quên đi nhé.
→ Tất cả bình luận đều được kiểm duyệt vì thế hãy cẩn thận trước khi comment.
Xin cám ơn!

Add Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.