Bạn đã kiểm tra trang WordPress của bạn qua một công cụ kiểm tra hiệu suất theo hướng dẫn cách để xử lý vấn đề Defer Parsing of JavaScript (trì hoãn phân tích cú pháp JavaScript) trong WordPress chưa?
Việc này có thể có tác động tích cực đến thời gian tải trang của bạn, đặc biệt đối với khách truy cập trên điện thoại. Nhưng có thể hơi khó hiểu, đó là lý do tại sao mình 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ể thực hiện thay đổi này trên trang WordPress của chính bạn.
Dưới đây là những gì bạn sẽ học được trong bài viết này:
Nếu bạn muốn đi thẳng đến hướng dẫn, bạn có thể nhấp vào liên kết trong danh sách trên.
Nếu bạn đã từng kiểm tra trang WordPress của mình thông qua Google PageSpeed Insights, GTmetrix hoặc các công cụ kiểm tra tốc độ khác, thì bạn có thể gặp phải gợi ý về việc Defer Parsing of JavaScript.
Nhưng điều đó thực sự có nghĩa là gì? Và tại sao nó là một vấn đề quan trọng liên quan đến hiệu suất của trang web?
Về cơ bản, khi ai đó truy cập trang WordPress của bạn, máy chủ trang web của bạn sẽ cung cấp nội dung HTML của bạn cho trình duyệt của khách truy cập.
Sau đó, trình duyệt của khách bắt đầu truy cập từ trên đầu và đọc đoạn mã đến kết thúc để hiển thị trang web của bạn. Nếu trong khi đọc từ trên xuống dưới, nó tìm thấy bất kỳ JavaScript nào, nó sẽ dừng hiển thị phần còn lại của trang cho đến khi nó có thể lấy và phân tích tệp JavaScript.
Nó sẽ làm điều này cho mỗi đoạn JavaScript mà nó tìm thấy, có thể có tác động không tốt đến thời gian tải trang của bạn vì khách truy cập phải nhìn chằm chằm vào một màn hình trống trơn trong khi trình duyệt của họ đang tải xuống và phân tích tất cả JavaScript.
Nếu một script nhất định không cần thiết cho chức năng cốt lõi của trang web (ít nhất là việc tải trang ban đầu) thì bạn không muốn nó ảnh hưởng vào việc tải các phần quan trọng hơn của trang web, đó là lý do tại sao các công cụ kiểm tra tốc độ luôn bảo bạn trì hoãn phân tích cú pháp JavaScript.
Về bản chất, trang web của bạn sẽ thông báo cho trình duyệt của khách hãy đợi việc tải xuống và/hoặc phân tích cú pháp JavaScript cho đến khi nội dung chính trang web của bạn được 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ờ để tải xuống và phân tích cú pháp JavaScript không còn quá nhiều tác động xấu.
Bằng cách tăng tốc thời gian tải nội dung của bạn lên nhiều lần, bạn làm cho Google hài lòng và tạo trải nghiệm tốt hơn, nhanh hơn cho khách truy cập của bạn.
Để kiểm tra xem trang WordPress của bạn có cần trì hoãn phân tích cú pháp JavaScript hay không, bạn có thể kiểm tra thông qua công cụ GTmetrix.
GTmetrix sẽ cung cấp cho bạn mức điểm và liệt kê ra các đoạn script cụ thể cần được hoãn lại.
Có một vài cách khác nhau để trì hoãn 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 scripts của bạn:
Cả hai thuộc tính đều cho khách truy cập tải xuống JavaScript mà không cần tạm dừng phân tích cú pháp HTML. Tuy nhiên, điểm khác biệt là có lúc thuộc tính Async không tạm dừng phân tích cú pháp HTML để tải đoạn script về (như mặc định), mà nó tạm dừng trình phân tích cú pháp HTML để thực thi đoạn script ngay khi được tải xuống.
Với defer, khách truy cập vẫn sẽ tải xuống các đoạn script trong khi phân tích cú pháp HTML, nhưng những đoạn script này sẽ chờ để được phân tích sau khi hoàn thành việc phân tích cú pháp HTML.
Một lựa chọn khác, được đề xuất bởi Patrick Sexton của Varvy, sử dụng đoạn script để gọi một tệp JavaScript bên ngoài chỉ sau khi trang ban đầu được tải xong. Đ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 ban đầu 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 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, bởi vì mặc dù trang của bạn sẽ hiển thị sớm hơn, trình duyệt của khách truy cập vẫn sẽ hiển thị trang như đang tải nội dung (chỉ thấy phần đầu của trang) cho đến khi tất cả các đoạn script 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ọ nghĩ rằng nội dung không được tải đầy đủ.
Để 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:
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.
Async JavaScript là một plugin WordPress miễn phí từ Frank Goossens, người đã viết plugin Autoptimize khá 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 async hoặc defer.
Để 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 Cài đặt → Async JavaScript để cấu hình cho plugin.
Ở trên cùng, bạn có thể kích hoạt chức năng của plugin và chọn giữa async và defer. Hãy nhớ:
Kéo xuống, bạn cũng có thể chọn cách xử lý jQuery. Rất nhiều theme (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 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ách an toàn nhất là không chọn jQuery, nhưng bạn có thể thử nghiệm trì hoãn nó, để kiểm tra trang web của bạn kỹ lưỡng.
Kéo xuống tiếp, bạn cũng có thể thêm hoặc loại trừ các đoạn script cụ thể khỏi bị trì hoãn bằng thủ công, giao diện thân thiện với người dùng để cho phép bạn nhắm tới các theme hoặc plugin cụ thể đang hoạt động trên trang web:
Mặc dù chúng tôi không cho phép phần lớn plugin lưu đệm tại Kinsta, nhưng chúng tôi cho phép plugin WP Rocket vì nó được tích hợp để tương thích tốt với bộ đệm cấp máy chủ 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 File Optimization của bảng điều khiển WP Rocket. Tìm tùy chọn Load JavaScript deffered trong phần JavaScript Files.
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:
Ở trên, mình đã đề cập rằng Patrick Sexton của Varvy khuyên bạn nên sử dụng một đoạn mã chờ để tải xuống và thực thi JavaScript sau khi trang web của bạn hoàn tất việc tải trang ban đầu.
Bạn có thể triển khai phương pháp này bằng cách điều chỉnh đoạn script mà Varvy cung cấp và sau đó thêm đoạn script vào chủ đề của bạn ngay trước thẻ </ body>.
Đây là đoạn code từ Varvy:
Đảm bảo thay thế “defer.js” bằng tên / đường dẫn của tệp JavaScript thực tế mà bạn muốn trì hoãn. Sau đó, bạn có thể sử dụng wp footer hook để nạp code thông qua tập tin funtions.php của bạn.
Với cách này, bạn sẽ bọc code của Varvy vào một cái gì đó như thế này:
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 một plugin bằng cách thêm đoạn code sau vào tệp functions.php:
Về cơ bản, đoạn code 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 giống như plugin Async JavaScript cung cấp.
Trì hoãn việc phân tích cú pháp JavaScript trên trang WordPress của bạn là một vấn đề quan trọng liên quan đến hiệu suất trang web của bạn.
Khi bạn đã sử dụng một trong các phương pháp trên để trì hoãn phân tích cú pháp JavaScript trong WordPress, mình khuyên bạn nên thực hiện hai điều sau:
