Bạn đã 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ỉ để nhận được hướng dẫn trì hoãn phân tích cú pháp JavaScript trong WordPress?
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 trên trang web của bạn, đặc biệt đố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 trong bài viết này
Nếu bạn chỉ muốn chuyển thẳng đến phầ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
Thích xem phiên bản video?
Trì hoãn phân tích cú pháp 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, thì có lẽ bạn đã bắt gặp đề xuất trì hoãn phân tích cú pháp JavaScript
Xem cách Kinsta chống lại đối thủ. So sánh
Nhưng… điều đó thực sự có nghĩa là gì?
Về cơ bản, khi ai đó truy cập trang web WordPress của bạn, máy chủ của trang web của bạn sẽ cung cấp nội dung HTML của trang web của bạn tới trình duyệt của khách truy cập đó
Sau đó, trình duyệt của khách truy cập sẽ bắt đầu ở trên cùng và xem 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 có thể tìm nạp và phân tích cú pháp tệp JavaScript
Nó sẽ làm điều này cho từng tập lệnh mà nó tìm thấy, điều này có thể có tác độ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ột 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 đối với hoạt động cốt lõi của trang web của bạn [ít nhất là khi tải trang ban đầu], thì bạn không muốn tập lệnh đó cản trở 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 trang đó
Vậy việc 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ẽ yêu cầu 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, do đó, thời gian chờ đợi để tải xuống và phân tích cú pháp 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 khiến 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
Cách nhận 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 trì hoãn phân tích cú pháp JavaScript hay không, bạn có thể chạy trang web của mình thông qua GTmetrix
GTmetrix sẽ chấm điểm cho bạn 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 phân tích cú pháp JavaScript
Có một vài 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
Đăng kí để nhận thư mới
Bạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?
Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress
Theo dõi ngay- Không đồng bộ
- 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 cần tạm dừng phân tích cú pháp HTML. Tuy nhiên, sự khác biệt là trong khi async 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 được tìm nạp
Với tính năng trì hoãn, trình duyệt của khách truy cập sẽ vẫn tải xuống 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ọa này từ Phát triển với Web thực hiện rất tốt việc giải thích sự khác biệt
Một tùy chọn khác, được đề xuất bởi Patrick Sexton của Varvy, sử dụng tập lệnh để chỉ gọi tệp JavaScript bên ngoài sau khi quá trình tải trang ban đầu 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 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 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 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 sẽ vẫn hiển thị trang đ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 trì hoãn phân tích cú pháp 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 cao cấp và miễn phí tuyệt vời để trì hoãn việc phân tích cú pháp JavaScript. Chúng tôi sẽ chỉ cho bạn cách thực hiện với hai plugin phổ biến
- Phương pháp Varvy – nếu am hiểu về công nghệ, bạn có thể trực tiếp chỉnh sửa mã trang web của mình và sử dụng đoạn mã từ Varvy
- Chức năng. php – bạn có thể thêm một đoạn mã vào các chức năng của chủ đề con của bạn. php để tự động trì hoãn 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 mình
1. Plugin JavaScript không đồng bộ miễn phí
Async JavaScript là một plugin WordPress miễn phí từ Frank Goossens, người đứng sau plugin Autoptimize nổi tiếng
Nó cung cấp cho bạn một cách đơn giản để trì hoãn việc 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. tổ chức. Sau đó, đi tới Cài đặt → Async JavaScript để định cấu hình 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 không đồng bộ và trì hoãn. Nhớ
- 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à chờ thực thi nó cho đến khi quá trình phân tích cú pháp HTML kết thúc
Xa hơn nữa, bạn cũng có thể chọn cách xử lý jQuery. Rất nhiều chủ đề và plugin phụ thuộc rất nhiều vào jQuery, vì vậy nếu bạn cố 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 trì hoãn nó. Chỉ cần đảm bảo kiểm tra kỹ lưỡng trang web của bạn
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ể khỏi bị trì hoãn 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 mình
2. Sử dụng Plugin WP Rocket
Mặc dù chúng tôi không cho phép hầu hết các plugin lưu vào bộ nhớ đệm tại Kinsta, nhưng chúng tôi cho phép plugin WP Rocket vì plugin này có tích hợp sẵn để hoạt động 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 trong phần Tệp JavaScript
Đơn giản hóa việc phân tích cú pháp Javascript bằng các plugin được quản lý từ bảng điều khiển tập trung. Dùng thử Kinsta miễn phí
Chúng tôi đã sử dụng kiến thức về quản lý trang web hiệu quả trên quy mô lớn và biến nó thành một khóa học điện tử và video. Nhấp vào đây để tải xuống Hướng dẫn quản lý hơn 40 trang web WordPress năm 2020
Giống như plugin Async JavaScript, WP Rocket cũng cho phép bạn loại trừ jQuery để tránh các sự cố với nội dung trang web của bạn
3. Sử dụng phương pháp được đề xuất của Varvy [Mã]
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 tất 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 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
function downloadJSAtOnload[] {
var element = document.createElement["script"];
element.src = "defer.js";
document.body.appendChild[element];
}
if [window.addEventListener]
window.addEventListener["load", downloadJSAtOnload, false];
else if [window.attachEvent]
window.attachEvent["onload", downloadJSAtOnload];
else window.onload = downloadJSAtOnload;
Đảm bảo thay thế “defer. js” bằng tên tệp/đường dẫn thực của tệp JavaScript mà bạn muốn trì hoãn. Sau đó, bạn có thể sử dụng hook wp_footer để chèn mã thông qua các chức năng của chủ đề con của bạn. tập tin php
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ư thế này
/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action[ 'wp_footer', 'my_footer_scripts' ];
function my_footer_scripts[]{
?>
REPLACE_WITH_VARVY_SCRIPT