Tốc độ trang là một trong những khía cạnh quan trọng nhất của trang web của bạn. Bất kể trang web của bạn phải cung cấp bao nhiêu, không ai thích đợi vài phút trước khi trang web của bạn tải. Đồng thời, nếu trang web của bạn tải nhanh hơn, nó có nhiều khả năng giữ chân khách truy cập hơn.
Bên cạnh đó, Tốc độ trang cũng tính đến thứ hạng trang web của bạn trong Công cụ tìm kiếm. Nó giúp các trình thu thập thông tin hiểu được mức độ hiệu quả và duy trì trang web của bạn. Trong hướng dẫn này, chúng ta sẽ xem Cách hoãn phân tích cú pháp JavaScript trong WordPress.
Tại sao Trì hoãn phân tích cú pháp JavaScript là quan trọng?
Để hoàn toàn nắm bắt được khái niệm Phân tích cú pháp trì hoãn của JavaScript, bạn sẽ cần hiểu cách trình duyệt hiển thị một trang web. Khi trình duyệt của bạn yêu cầu một trang, máy chủ web của bạn sẽ gửi lại trang đó và được tải xuống dưới dạng tài liệu HTML.
Tài liệu HTML chứa một số phần tử và tài nguyên mà trình duyệt đọc các phần tử trong khi các tài nguyên bổ sung được tải xuống. Và cuối cùng, trang chỉ được hiển thị khi tất cả các tài nguyên được tải xuống.
Tạo trang web tuyệt vời
Với trình tạo trang miễn phí tốt nhất Elementor
Bắt đầu bây giờCác tài nguyên có kích thước lớn hơn sẽ mất nhiều thời gian hơn để tải xuống. Hình ảnh chiếm hầu hết các tài nguyên này, đó là lý do tại sao điều quan trọng là phải tối ưu hóa hình ảnh của bạn. Bên cạnh đó, bạn có thể trì hoãn việc tải xuống các tập lệnh không cần thiết bằng cách xác định chúng và tăng tốc trang web của mình.
Làm thế nào để xác định tập lệnh nào để trì hoãn?
Đối với một trang web tối thiểu không sử dụng nhiều JavaScript, có thể không có tập lệnh nào quan trọng để tải trang. Ngược lại, điều quan trọng đối với một trang web khá phức tạp là phải phân tích chi tiết tất cả các tập lệnh để hiểu những tập lệnh nào cần thiết cho việc tải trang.
Phương pháp đầu tiên để loại bỏ các tập lệnh không cần thiết là xóa từng tập lệnh một và đồng thời kiểm tra bất kỳ lỗi nào trong bảng điều khiển JavaScript. Đồng thời, phương pháp này đòi hỏi nỗ lực và kiến thức đáng kể về JavaScript.
Phương pháp khác là sử dụng công cụ kiểm tra tốc độ để đánh giá tập lệnh nào cần thiết cho việc tải trang. Một trong những công cụ này bao gồm GTmetrix , nơi tất cả những gì bạn phải làm là nhập URL trang web của mình, hiển thị kết quả. Trong tab Tốc độ trang, bạn sẽ tìm thấy phần Trì hoãn phân tích cú pháp cho JavaScript, phần này sẽ hiển thị danh sách các tập lệnh không cần thiết được tải trong quá trình hiển thị trang của bạn khi mở rộng.
Sử dụng thông tin này, bạn có thể xóa các tập lệnh không giải thích cho việc hiển thị trang của bạn.
Thuộc tính Trì hoãn hoặc Không đồng bộ
Có hai cách để loại bỏ việc tải xuống các tập lệnh khi các trang được hiển thị.
Đầu tiên, bằng cách thêm thuộc tính Defer vào thẻ script, bạn có thể đảm bảo rằng trình duyệt không tải xuống tài nguyên trừ khi phân tích cú pháp trang được thực hiện. Sau khi hoàn tất quá trình hiển thị và phân tích cú pháp của trang, trình duyệt có thể tải xuống tất cả các tập lệnh được hoãn lại. Dưới đây là một thẻ tập lệnh mẫu cho biết cách thêm thuộc tính defer vào một trang HTML.
>script src="path/to/script" defer/scriptMặt khác, bạn có thể thêm thuộc tính không đồng bộ vào thẻ script. Thao tác này sẽ hướng dẫn trình duyệt tải tập lệnh riêng biệt. Điều này có nghĩa là trình duyệt sẽ bắt đầu tải xuống các tài nguyên khi nó gặp mã trong khi phân tích cú pháp riêng HTML đồng thời. Tập lệnh mẫu dưới đây cho biết cách thêm thuộc tính không đồng bộ.
>script src="path/to/script" async/scriptCả hai thuộc tính này khác nhau về cách tải xuống tài nguyên. Đối với một trang web tối thiểu, không dễ dàng nhận thấy sự khác biệt giữa các thuộc tính async và defer. Đồng thời, đối với một ứng dụng web phức tạp hơn, bạn nên sử dụng kỹ thuật trì hoãn.
Hoãn phân tích cú pháp của JavaScript
Đây là hai phương pháp mà bạn có thể sử dụng để hoãn phân tích cú pháp JavaScript.
1. Tùy chỉnh tệp functions.php
Nếu bạn đã quen với việc phát triển WordPress, bạn phải biết rằng không nên sử dụng trực tiếp mã lệnh đánh dấu HTML. Nhưng bạn có thể sử dụng Các hàm tích hợp trong WordPress để yêu cầu tài nguyên.
Để thêm thuộc tính async hoặc defer vào tập lệnh của mình, bạn nên thêm hàm sau vào tệp functions.php của chủ đề WordPress của mình.
add_filter('script_loader_tag', 'add_defer_tags_to_scripts');
function add_defer_tags_to_scripts($tag){
# List scripts to add attributes to
$scripts_to_defer = array('script_a', 'script_b');
$scripts_to_async = array('script_c', 'script_d');
# add the defer tags to scripts_to_defer array
foreach($scripts_to_defer as $current_script){
if(true == strpos($tag, $current_script))
return str_replace(' src', ' defer="defer" src', $tag);
}
# add the async tags to scripts_to_async array
foreach($scripts_to_async as $current_script){
if(true == strpos($tag, $current_script))
return str_replace(' src', ' async="async" src', $tag);
}
return $tag;
}Đảm bảo xếp hàng từng tập lệnh trước khi bạn thêm thuộc tính hoãn và không đồng bộ vào thẻ tập lệnh.
add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_custom_js() {
wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js');
wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js');
wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js');
wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js');
}2. Các plugin để hoãn phân tích cú pháp JavaScript
Có thể hiểu, không phải ai cũng có đủ kiến thức và kỹ năng để làm theo phương pháp trên. Do đó, đối với người mới bắt đầu, một số plugin có thể được sử dụng để Phân tích cú pháp JavaScript.
Không đồng bộ hóa JavaScript
Async JavaScript là một plugin WordPress miễn phí sử dụng mà bạn có thể cài đặt trên WordPress của mình để thực hiện tác vụ.
Một khi bạn đã cài đặt và kích hoạt các plugin, đi qua để cài đặt plugin và đánh dấu vào Enable Async JavaScript tùy chọn.
Cuộn xuống để chọn giữa phương pháp không đồng bộ hoặc phương pháp hoãn lại .
Cuộn xuống để có các tùy chọn nâng cao hơn, nơi bạn có thể thêm hoặc xóa riêng các tập lệnh để không đồng bộ hóa và trì hoãn. Bên cạnh đó, bạn có thể loại bỏ các plugin và chủ đề khỏi những thay đổi mà plugin này sẽ thực hiện.
Tự động tối ưu hóa
Autoptimize là một plugin khác cho phép bạn phân tích cú pháp của JavaScripts.
Sau khi cài đặt và kích hoạt plugin, hãy kiểm tra tùy chọn Optimize JavaScript Code trên trang cài đặt . Điều này sẽ trì hoãn tất cả các tập lệnh không cần thiết và chuyển chúng xuống chân trang.
Bạn cũng có thể thêm các tập lệnh cho thuộc tính không đồng bộ trong tab Thêm .
Bạn có thể chỉnh sửa tệp functions.php hoặc sử dụng các plugin như Autoptimize và Async JavaScript . Đây là hai phương pháp đáng tin cậy để thêm thuộc tính async và defer vào các thẻ script.
Chúng tôi hy vọng những kỹ thuật này sẽ giúp bạn tăng tốc trang web của mình. Hãy tham gia với chúng tôi trên Facebook  và Twitter của chúng tôi để được cập nhật về các bài đăng của chúng tôi.
